帶有CLI的Angular 2 - 用於生產

Question

我剛剛安裝了angular-cli 1.0.0.beta.17（最新的一個），啟動新項目，能夠在端口4200上提供項目而沒有任何問題 - 只需標准的“app works！” 信息。

然而，當我嘗試使用命令ng build --prod來構建生產這個空的和通用的應用程序時，我根本沒有創建main。*。js文件，並且有幾個警告屏幕，例如：

• 刪除未使用的功能......
• 初始化中的網站效應......
• 等等

這是一個全新的空項目 - 我沒有機會打破任何東西......

如何建立生產版本？

Answer 1

更新了Angular v6 +

# Prod - these are equivalent
ng build --configuration=production
ng build --c=production
ng build --prod=true

# Dev - and so are these
ng build --configuration=development
ng build --c=development
ng build --prod=false
ng build

這里有更多標志設置

https://angular.io/cli/build

---

根據Angular-cli的github wiki v2 +，這些是啟動開發和生產構建的最常用方法

# Prod these are equivalent
ng build --target=production --environment=prod
ng build --prod --env=prod
ng build --prod

# Dev and so are these
ng build --target=development --environment=dev
ng build --dev --env=dev
ng build --dev
ng build

有不同的默認標志會影響--dev vs --prod構建。

Flag                 --dev      --prod
--aot                false      true
--environment        dev        prod
--output-hashing     media      all
--sourcemaps         true       false
--extract-css        false      true

--prod還設置以下不可標記的設置：

• 如果在.angular-cli.json配置，則添加服務工作者。
• 用production值替換模塊中的process.env.NODE_ENV （某些庫需要這樣做，比如反應）。
• 在代碼上運行UglifyJS。

---

我需要做一些故障排除才能讓AOT正常工作。 我跑的時候：

ng build --prod --aot = false

我會得到一個類似的錯誤

Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory'

最初，我不得不做一些項目重構才能讓AOT工作。 但是，如果遇到此錯誤，它們可能是一個修復程序。 嘗試

npm i enhanced-resolve@3.3.0

https://github.com/angular/angular-cli/issues/7113

Answer 2

嘗試使用：ng build --target = production這應該可行。

Answer 3

嘗試這個

 ng build --env=prod

構建系統默認使用使用environment.ts的開發環境，但是如果你ng build --env=prod那么將使用environment.prod.ts 。

如果您的項目是新的角度cli app，則會得到結果。

 10% building mod3439ms building modules                                                                     1ms add01564ms 917ms asset45ms emittingHash: 9216e76d6f10637c945c                  
Version: webpack 2.1.0-beta.22
Time: 6358ms
            Asset       Size  Chunks             Chunk Names
   main.bundle.js     2.6 MB    0, 2  [emitted]  main
 styles.bundle.js    10.2 kB    1, 2  [emitted]  styles
        inline.js    5.53 kB       2  [emitted]  inline
         main.map    2.61 MB    0, 2  [emitted]  main
       styles.map    14.2 kB    1, 2  [emitted]  styles
       inline.map    5.59 kB       2  [emitted]  inline
       index.html  482 bytes          [emitted]  
assets/.npmignore    0 bytes          [emitted]  
chunk    {0} main.bundle.js, main.map (main) 2.06 MB {1} [initial] [rendered]
chunk    {1} styles.bundle.js, styles.map (styles) 9.96 kB {2} [initial] [rendered]
chunk    {2} inline.js, inline.map (inline) 0 bytes [entry] [rendered]
Child html-webpack-plugin for "index.html":
         Asset     Size  Chunks       Chunk Names
    index.html  2.82 kB       0       
    chunk    {0} index.html 350 bytes [entry] [rendered]

完成和它的下/距離，除非你已經改變outDir在angular-cli.json

Answer 4

使用cli版本（1.0.1）使用：

ng build --prod

這將為您提供帶有index.html的dist文件夾以及准備生產的所有捆綁的js文件。

Answer 5

Aot是否實現。

如果實施Aot：

ng build --prod

如果沒有實現Aot：

ng build --prod --aot=false

Answer 6

您必須更新最新版本的angular-cli，typescript。 如果使用命令：

ng build --prod --aot=false

你的項目編譯JIT編譯，如果你使用angular-cli必須工作。

如果你想用命令構建

ng build --prod --aot=true

然后是AOT編譯，你必須將main.ts文件更新為：

import { enableProdMode } from '@angular/core';
import { platformBrowser }    from '@angular/platform-browser';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowser().bootstrapModuleFactory(AppModule);

Answer 7

你想要AOT，這是使用-prod開關所暗示的。 不幸的是，當Angular CLI本身中斷時，錯誤消息沒有幫助。 這就是我解決它的方式：

npm install enhanced-resolve@3.3.0

我在這個頁面上找到了解決方案很長很長的路： https ： //github.com/angular/angular-cli/issues/7113

我看到有人提到將Angular CLI版本更新到至少1.2.6。 解決問題，但還沒有測試過。

Answer 8

有很多命令可以使用angular cli將角度應用程序構建到生產模式。

ng build --env = prod

一旦你在cmd上執行這個命令，默認文件夾將創建包含與prod build相關的所有縮小文件的文件，但它不會在index.html中設置基本路徑。 要在index.html中進行更改，請執行手動更改，例如添加（。）ie。

<base href="./">

您還可以使用angular / CLI命令在prod模式下構建代碼時傳遞參數。

ng build --base-href=./ --env=prod

還有其他命令可以構建，如傳遞AOT和構建優化器（以減少包大小）。

ng build --prod --build-optimizer

如果要在構建后更改默認文件夾名稱（dist），則可以更改.angular-cli.json中的outDir值。

Answer 9

這些是來自您的java腳本源代碼或您在項目中使用的第三方庫的uglify js警告。現在您可以忽略它們。

Angular cli團隊正致力於為prod構建抑制此問題https://github.com/angular/angular-cli/pull/1609