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 { }
来源: https://www.2cto.com/kf/201711/701909.html