ng serve 在IE 空白頁面

Angular 與 IE瀏覽器

ng serve支持ie10

舊版瀏覽器中的本地開發

舊版瀏覽器中的本地開發

在 Angular CLI 10 或更高版本生成的應用項目中,默認是不啓用差異化加載的。ng serve,ng test和ng e2e命令只會生成一個 ES2015 版本,該版本無法在不支持該模塊的舊版瀏覽器(例如 IE 11)中運行。

要保持差異化加載的好處,更好的選擇是爲ng serve,ng e2e和ng test定義多個配置。

也就是說在本地ng serve的時候是默認不生成poltfills-es5.js所以本地啓動IE空白。

直接在tsconfig.json將target改成 “es5”再重新啓動即可或者使用下面的方法

爲 ES5 配置服務

要讓ng serve做到這一點,就要在tsconfig.app.json後面創建一個新的文件tsconfig-es5.app.json,包含以下內容。

                content_copy{

"extends": "./tsconfig.app.json",

"compilerOptions": {

    "target": "es5"

  }

}


在angular.json中,在build和serve下添加兩個新的配置節,其目標指向新的 TypeScript 配置。

                content_copy"build": {

  "builder": "@angular-devkit/build-angular:browser",

  "options": {

      ...

  },

  "configurations": {

    "production": {

        ...

    },

    "es5": {

      "tsConfig": "./tsconfig-es5.app.json"

    }

  }

},

"serve": {

  "builder": "@angular-devkit/build-angular:dev-server",

  "options": {

      ...

  },

  "configurations": {

    "production": {

    ...

    },

    "es5": {

      "browserTarget": "<app-name>:build:es5"

    }

  }

},


然後,你可以使用此配置運行ng serve命令。務必確保將(在":build:es5"中)替換爲應用程序的實際名稱,因爲它也會出現在angular.json的projects中。例如,如果你的應用程序名稱爲myAngularApp則配置要變成"browserTarget": "myAngularApp:build:es5"。

                content_copyng serve --configuration es5


配置 test 命令

創建一個新的文件,在tsconfig.spec.json後面tsconfig-es5.spec.json,包含以下內容。

                content_copy{

"extends": "./tsconfig.spec.json",

"compilerOptions": {

    "target": "es5"

  }

}

                content_copy"test": {

  "builder": "@angular-devkit/build-angular:karma",

  "options": {

      ...

  },

  "configurations": {

    "es5": {

      "tsConfig": "./tsconfig-es5.spec.json"

    }

  }

},


然後,你可以使用此配置運行測試了

                content_copyng test --configuration es5

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章