Angular4路由报错：Employee组件不属于任何模块的问题求助

我来帮你搞定这个问题！你碰到的「Employee组件不属于任何模块」错误，根源很明确——你没把EmployeeCompoennt添加到AppModule的declarations数组中，还有几个小细节需要调整，我一步步给你梳理：

1. 核心问题：组件必须在模块中声明 #

Angular的模块系统要求所有组件都必须在某个NgModule的declarations数组里注册，这样框架才能识别并管理这个组件。你的AppModule里只声明了AppComponent，完全漏掉了EmployeeCompoennt。另外，组件绝对不能放在providers数组里（这个数组是用来注册服务的），得把它从providers里删掉。

2. 修正后的代码示例 #

修正app.module.ts #

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { ROUTING } from './Routing'; // 注意：如果你的路由文件是Routing.ts，这里路径不需要加.component
import { EmployeeCompoennt } from './Employee/Employee.Compoennt'; // 去掉../app，因为app.module.ts本身就在app目录下

@NgModule({
  declarations: [
    AppComponent,
    EmployeeCompoennt // 关键：把组件添加到声明数组里！
  ],
  imports: [
    BrowserModule,
    ROUTING
  ],
  providers: [], // 移除EmployeeCompoennt，组件不该在这里
  bootstrap: [AppComponent]
})
export class AppModule { }

优化Routing.ts的导入路径 #

import { RouterModule, Routes } from '@angular/router';
import { ModuleWithProviders } from '@angular/core'; // 修正导入路径，不需要嵌套到src/metadata
import { EmployeeCompoennt } from './Employee/Employee.Compoennt';
import { AppComponent } from './app.component';

export const AppRoutes: Routes = [
  { path: '', component: AppComponent },
  { path: 'calc', component: EmployeeCompoennt }
];

export const ROUTING: ModuleWithProviders = RouterModule.forRoot(AppRoutes);

补全Employee.ts的组件装饰器 #

你当前的EmployeeCompoennt缺少必要的组件装饰器配置，必须补充selector和模板相关配置：

import { Component } from '@angular/core'; // 别忘了导入Component装饰器

@Component({
  selector: 'app-employee', // 自定义组件选择器，后续可以在模板中用<app-employee></app-employee>调用
  template: '<h2>Employee Component Content</h2>', // 或者用templateUrl指向HTML文件
  styleUrls: ['./Employee.Compoennt.css'] // 可选，添加样式文件
})
export class EmployeeCompoennt {
  // 这里可以添加组件的属性和方法
}

3. 最后验证 #

修改完这些内容后，重启你的Angular项目（执行ng serve），那个“组件不属于任何模块”的错误就会消失了。

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