HAO are you~

package.json

scripts(指令配置)

把npm命令轉換成對應的Angular CLI。

例如：

npm run start等同於ng serve

npm run build-vt01 等同於ng build --configuration=vt01 --output-hashing=all && gzip-all \"../Scripts/wwwroot/*.{css,js}\"

在uat環境時，如果要更新前端程式就必須在發布前先執行ng build --configuration=vt01 --output-hashing=all && gzip-all \"../Scripts/wwwroot/*.{css,js}\"產出編譯後的前端程式包。

  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "build-dev": "ng build --configuration=dev --output-hashing=all",
    "build-vt01": "ng build --configuration=vt01 --output-hashing=all && gzip-all \"../Scripts/wwwroot/*.{css,js}\"",
    "prod": "ng build --configuration=production --output-hashing=all && gzip-all \"../Scripts/wwwroot/*.{css,js}\"",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  }

---

angular.json

projects.architect.build.options(建置選項)

• "outputPath": "../Scripts/wwwroot"：指定編譯後的檔案 (例如 JavaScript、CSS、HTML、圖片等) 應該輸出到的目錄
• "index": "src/index.html"`：指定應用程式的入口 HTML 檔案的路徑
• "assets"：指定在編譯過程中需要複製到輸出目錄的資源檔案或資料夾(ex：原本在./src/assets/content的資料夾在建置時會被複製到../Scripts/wwwroot/assets 之下)

執行前述的編譯指令(ng buil --configuration=vt01….)後，依照這裡的設定，把程式包輸出至../Scripts/wwwroot

          "options": {
            "outputPath": "../Scripts/wwwroot",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": [
              "zone.js"
            ],
            "tsConfig": "tsconfig.app.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              "src/favicon.ico",
              "src/assets/contents",
              "src/assets/i18n"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          }

projects.architect.build.confiturations

依照不同的環境設定不同的設定檔。

• baseHref：指定應用程式的基礎 URL。 這用於設定應用程式的根路徑。"/Pnp/Viewer/" 表示應用程式將部署在伺服器的 /Pnp/Viewer/ 路徑下。這裡的設定通常都會和IIS的站台名稱一樣。
• fileReplacements：定義了在建置過程中需要替換的檔案。這個配置會將 src/environments/environment.ts 檔案替換為 src/environments/environment.dev.ts 檔案。 這允許您在開發環境中使用不同的環境變數 (例如 API 端點、除錯設定等)。

          "configurations": {
            "dev": {
              "budgets": [
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.dev.ts"
                }
              ]
            },
            "vt01": {
              "baseHref": "/Pnp/Viewer/",
              "budgets": [
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.vt01.ts"
                }
              ]
            },
            "production": {
              "budgets": [
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ]
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            }
          }

---

補充(MVC部分的設定)

先前提到這是個後端用.Net Framework MVC5前端則是使用Angular 16的專案，Angular的部分設定好了，MVC的部分當然也是有要設定的地方。

引用Angular編譯後所產生的JS. CSS檔案(~/Scripts/wwwroot為Angular編譯後產出輸出檔案的目錄)

            bundles.Add(new Bundle("~/Areas/Viewer/bundles/AngularJs").Include(
                "~/Areas/Viewer/Scripts/wwwroot/*.js"
                ));

            bundles.Add(new StyleBundle("~/Areas/Viewer/bundles/AngularCss").Include(
                "~/Areas/Viewer/Scripts/wwwroot/*.css", new CssRewriteUrlTransformWrapper()
                ));

在index.cshtml插入初始angular元件

這邊要特別注意的點是，base href的設定要跟angular.json裡面設定的一致!

<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Angular Project</title>
    <base href= "/PnpTest/Viewer/" />
    @Styles.Render("~/Areas/Viewer/bundles/AngularCss")

</head>
<body>

    <!--插入Angular的app-root元件-->
    <app-root></app-root>



    @Scripts.Render("~/Areas/Viewer/bundles/AngularJs") @*Include Angular (builded)wwwroot file*@

</body>
</html>

---

Ref：

• Getting Started with Angular CLI as Front End in ASP.NET MVC