Angular 17点击按钮跳转页面时出现组件定义断言错误

错误原因 #

核心问题出在路由配置文件app.routes.ts中：你为UpdateData路径配置的component是数据模型类UpdateData，而非实际的组件类UpdateDataComponent。

Angular路由要求component属性必须传入带有@Component装饰器的组件类，而UpdateData作为数据模型（位于./Model/update-data），没有@Component装饰器，所以路由尝试激活组件时触发了断言错误：

ERROR Error: ASSERTION ERROR: Provided Component class doesn't contain Component definition. Please check whether provided class has @Component decorator. [Expected=> null != null <=Actual]
at throwError2 (core.mjs:392:11)
at assertDefined (core.mjs:388:9)
at ViewContainerRef2.createComponent (core.mjs:19969:17)
at _RouterOutlet.activateWith (router.mjs:2423:31)
at ActivateRoutes.activateRoutes (router.mjs:3033:28)
at router.mjs:2987:12
at Array.forEach (<anonymous>)
at ActivateRoutes.activateChildRoutes (router.mjs:2986:25)
at ActivateRoutes.activate (router.mjs:2897:10)
at router.mjs:2881:120
handleError @ core.mjs:11760

解决方案 #

修改app.routes.ts文件，正确导入组件类并替换路由配置中的component值：

import { Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
// 替换模型导入为组件导入
import { UpdateDataComponent } from './update-data/update-data.component';

export const routes: Routes = [
  {path: "Home", component: HomeComponent },
  // 使用组件类而非模型类
  {path: "UpdateData", component: UpdateDataComponent },
];

确认update-data.component.ts中的组件类已正确配置@Component装饰器（你的代码中已满足，无需修改）：

import { Component } from '@angular/core';
import { RouterLink } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';
import { CommonModule } from '@angular/common';
import { UpdateDataService } from '../Services/update-data.service';

@Component({
  selector: 'app-update-data',
  standalone: true,
  imports: [RouterLink, HttpClientModule, CommonModule],
  templateUrl: './update-data.component.html',
  styleUrl: './update-data.component.css'
})
export class UpdateDataComponent {
  constructor(private objUpdate: UpdateDataService) { }
};

修改后重新运行项目，路由跳转即可正常激活UpdateDataComponent组件。

内容的提问来源于stack exchange，提问作者ronin hawkeye