将角度 15 升级到 16 但出现错误

Question

更新前我已经升级了以下内容 节点到18.18.0， NPM 至 10.2.3 打字稿到 4.9.5

之后升级现有项目的@angualar/cli@16 --force。

但出现以下错误

错误列表很长，但大多数错误都是相同的

错误：src/app/app.component.html:2:1 - 错误 NG8001：“router-outlet”不是已知元素： 如果“router-outlet”是 Angular 组件，则验证它是否是该模块的一部分。 如果“router-outlet”是 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”以抑制此消息。

2

src/app/app.component.ts:20:15
20  templateUrl: './app.component.html',
                   ~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component AppComponent.


Error: src/app/views/pages/about-app/about-app.component.html:1:1 - error NG8001: 'mat-card' is not a known element:
If 'mat-card' is an Angular component, then verify that it is part of this module.
If 'mat-card' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

1 <mat-card class="head">

src/app/views/pages/about-app/about-app.component.ts:6:18 6 templateUrl: './about-app.component.html', ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 组件 AboutAppComponent 模板出错。

我尝试根据 stackoverflow 的一些建议在组件中添加 routerModule 我还尝试在 NgModule.schemas 中添加 CUSTOM_ELEMENTS_SCHEMA

Answer 1

检查您的独立组件是否正在导入所需的模块。如果问题仍然存在，

首先切换回15.2.0或更高版本，并将项目迁移到独立组件，然后再迁移到16。

成功进入 15.2.0 或更高版本后

ng serve

。在终端中运行：

ng generate @angular/core:standalone

完成后，删除所有

NgModule

声明并运行单元测试并修复任何故障。如果项目使用自动格式化，请使用代码格式化程序。然后运行项目中的所有 linter 并修复警告。

完成上述过程后，您必须将声明转换为独立，删除不必要的 NgModules 并切换到独立引导 API。您应该按以下顺序运行这些迁移：

1. 将声明转换为独立声明
2. 删除不必要的 NgModules
3. 切换到独立引导 API

仍然可能存在一些常见问题和限制，您可以通过分析来解决

tsconfig.json

如果ng 15.2.0+项目在独立组件模式下运行成功。那么迁移到16后就不会出现上面的错误了。

供您参考：

更新了 Angular 至 v16，现在 mat 组件（例如 mat-icon）无法找到并且是未知元素？

https://angular.io/guide/standalone-migration#migrate-an-existing-angular-project-to-standalone