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

1、新增一个模块，代码如下：

export@H_403_5@ const@H_403_5@ ROUTES@H_403_5@: Routes = [
  {
    path@H_403_5@: ''@H_403_5@,component@H_403_5@: ArticleComponent,}
];

@NgModule@H_403_5@({
  imports@H_403_5@: [
    CommonModule,RouterModule.forChild(ROUTES)
  ],declarations@H_403_5@: [
    ArticleComponent,]
})
export@H_403_5@ class@H_403_5@ AdminModule@H_403_5@ { }@H_403_5@

报错为：

ERROR Error: Uncaught (in@H_403_5@ promise): Error: Type ArticleComponent is part of@H_403_5@ the@H_403_5@ declarations of@H_403_5@ 2@H_403_5@ modules: AppModule and@H_403_5@ AdminModule! Please consider moving ArticleComponent to@H_403_5@ a@H_403_5@ higher module that imports AppModule and@H_403_5@ AdminModule. You can also create@H_403_5@ a@H_403_5@ new@H_403_5@ NgModule that exports and@H_403_5@ includes ArticleComponent then@H_403_5@ import that NgModule in@H_403_5@ AppModule and@H_403_5@ AdminModule.
Error: Type ArticleComponent is part of@H_403_5@ the@H_403_5@ declarations of@H_403_5@ 2@H_403_5@ modules: AppModule and@H_403_5@ AdminModule! Please consider moving ArticleComponent to@H_403_5@ a@H_403_5@ higher module that imports AppModule and@H_403_5@ AdminModule. You can also create@H_403_5@ a@H_403_5@ new@H_403_5@ NgModule that exports and@H_403_5@ includes ArticleComponent then@H_403_5@ import that NgModule in@H_403_5@ AppModule and@H_403_5@ AdminModule.
    at@H_403_5@ SyntaxError (compiler.js:466@H_403_5@)
    at@H_403_5@ CompileMetadataResolver._add@H_403_5@TypeToModule (compiler.js:15255@H_403_5@)
    at@H_403_5@ eval (compiler.js:15127@H_403_5@)
    at@H_403_5@ Array.forEach (<anonymous>)
    at@H_403_5@ CompileMetadataResolver.getNgModuleMetadata (compiler.js:15118@H_403_5@)
    at@H_403_5@ JitCompiler._load@H_403_5@Modules (compiler.js:33486@H_403_5@)
    at@H_403_5@ JitCompiler._compile@H_403_5@ModuleAndComponents (compiler.js:33447@H_403_5@)
    at@H_403_5@ JitCompiler.compileModuleAsync (compiler.js:33363@H_403_5@)
    at@H_403_5@ CompilerImpl.compileModuleAsync (platform@H_403_5@-browser-dynamic.js:230@H_403_5@)
    at@H_403_5@ eval (core.js:6441@H_403_5@)
    at@H_403_5@ SyntaxError (compiler.js:466@H_403_5@)
    at@H_403_5@ CompileMetadataResolver._add@H_403_5@TypeToModule (compiler.js:15255@H_403_5@)
    at@H_403_5@ eval (compiler.js:15127@H_403_5@)
    at@H_403_5@ Array.forEach (<anonymous>)
    at@H_403_5@ CompileMetadataResolver.getNgModuleMetadata (compiler.js:15118@H_403_5@)
    at@H_403_5@ JitCompiler._load@H_403_5@Modules (compiler.js:33486@H_403_5@)
    at@H_403_5@ JitCompiler._compile@H_403_5@ModuleAndComponents (compiler.js:33447@H_403_5@)
    at@H_403_5@ JitCompiler.compileModuleAsync (compiler.js:33363@H_403_5@)
    at@H_403_5@ CompilerImpl.compileModuleAsync (platform@H_403_5@-browser-dynamic.js:230@H_403_5@)
    at@H_403_5@ eval (core.js:6441@H_403_5@)
    at@H_403_5@ resolvePromise (zone.js:824@H_403_5@)
    at@H_403_5@ resolvePromise (zone.js:795@H_403_5@)
    at@H_403_5@ eval (zone.js:873@H_403_5@)
    at@H_403_5@ ZoneDelegate.invokeTask (zone.js:425@H_403_5@)
    at@H_403_5@ Object.onInvokeTask (core.js:4620@H_403_5@)
    at@H_403_5@ ZoneDelegate.invokeTask (zone.js:424@H_403_5@)
    at@H_403_5@ Zone.runTask (zone.js:192@H_403_5@)
    at@H_403_5@ drainMicroTaskQueue (zone.js:602@H_403_5@)
    at@H_403_5@ <anonymous>

2、新增的模块代码修改如下，还是报错：

Error: Uncaught (in@H_403_5@ promise): Error: Component ArticleComponent is not@H_403_5@ part of@H_403_5@ any@H_403_5@ NgModule or@H_403_5@ the@H_403_5@ module has not@H_403_5@ been imported into@H_403_5@ your module.
Error: Component ArticleComponent is not@H_403_5@ part of@H_403_5@ any@H_403_5@ NgModule or@H_403_5@ the@H_403_5@ module has not@H_403_5@ been imported into@H_403_5@ your module.
    at@H_403_5@ JitCompiler._create@H_403_5@CompiledHostTemplate (webpack-internal:///../../../compiler/esm5/compiler.js:33839)@H_403_5@
    at@H_403_5@ eval (webpack-internal:///../../../compiler/esm5/compiler.js:33792)@H_403_5@
    at@H_403_5@ Array.forEach (<anonymous>)
    at@H_403_5@ eval (webpack-internal:///../../../compiler/esm5/compiler.js:33789)@H_403_5@
    at@H_403_5@ Array.forEach (<anonymous>)
    at@H_403_5@ JitCompiler._compile@H_403_5@Components (webpack-internal:///../../../compiler/esm5/compiler.js:33778)@H_403_5@
    at@H_403_5@ eval (webpack-internal:///../../../compiler/esm5/compiler.js:33666)@H_403_5@
    at@H_403_5@ Object.then@H_403_5@ (webpack-internal:///../../../compiler/esm5/compiler.js:673)@H_403_5@
    at@H_403_5@ JitCompiler._compile@H_403_5@ModuleAndComponents (webpack-internal:///../../../compiler/esm5/compiler.js:33665)@H_403_5@
    at@H_403_5@ JitCompiler.compileModuleAsync (webpack-internal:///../../../compiler/esm5/compiler.js:33581)@H_403_5@
    at@H_403_5@ JitCompiler._create@H_403_5@CompiledHostTemplate (webpack-internal:///../../../compiler/esm5/compiler.js:33839)@H_403_5@
    at@H_403_5@ eval (webpack-internal:///../../../compiler/esm5/compiler.js:33792)@H_403_5@
    at@H_403_5@ Array.forEach (<anonymous>)
    at@H_403_5@ eval (webpack-internal:///../../../compiler/esm5/compiler.js:33789)@H_403_5@
    at@H_403_5@ Array.forEach (<anonymous>)
    at@H_403_5@ JitCompiler._compile@H_403_5@Components (webpack-internal:///../../../compiler/esm5/compiler.js:33778)@H_403_5@
    at@H_403_5@ eval (webpack-internal:///../../../compiler/esm5/compiler.js:33666)@H_403_5@
    at@H_403_5@ Object.then@H_403_5@ (webpack-internal:///../../../compiler/esm5/compiler.js:673)@H_403_5@
    at@H_403_5@ JitCompiler._compile@H_403_5@ModuleAndComponents (webpack-internal:///../../../compiler/esm5/compiler.js:33665)@H_403_5@
    at@H_403_5@ JitCompiler.compileModuleAsync (webpack-internal:///../../../compiler/esm5/compiler.js:33581)@H_403_5@
    at@H_403_5@ resolvePromise (webpack-internal:///../../../../zone.js/dist/zone.js:824)@H_403_5@
    at@H_403_5@ resolvePromise (webpack-internal:///../../../../zone.js/dist/zone.js:795)@H_403_5@
    at@H_403_5@ eval (webpack-internal:///../../../../zone.js/dist/zone.js:873)@H_403_5@
    at@H_403_5@ ZoneDelegate.invokeTask (webpack-internal:///../../../../zone.js/dist/zone.js:425)@H_403_5@
    at@H_403_5@ Object.onInvokeTask (webpack-internal:///../../../core/esm5/core.js:4815)@H_403_5@
    at@H_403_5@ ZoneDelegate.invokeTask (webpack-internal:///../../../../zone.js/dist/zone.js:424)@H_403_5@
    at@H_403_5@ Zone.runTask (webpack-internal:///../../../../zone.js/dist/zone.js:192)@H_403_5@
    at@H_403_5@ drainMicroTaskQueue (webpack-internal:///../../../../zone.js/dist/zone.js:602)@H_403_5@
    at@H_403_5@ <anonymous>

3、正确的写法是，新增一个组件，且这个组件不在appmodule中声明，错误分析和总结白天在弄。

import@H_403_5@ { NgModule } from '@angular/core'@H_403_5@;
import@H_403_5@ { CommonModule } from '@angular/common'@H_403_5@;
import@H_403_5@ {ArticleComponent} from "../article/article.component"@H_403_5@;
import@H_403_5@ {RouterModule,Routes} from "@angular/router"@H_403_5@;
import@H_403_5@ {TestComponent} from "../test/test.component"@H_403_5@;

export@H_403_5@ const@H_403_5@ ROUTES@H_403_5@: Routes = [
  {
    path@H_403_5@: ''@H_403_5@,component@H_403_5@: TestComponent,declarations@H_403_5@: [
    TestComponent
  ]
})
export@H_403_5@ class@H_403_5@ AdminModule@H_403_5@ { }@H_403_5@

原文链接：https://www.f2er.com/angularjs/145567.html

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

猜你在找的Angularjs相关文章