Angular CLI 模块调用报错分析【草稿】

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 { }