背景:最近开始学习angular,看到官网上已经发布到4.0的版本了,目前基于4.0版本开始学习。
之前费了一番力气安装好了angular开发环境,后面的几天都是在angular中文官网上看文档,照着英雄教程一步一步操作,熟悉了angular的一些基本特性,这部分没有遇到什么大问题,还比较顺利。这两天在看官方文档中的Webpack简介,想跟着文档做一遍,了解一下如何用Webpack打包angular项目,结果遇到了一些问题,因为是初学angular和Webpack的小白,这些问题一时难以解决,花费了不少时间,想在这里记录一下。
首先跟着文档将相关的文件都添加到项目中,目录是这样子的:
根据文档中在根目录下运行npm start,结果一堆错误:
一个一个的来解决吧,先看这个错误:
ERROR in [at-loader] ./node_modules/@angular/common/src/platform_id.d.ts:8:42
TS1039: Initializers are not allowed in ambient contexts.
——不允许在环境上下文中使用初始化表达式。这是怎么回事啊,对于我这个小白来说,只有上网搜寻帮助了。在stackoverflow(https://stackoverflow.com/questions/43361702/sample-webpack-angular4-application-throwing-errors/43442065)上看到有人和我遇到了一样的问题,被采纳的答案说用2.2.1版本的typescript没有问题,而我们的package.json文件中制定的typescript是2.0.10版本的,可能是版本过低了,所以我将package.json-->devDependencies-->typescript 改为 "~2.2.1",重新编译一次,发现还是有错,但是仔细看输出内容,发现使用的typescript还是2.0.10版本:
所以我将typescript包删了重新安装了一下:
现在typescript的版本是2.4.2,接着编译,又出现了新的问题:
ERROR in [at-loader] ./node_modules/rxjs/Subject.d.ts:16:22
TS2415: Class 'Subject<T>' incorrectly extends base class 'Observable<T>'.
Types of property 'lift' are incompatible.
Type '<R>(operator: Operator<T, R>) => Observable<T>' is not assignable to type '<R>(operator: Operator<T, R>) => Observable<R>'.
Type 'Observable<T>' is not assignable to type 'Observable<R>'.
Type 'T' is not assignable to type 'R'.
接着上网搜寻,这里(https://stackoverflow.com/questions/44793859/rxjs-subject-d-ts-error-class-subjectt-incorrectly-extends-base-class-obs)说2.4.x版本的typescript会导致RxJS出问题("typescript":"^2.3.4"will match 2.4.1 and 2.4 is the version that exposes the problem with RxJS. )。于是我又删了typescript包,将package.json-->devDependencies-->typescript 改为 "2.2.1",重新npm install typescript安装了typescript@2.2.1。
继续 npm start,错误少了很多,剩下来的都是一些变量未声明的错误,我觉得引起它们的原因可能是同一个。
ERROR in [at-loader] ./src/app/app.component.spec.ts:3:1
TS2304: Cannot find name 'describe'.
万能的overstakflow啊,我又找到了答案!戳这里(https://stackoverflow.com/questions/31173738/typescript-getting-error-ts2304-cannot-find-name-require),答案中建议npm install @types/node --save-dev,我
其实已经安装了@types/node了版本是6.0.84,
首先在tsconfig.json文件中加上
"typeRoots": [
"../node_modules/@types"
]
编译一下,还剩4个错误:
我觉得可能是@types/node的版本问题,所以删除了原来安装的@types/node,npm install @types/node --save-dev安装了@types/node8.0.14,编译一下,没有错误了!
运行npm run build,也成功了:
这些错误困扰了我两三天的时间,因为刚开始学angular和Webpack,遇到了问题自己根本就没有解决的方向,只好上网搜寻。我发现stackoverflow是很强大的网站,上面可以搜到很多有用的回答,今后我会多多关注这个网站的。另外,不知道angular中文官网是文档更新不及时还是别的什么原因,觉得坑挺多的,照着上面做下来会出现一些预料不到的错误,浪费了很多时间,我觉得作为一个现在这么流行的前端框架,官方文档写成这样有点败好感......这次我仅仅是找到了问题的解决办法,但是为什么这么解决,错误的原因是什么我还没有搞清楚,我打算放弃angular官网,去看一些教学视频,从简单的项目开始做起,慢慢深入,慢慢理解,还是那句话:路漫漫其修远兮,吾将上下而求索。