angular踩坑之路：初探webpack

標籤：art   dev   guid   center   config   loader   pos   錯誤   nbsp   

 

    之前費了一番力氣安裝好了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安裝了[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，我其實已經安裝了@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