本文介绍了未捕获的错误:模块'AppModule'导入了意外的指令'ProductsComponent'.请添加@NgModule批注的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

Im trying to access the main route on my server at

完整的错误消息是:

其他路由器端点,例如

也给出相同的错误

这是我的主文件

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

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

The app seems to be starting fine on my local development.

推荐答案

您可以仅导入由@NgModule装饰器修饰的类.因此,将routingComponentimports移到declarations:

You can import only classes adorned by @NgModule decorator. So move routingComponent from imports to declarations:

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

这篇关于未捕获的错误:模块'AppModule'导入了意外的指令'ProductsComponent'.请添加@NgModule批注的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

05-28 02:04
查看更多