Javascript 未捕获错误：意外指令'；产品组件&x27；由模块导入'；AppModule'；。请添加@NgModule注释

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

完整的错误消息是：

未捕获错误：由导入的意外指令“ProductsComponent” 模块“AppModule”。请添加@NgModule注释。 在syntaxError（compiler.es5.js:1690） 在compiler.es5.js:15382 在Array.forEach（）处 在CompileMetadataResolver.webpackJsonp…/../compiler/@angular/compiler.es5.js.CompileMetadataResolver.getNgModuleMetadata （compiler.es5.js:15365） 在JitCompiler.webpackJsonp…/../compiler/@angular/compiler.es5.js.JitCompiler.\u loadModules （compiler.es5.js:26795） 在JitCompiler.webpackJsonp…/../compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAndComponents （compiler.es5.js:26768） 在JitCompiler.webpackJsonp…/../compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAsync （compiler.es5.js:26697） 在PlatformRef.webpackJsonp…/../../core/@angular/core.es5.js.PlatformRef_uu.bootstrapModuleWithZone （core.es5.js:4536） 在PlatformRef.webpackJsonp…/../../core/@angular/core.es5.js.PlatformRef_u.bootstrapModule （core.es5.js:4522） at Object…/../../../../../src/main.ts（main.ts:11）

其他路由器端点，例如

也给出同样的错误

这是我的主要文件

app.module.ts

这是我的根文件

app.routes.ts

---

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

尝试移除

布线组件

。我看不出这有什么作用，可能是造成这个问题的原因。

你可以。因此，将

路由组件

从

导入

移动到

声明

：

@NgModule({
声明：[
应用组件，
产品组件，
CartComponent，
MenuComponent，
routingComponents//在此处添加
],
进口：[
浏览器模块，
路由模块，
批准模块
],
...

    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 { }

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];