未捕获的错误：模块“AppModule”导入的意外指令“ProductsComponent”。请添加@NgModule 注释答案

【问题标题】：Uncaught Error: Unexpected directive 'ProductsComponent' imported by the module 'AppModule'. Please add a @NgModule annotation未捕获的错误：模块“AppModule”导入的意外指令“ProductsComponent”。请添加@NgModule 注释
【发布时间】：2018-01-31 05:43:51
【问题描述】：

我正在尝试访问我的服务器上的主路由

http://localhost:4200

完整的错误信息是：

未捕获的错误：意外指令“ProductsComponent”由模块“AppModule”。请添加 @NgModule 注释。在 syntaxError (compiler.es5.js:1690) 在 compiler.es5.js:15382 在 Array.forEach () 在 CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver.getNgModuleMetadata （编译器.es5.js:15365）在 JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._loadModules （编译器.es5.js:26795）在 JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAndComponents （编译器.es5.js:26768）在 JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAsync （编译器.es5.js:26697）在 PlatformRef.webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_.bootstrapModuleWithZone (core.es5.js:4536) 在 PlatformRef.webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_.bootstrapModule (core.es5.js:4522) 在对象.../../../../../src/main.ts (main.ts:11)

其他路由器端点，例如

http://localhost:4200/cart

同样报错

这是我的主文件

app.module.ts

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { Routes, RouterModule } from '@angular/router';

    import { AppComponent } from './app.component';
    import { ProductsComponent } from './products/products.component';
    import { CartComponent } from './cart/cart.component';
    import { MenuComponent } from './menu/menu.component';
    import { AppRoutingModule, routingComponents } from './app.routes';

    @NgModule({
      declarations: [
        AppComponent,
        ProductsComponent,
        CartComponent,
        MenuComponent
      ],
      imports: [
        BrowserModule,
        RouterModule,
        AppRoutingModule,
        routingComponents
      ],
      providers: [],
      bootstrap: [AppComponent,routingComponents]
    })
    export class AppModule { }

这是我的根文件

app.routes.ts

import { NgModule } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router';
import { ProductsComponent } from './products/products.component';
import { MenuComponent } from './menu/menu.component';
import { CartComponent } from './cart/cart.component';

const routes: Routes = [
   { path: '', pathMatch: 'full', redirectTo: 'Products' },
   { path: 'Products', component: ProductsComponent },
   { path: 'Menu', component: MenuComponent },
   { path: 'Cart', component: CartComponent },
 ];

 @NgModule({
   imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule],
 })
 export class AppRoutingModule { }

 export const routingComponents = [ProductsComponent, MenuComponent, CartComponent];

该应用程序似乎在我的本地开发中运行良好。

【问题讨论】：

标签： javascript angular

【解决方案1】：

您可以import only classes adorned by @NgModule decorator。所以将routingComponent从imports移动到declarations：

 @NgModule({
    declarations: [
      AppComponent,
      ProductsComponent,
      CartComponent,
      MenuComponent,
      routingComponents // add here
    ],
    imports: [
      BrowserModule,
      RouterModule,
      AppRoutingModule
    ],
    ...

【讨论】：

【解决方案2】：

尝试删除routingComponents。我看不出它在做什么，可能会导致这个问题。

【讨论】：