Angular 16升级后出现NG8001组件未知错误求助

使用nx migrate将项目从Angular 15升级到16后，运行nx s时出现多个NG8001错误，提示eu-toolbar、router-outlet等为未知元素。尽管ToolbarComponent已在app.module.ts的declarations中声明，且Angular 15时一切正常，但升级后仍报错，可从以下方向排查：

• 检查RouterModule导入状态：router-outlet属于Angular Router模块，Angular 16对模块导入的校验更严格。需确认app.module.ts中是否导入RouterModule.forRoot(...)，并将其添加到imports数组内。
• 确认组件的声明与导出范围：
  • 若ToolbarComponent、eu-footer来自其他特性模块，需确保该模块的exports数组包含这些组件，再在AppModule中导入对应模块。
  • 即使组件在AppModule的declarations中，也要检查组件类是否正确导出（比如toolbar.component.ts里的export class ToolbarComponent是否存在，有无拼写错误）。
• 排查NX升级后的配置变更：
  • 查看tsconfig.json或tsconfig.app.json的compilerOptions，确认strictTemplates是否被设为true（Angular 16可能默认开启更严格的模板检查），这可能暴露了之前隐藏的导入问题。
  • 检查angular.json或project.json中的构建配置，确认enableIvy等模板相关设置是否正常。
• 清理缓存并重新构建：
  • 执行nx reset清理NX缓存，删除node_modules、package-lock.json/yarn.lock文件，重新执行npm install或yarn install后再启动项目。
• 核对组件选择器拼写：
  • 确认模板中的eu-toolbar、eu-footer与组件元数据里的selector完全一致，检查是否存在大小写、连字符等拼写错误。
• 验证模块导入完整性：
  • 检查AppModule的imports数组，确认所有依赖模块（如CommonModule——*ngIf需依赖该模块、自定义特性模块）都已正确导入。

相关代码片段 #

app.component.html:

<eu-toolbar class="eu-app__header"></eu-toolbar>
<div class="eu-app__content" #appContent (onResize)="handleItemResize($event)">
  <router-outlet></router-outlet>
  <eu-footer *ngIf="layout === 'eu-app--website'"></eu-footer>
</div>

app.module.ts:

@NgModule({
  declarations: [
    AppComponent,
    PageNotFoundComponent,
    ToolbarComponent,
    NavigationItemPipe,
    DashboardComponent,
    ShopcartFlyoutComponent,
    NoCustomerAssignedComponent,
  ],
})

toolbar.component.ts:

@Component({
  selector: 'eu-toolbar',
  templateUrl: './toolbar.component.html',
  styleUrls: ['./toolbar.component.scss'],
})
export class ToolbarComponent implements OnInit, OnDestroy {
}

内容的提问来源于stack exchange，提问作者Tobias J.