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 { }
上一篇: mybatis两个内置参数
下一篇: CSS选择器之属性选择器介绍