未捕获的错误:模块'AppModule'导入了意外的指令'ProductsComponent'.请添加@NgModule批注 [英] Uncaught Error: Unexpected directive 'ProductsComponent' imported by the module 'AppModule'. Please add a @NgModule annotation
问题描述
我正在尝试访问服务器上的主路由
Im trying to access the main route on my server at
完整的错误消息是:
未捕获的错误:由导入的意外指令'ProductsComponent' 模块"AppModule".请添加一个@NgModule批注. 语法错误(compiler.es5.js:1690) 在compile.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._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 _. bootstrapModuleWithZone (core.es5.js:4536) 在PlatformRef .webpackJsonp .../../../core/@angular/core.es5.js.PlatformRef_.bootstrapModule (core.es5.js:4522) 在对象.../../../../../src/main.ts(main.ts:11)
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
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
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];
该应用似乎在我的本地开发中运行良好.
The app seems to be starting fine on my local development.
推荐答案
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批注的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!