之前費了一番力氣安裝好了angular開發環境，後面的幾天都是在angular中文官網上看文檔，照著英雄教程一步一步操作，熟悉了angular的一些基本特性，這部分沒有遇到什麽大問題，還比較順利。這兩天在看官方文檔中的Webpack簡介，想跟著文檔做一遍，了解一下如何用Webpack打包angular項目，結果遇到了一些問題，因為是初學angular和Webpack的小白，這些問題一時難以解決，花費了不少時間，想在這裏記錄一下。

首先跟著文檔將相關的文件都添加到項目中，目錄是這樣子的：

根據文檔中在根目錄下運行npm start，結果一堆錯誤：

一個一個的來解決吧，先看這個錯誤：

ERROR in [at-loader] .[email protected]/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>‘.

接著上網搜尋，這裏（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 [email protected]

繼續 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，我[email protected]/node了版本是6.0.84，

首先在tsconfig.json文件中加上

"typeRoots": [
"..[email protected]"
]

編譯一下，還剩4個錯誤：

[email protected]/node的版本問題，[email protected]/node，npm install @types/node [email protected]/node8.0.14，編譯一下，沒有錯誤了！

運行npm run build，也成功了：

這些錯誤困擾了我兩三天的時間，因為剛開始學angular和Webpack，遇到了問題自己根本就沒有解決的方向，只好上網搜尋。我發現stackoverflow是很強大的網站，上面可以搜到很多有用的回答，今後我會多多關註這個網站的。另外，不知道angular中文官網是文檔更新不及時還是別的什麽原因，覺得坑挺多的，照著上面做下來會出現一些預料不到的錯誤，浪費了很多時間，我覺得作為一個現在這麽流行的前端框架，官方文檔寫成這樣有點敗好感......這次我僅僅是找到了問題的解決辦法，但是為什麽這麽解決，錯誤的原因是什麽我還沒有搞清楚，我打算放棄angular官網，去看一些教學視頻，從簡單的項目開始做起，慢慢深入，慢慢理解，還是那句話：路漫漫其修遠兮，吾將上下而求索。

多說一句：辛苦記錄，轉載請註明出處。

angular踩坑之路：初探webpack