您现在的位置是:首页 > web开发 > angular踩坑之路:初探webpack

angular踩坑之路:初探webpack

web开发作者:dayu日期:6天前点击:2

根据文档中在根目录下运行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官网,去看一些教学视频,从简单的项目开始做起,慢慢深入,慢慢理解,还是那句话:路漫漫其修远兮,吾将上下而求索。

多说一句:辛苦记录,转载请注明出处。

angular踩坑之路:初探webpack

原文地址:http://www.cnblogs.com/lillian0525/p/7219966.html


下一篇       上一篇