node.js - 差异加载在 Angular 12 中不起作用：“Uncaught SyntaxError: Unexpected token ':'”

Question

我最近在我们的 Angular 12 项目中遇到了包大小超出预算限制的错误。在实施多种方法来减小包大小时，差异加载就是其中一种方法。Angular 将其作为默认设置提供，并在您在您的和您的配置中设置target为后为您启用此功能。es2015tsconfig.app.json.browserslistrc

但令我惊讶的是，即使在执行了上述两个步骤之后，某些东西也无法正常工作。我们正在@angular-builders/custom-webpack用作我们的构建器。在我们的自定义 webpack 配置中，我们只是DefinePlugin用来添加一些特定于环境的变量。

我的angular.json：

"architect": {
    "build": {
        "builder": "@angular-builders/custom-webpack:browser",
        "options": {
            "outputPath": "dist/apps/my-project",
            "index": "apps/my-project/src/index.html",
            "main": "apps/my-project/src/main.ts",
            "polyfills": "apps/my-project/src/polyfills.ts",
            "tsConfig": "apps/my-project/tsconfig.app.json",
            "aot": true,
            "customWebpackConfig": {
                "path": "apps/my-project/webpack.config.js",
                "mergeRules": {
                    "externals": "replace"
                }
            }
        },
        "configurations": {
            "prod": {
                "outputPath": "dist/apps/my-project-prod",
                "customWebpackConfig": {
                    "path": "apps/my-project/webpack.prod.partial.js",
                    "mergeRules": {
                        "externals": "replace"
                    }
                },
                "baseHref": "https://my-project.com/",
                "fileReplacements": [
                    {
                        "replace": "apps/my-project/src/environments/environment.ts",
                        "with": "apps/my-project/src/environments/environment.prod.ts"
                    }
                ],
                "index": {
                    "input": "apps/my-project/src/index.prod.html",
                    "output": "/index.html"
                },
                "optimization": true,
                "outputHashing": "all",
                "sourceMap": false,
                "namedChunks": false,
                "aot": true,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": true,
                "budgets": [
                    {
                        "type": "initial",
                        "maximumWarning": "2mb",
                        "maximumError": "5mb"
                    }
                ]
            }
        }
    },
    "serve": {
        "builder": "@angular-builders/custom-webpack:dev-server",
        "options": {
            "host": "localhost",
            "baseHref": "http://localhost:3000",
            "port": 3000,
            "browserTarget": "my-project:build"
        },
        "configurations": {
            "prod": {
                "browserTarget": "my-project:build:prod"
            }
        }
    }
}

我的tsconfig.app.json：

{
    "extends": "./tsconfig.json",
    "compilerOptions": {
       "outDir": "../../dist/out-tsc/apps/my-project",
        "types": ["node"],
        "typeRoots": [
            "./src/customTypes"
        ]
    },
    "exclude": [
        "src/test.ts",
        "**/*.spec.ts"
    ],
    "files": [
        "src/main.ts",
        "src/polyfills.ts",
    ],
    "include": [
        "src/**/*.ts"
    ]
}

父tsconfig.json：

{
    "compileOnSave": false,
    "compilerOptions": {
        "inlineSources": true,
        "sourceMap": true,
        "declaration": false,
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "importHelpers": true,
        "target": "es2015",
        "module": "es2020",
        "typeRoots": [
            "node_modules/@types"
        ],
        "lib": [
            "es2018",
            "dom"
        ],
        "skipLibCheck": true,
        "skipDefaultLibCheck": true,
        "baseUrl": "./"
    },
    "exclude": [
        "node_modules",
        "tmp"
    ]
}

我的.browserslistrc：

last 1 Chrome version
last 1 Firefox version
last 2 Edge major versions
last 2 Safari major versions
last 2 iOS major versions
Firefox ESR
not IE 11

根据文档，您可以通过查看index.html文件的<script>标签来验证差异加载是否有效：

<body>
  <app-root></app-root>
  <script src="runtime-es2015.js" type="module"></script>
  <script src="runtime-es5.js" nomodule></script>
  <script src="polyfills-es2015.js" type="module"></script>
  <script src="polyfills-es5.js" nomodule></script>
  <script src="styles-es2015.js" type="module"></script>
  <script src="styles-es5.js" nomodule></script>
  <script src="vendor-es2015.js" type="module"></script>
  <script src="vendor-es5.js" nomodule></script>
  <script src="main-es2015.js" type="module"></script>
  <script src="main-es5.js" nomodule></script>
</body>

我index.html的<script>标签如下所示：

<script src="runtime.f03314b4ecbf857f30db.js" defer></script>
<script src="polyfills.b4a4dc722533999c6a79.js" defer></script>
<script src="scripts.d0fcd864b87b7eb9e1e6.js" defer></script>
<script src="vendor.2070a0076d5aa66a3b91.js" defer></script>
<script src="main.c7fdac1323ac33ecb488.js" defer></script>

我似乎无法在其中找到任何一个es5或es2015关键字。我都找不到type=module或nomodule。我的包大小肯定减少了，但我的项目在服务或部署后都无法运行。我在浏览器 ( Chrome 91.0.4472.101) 的控制台中收到以下错误，不清楚：

我的polyfill.ts：

import 'core-js/es/reflect';
import '@angular/localize/init';
import 'zone.js/dist/zone';
(window as any)['global'] = window;

我遇到了这个问题，它指出在发球期间不会发生差异加载，但对我来说它在部署后也不起作用。为了避免任何配置错误，我还在 Angular 12 中创建了一个新的演示项目，并且一切正常。我也匹配了上述文件的值。我发现的唯一区别是：

• 演示项目中没有使用自定义 webpack
• polyfill.ts仅包含 Zone.js 的导入

甚至演示项目的index.html也不包含es5, es2015, module,nomodule关键字，并且与我的项目的index.html.

我在这方面花了很多时间，但找不到任何解决方案。如果我遗漏了什么，请告诉我。

标签： node.jsangulartypescriptwebpackangular12