首页 文章

未捕获错误：模块'AppModule'导入的意外指令'ProductsComponent' . 请添加@NgModule注释

提问于
浏览 次
1

我试图访问我的服务器上的主要路线

http：// localhost：4200

完整的错误消息是：

未捕获错误：模块'AppModule'导入的意外指令'ProductsComponent' . 请添加@NgModule注释 . at syntaxError（compiler.es5.js：1690）at compiler.es5.js：15382 at Array.forEach（）at CompileMetadataResolver.webpackJsonp ... / .. / .. / compiler/@angular/compiler.es5.js . CompitMetadataResolver.getNgModuleMetadata（compiler.es5.js：15365）位于JitCompiler.webpackJsonp ... / .. / .. / compiler/@angular/compiler.es5.js.JitCompiler.loadModules（compiler.es5.js：26795）at at JitCompiler.webpackJsonp中的JitCompiler.webpackJsonp ... / .. / .. / compiler / @ angular/compiler.es5.js.JitCompiler.compileModuleAndComponents（compiler.es5.js：26768）... / .. / .. / platformRef.webpackJsonp中的compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAsync（compiler.es5.js：26697）... / .. / .. / core/@angular/core.es5.js.PlatformRef . bootstrapModuleWithZone（core.es5.js：4536）位于Object的PlatformRef.webpackJsonp ... / .. / .. / core/@angular/core.es5.js.PlatformRef_.bootstrapModule（core.es5.js：4522） . ../../../../../src/main.ts(main.ts:11）

其他路由器 endpoints 如

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

2 回答

  • 0

    你可以import only classes adorned by @NgModule decorator . 所以将 routingComponent 从 imports 移到 declarations ：

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

    尝试删除 routingComponents . 我没有看到它正在做任何事情，可能会导致这个问题 .

    回复于

相关问题