欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

AngularCLI模块调用报错分析(代码实例)

程序员文章站 2022-03-29 20:49:53
1、新增一个模块,代码如下: export const ROUTES: Routes = [ { path: '', compone...

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 ()
    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 ()
    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 

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 ()
    at eval (webpack-internal:///../../../compiler/esm5/compiler.js:33789)
    at Array.forEach ()
    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 ()
    at eval (webpack-internal:///../../../compiler/esm5/compiler.js:33789)
    at Array.forEach ()
    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 

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