[webpack、angular] 打包 angular Uncaught Error: [$injector:modulerr]

剛開始學 webpack 打包 javascript、CSS 及一些圖片資源等

使用 angular 時總是遇到下完 webpack -p (壓縮打包的資源)

產生出來的 js 檔發生 inject error，其實明顯的是有 angular 的服務注入錯誤 (只是不知道是哪個= =)

另一方面造成的原因是因為 webpack -p 會使用一個設定 mangle: true

會將變數名稱用單一字母做替換，以減小 js 檔案大小。

(因此把 mangle 這個功能改為 false 就可以解決，只是有點消極，而且這樣相對壓縮有限)

但可想而知我們注入的 angular 服務

如：

app.contorller('test', function($scope, $http)
{

......程式碼
});

這其中的 $scope 及 $http 也會被替換為其他字母，導致無法正確地注入服務，因此造成了這些錯誤。

---

 

解決方法為我們必須用angular 嚴謹一點的寫法來正確注入服務

1. 當我們需要注入服務時，需要在前依序標明注入的服務
   如：

   app.contorller('test', ['$scope', '$http', function($scope, $http)
   {
   
        ......程式碼
   }]);
   
   

2. 利用 $inject 注入相依賴的服務
   如：

   <pre class="ng-scope"><code class="lang-js"><span class="kwd">var</span> <span class="typ">MyController</span> <span class="pun">=</span> <span class="kwd">function</span><span class="pun">(</span><span class="pln">$scope</span><span class="pun">,</span><span class="pln"> greeter</span><span class="pun">)</span> <span class="pun">{</span>
     <span class="com">// ...</span>
   <span class="pun">}</span>
   <span class="typ">MyController</span><span class="pun">.</span><span class="pln">$inject </span><span class="pun">=</span> <span class="pun">[</span><span class="str">'$scope'</span><span class="pun">,</span> <span class="str">'greeter'</span><span class="pun">];
   

PS. 若有相對應的參數，也需要用此 inject 的寫法注入

這樣就可以成功的打包 angular 的 js 檔

參考資料：

https://docs.angularjs.org/guide/di