Angular 12 到 13 升级问题

Question

我正在尝试将 Angular 12 升级到 13。但最终，我想升级到 v16，仅供参考。

首先，我为 Angular 13 升级了 Angular/cli、Core、ngx-build-plus、material、typescript 等。

在我的 angular.json 中，我有这个。

"architect": {
        "build": {
          "builder": "ngx-build-plus:browser",
          "options": {
            "outputPath": "dist/v2",
            "index": "",
            "main": "projects/c-component/src/main.ts",
            "polyfills": "projects/c-component/src/polyfills.ts",
            "tsConfig": "projects/c-component/tsconfig.lib.json",
            "aot": true,
            "assets": [
              "projects/c-component/src/assets",
            
            ],
            "stylePreprocessorOptions": {
              "includePaths": [
                "node_modules/"
              ]
            },
            "scripts": [
              {
                "bundleName": "polyfill-webcomp-es5",
                "input": "node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"
              },
              {
                "bundleName": "polyfill-webcomp",
                "input": "node_modules/@webcomponents/webcomponentsjs/bundles/webcomponents-sd-ce-pf.js"
              },
              "node_modules/rxjs/bundles/rxjs.umd.js",
              "node_modules/@angular/core/bundles/core.umd.js",
              "node_modules/@angular/animations/bundles/animations.umd.js",
              "node_modules/@angular/material/bundles/material.umd.js",
              "node_modules/@angular/cdk/bundles/cdk.umd.js",
              "node_modules/@angular/common/bundles/common.umd.js",
              "node_modules/@angular/common/bundles/common-http.umd.js",
              "node_modules/@angular/compiler/bundles/compiler.umd.js",
              "node_modules/@angular/elements/bundles/elements.umd.js",
              "node_modules/@angular/platform-browser/bundles/platform-browser.umd.js",
              "node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js"
            ]
          },

在上面的脚本部分[]中，脚本中包含了rxjs和@angular umd js文件。但升级到 v13 后，node_modules 中不再有那些 umd js 文件。相反，例如在 fesm2020 或 fesm2015 下有 mjs 文件。

所以，我把上面的js文件替换成了mjs文件。并运行应用程序。

出现此错误，但没有任何效果

Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
[1] Error: Transform failed with 1 error:
[1] C:/dev/frontend/test/projects/chat-showcase/src/app/app.component.scss:17:100: ERROR: Unterminated string token
[1]     at C:\dev\frontend\test\node_modules\@ngtools\webpack\src\ivy\loader.js:81:18
[1]     at processTicksAndRejections (internal/process/task_queues.js:95:5)
[1]
[1] ./projects/chat-showcase/src/polyfills.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
[1] Error: Transform failed with 1 error:
[1] C:/dev/frontend/test/projects/chat-showcase/src/app/app.component.scss:17:100: ERROR: Unterminated string token
[1]     at C:\dev\frontend\test\node_modules\@ngtools\webpack\src\ivy\loader.js:81:18
[1]     at processTicksAndRejections (internal/process/task_queues.js:95:5)

有人可以告诉我如何解决这个问题吗？

提前致谢

尝试运行应用程序并进行构建

Answer 1

更新库或框架可能很复杂。后端团队花了一个月的时间在多个存储库上升级节点。

我会删除package-lock.json，删除node_modules并安装新的角度版本，然后npm install并尝试启动应用程序并查找错误，有时IDE可以帮助修复它们，有时你必须重构一些代码，但是在您尝试启动应用程序之前，您永远不会知道