Angular踩坑之路：初探webpack

背景：最近開始學習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官網，去看一些教學視頻，從簡單的項目開始作起，慢慢深刻，慢慢理解，仍是那句話：路漫漫其修遠兮，吾將上下而求索。