angular踩坑之路：初探webpack

    之前费了一番力气安装好了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官网，去看一些教学视频，从简单的项目开始做起，慢慢深入，慢慢理解，还是那句话：路漫漫其修远兮，吾将上下而求索。

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

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