キャッチされていないエラー：モジュール 'AppModule'によってインポートされた予期せぬディレクティブ 'ProductsComponent'。 @NgModuleアノテーションを追加してください

Question

イム

http://localhost:4200

で私のサーバー上のメインルートにアクセスしようとしている完全なエラーメッセージは次のとおりです。このよう

http://localhost:4200/cart

として

Uncaught Error: Unexpected directive 'ProductsComponent' imported by the module 'AppModule'. Please add a @NgModule annotation. at syntaxError (compiler.es5.js:1690) at compiler.es5.js:15382 at Array.forEach() at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver.getNgModuleMetadata (compiler.es5.js:15365) at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._loadModules (compiler.es5.js:26795) at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAndComponents (compiler.es5.js:26768) at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAsync (compiler.es5.js:26697) at PlatformRef.webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_.bootstrapModuleWithZone (core.es5.js:4536) at PlatformRef.webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_.bootstrapModule (core.es5.js:4522) at Object.../../../../../src/main.ts (main.ts:11)

他のルータエンドポイント

も同じエラーを返します

ここで私はここに私のメインのファイルだ

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

あるアプリは、私の地元の開発に罰金始めているようです。

Answer 1

routingComponentsを削除してみます。私はそれが何かをしているのか、この問題を引き起こしているのか分かりません。

Answer 2

import only classes adorned by @NgModule decoratorです。だから、declarationsにimportsからroutingComponentを移動：

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