Angular CLI 模組呼叫報錯分析【草稿】
阿新 • • 發佈:2019-02-13
1、新增一個模組,程式碼如下:
export const ROUTES: Routes = [
{
path: '',
component: ArticleComponent,
}
];
@NgModule({
imports: [
CommonModule,
RouterModule.forChild(ROUTES)
],
declarations: [
ArticleComponent,
]
})
export class AdminModule { }
報錯為:
ERROR Error: Uncaught (in promise): Error: Type ArticleComponent is part of the declarations of 2 modules: AppModule and AdminModule! Please consider moving ArticleComponent to a higher module that imports AppModule and AdminModule. You can also create a new NgModule that exports and includes ArticleComponent then import that NgModule in AppModule and AdminModule.
Error: Type ArticleComponent is part of the declarations of 2 modules: AppModule and AdminModule! Please consider moving ArticleComponent to a higher module that imports AppModule and AdminModule. You can also create a new NgModule that exports and includes ArticleComponent then import that NgModule in AppModule and AdminModule.
at syntaxError (compiler.js:466)
at CompileMetadataResolver._addTypeToModule (compiler.js:15255)
at eval (compiler.js:15127)
at Array.forEach (<anonymous>)
at CompileMetadataResolver.getNgModuleMetadata (compiler.js:15118)
at JitCompiler._loadModules (compiler.js:33486)
at JitCompiler._compileModuleAndComponents (compiler.js:33447)
at JitCompiler.compileModuleAsync (compiler.js:33363)
at CompilerImpl.compileModuleAsync (platform-browser-dynamic.js:230)
at eval (core.js:6441)
at syntaxError (compiler.js:466)
at CompileMetadataResolver._addTypeToModule (compiler.js:15255)
at eval (compiler.js:15127)
at Array.forEach (<anonymous>)
at CompileMetadataResolver.getNgModuleMetadata (compiler.js:15118)
at JitCompiler._loadModules (compiler.js:33486)
at JitCompiler._compileModuleAndComponents (compiler.js:33447)
at JitCompiler.compileModuleAsync (compiler.js:33363)
at CompilerImpl.compileModuleAsync (platform-browser-dynamic.js:230)
at eval (core.js:6441)
at resolvePromise (zone.js:824)
at resolvePromise (zone.js:795)
at eval (zone.js:873)
at ZoneDelegate.invokeTask (zone.js:425)
at Object.onInvokeTask (core.js:4620)
at ZoneDelegate.invokeTask (zone.js:424)
at Zone.runTask (zone.js:192)
at drainMicroTaskQueue (zone.js:602)
at <anonymous>
2、新增的模組程式碼修改如下,還是報錯:
Error: Uncaught (in promise): Error: Component ArticleComponent is not part of any NgModule or the module has not been imported into your module.
Error: Component ArticleComponent is not part of any NgModule or the module has not been imported into your module.
at JitCompiler._createCompiledHostTemplate (webpack-internal:///../../../compiler/esm5/compiler.js:33839)
at eval (webpack-internal:///../../../compiler/esm5/compiler.js:33792)
at Array.forEach (<anonymous>)
at eval (webpack-internal:///../../../compiler/esm5/compiler.js:33789)
at Array.forEach (<anonymous>)
at JitCompiler._compileComponents (webpack-internal:///../../../compiler/esm5/compiler.js:33778)
at eval (webpack-internal:///../../../compiler/esm5/compiler.js:33666)
at Object.then (webpack-internal:///../../../compiler/esm5/compiler.js:673)
at JitCompiler._compileModuleAndComponents (webpack-internal:///../../../compiler/esm5/compiler.js:33665)
at JitCompiler.compileModuleAsync (webpack-internal:///../../../compiler/esm5/compiler.js:33581)
at JitCompiler._createCompiledHostTemplate (webpack-internal:///../../../compiler/esm5/compiler.js:33839)
at eval (webpack-internal:///../../../compiler/esm5/compiler.js:33792)
at Array.forEach (<anonymous>)
at eval (webpack-internal:///../../../compiler/esm5/compiler.js:33789)
at Array.forEach (<anonymous>)
at JitCompiler._compileComponents (webpack-internal:///../../../compiler/esm5/compiler.js:33778)
at eval (webpack-internal:///../../../compiler/esm5/compiler.js:33666)
at Object.then (webpack-internal:///../../../compiler/esm5/compiler.js:673)
at JitCompiler._compileModuleAndComponents (webpack-internal:///../../../compiler/esm5/compiler.js:33665)
at JitCompiler.compileModuleAsync (webpack-internal:///../../../compiler/esm5/compiler.js:33581)
at resolvePromise (webpack-internal:///../../../../zone.js/dist/zone.js:824)
at resolvePromise (webpack-internal:///../../../../zone.js/dist/zone.js:795)
at eval (webpack-internal:///../../../../zone.js/dist/zone.js:873)
at ZoneDelegate.invokeTask (webpack-internal:///../../../../zone.js/dist/zone.js:425)
at Object.onInvokeTask (webpack-internal:///../../../core/esm5/core.js:4815)
at ZoneDelegate.invokeTask (webpack-internal:///../../../../zone.js/dist/zone.js:424)
at Zone.runTask (webpack-internal:///../../../../zone.js/dist/zone.js:192)
at drainMicroTaskQueue (webpack-internal:///../../../../zone.js/dist/zone.js:602)
at <anonymous>
3、正確的寫法是,新增一個元件,且這個元件不在appmodule中宣告,錯誤分析和總結白天在弄。
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {ArticleComponent} from "../article/article.component";
import {RouterModule, Routes} from "@angular/router";
import {TestComponent} from "../test/test.component";
export const ROUTES: Routes = [
{
path: '',
component: TestComponent,
}
];
@NgModule({
imports: [
CommonModule,
RouterModule.forChild(ROUTES)
],
declarations: [
TestComponent
]
})
export class AdminModule { }