[英]Type “LocationComponent” is part of the declarations of 2 modules:Angular 6?
我对angular完全陌生,因此无法使用其他堆栈流程答案解决错误。 请帮助。
我正在使用angular6。我已经有一种基本格式,因此我正在尝试添加子页面。 但是我得到了这个错误“ Type LocationComponent是2个模块的声明的一部分”,并停留了大约2天。
我的app.module.ts编码如下:
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { CommonModule, LocationStrategy, HashLocationStrategy } from '@angular/common';
import { NgModule, NgModuleFactory } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { Routes, RouterModule } from '@angular/router';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LocationComponent } from './masterpage/location/location.component';
import { StorageComponent } from './masterpage/storage/storage.component';
@NgModule({
declarations: [
AppComponent,
SpinnerComponent,
LocationComponent,
StorageComponent
],
imports: [
CommonModule,
BrowserModule,
BrowserAnimationsModule,
FormsModule,
HttpClientModule,
NgbModule.forRoot(),
AppRoutingModule,
],
providers: [
{
provide: PERFECT_SCROLLBAR_CONFIG,
useValue: DEFAULT_PERFECT_SCROLLBAR_CONFIG
},{
provide: LocationStrategy,
useClass: HashLocationStrategy
}],
bootstrap: [AppComponent]
})
export class AppModule { }
我的app-routing.module.ts如下:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
export const routes: Routes = [
{
path: '',
component: FullComponent,
children: [
{ path: '', redirectTo: '/masterpage/location', pathMatch: 'full' },
{ path: 'masterpage', loadChildren: './masterpage/masterpage.module#MasterPageModule' },
]
}];
@NgModule({
imports: [RouterModule.forRoot(routes), NgbModule.forRoot()],
exports: [RouterModule]
})
export class AppRoutingModule { }
我的masterpage.module.ts代码如下:
import { NgModule,Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { LocationComponent } from './location/location.component';
import { StorageComponent } from './storage/storage.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { MasterPageRoutes } from './masterpage.routing';
@NgModule({
imports: [
FormsModule,
CommonModule,
NgbModule,
RouterModule.forChild(MasterPageRoutes)
],
declarations: [
LocationComponent,
StorageComponent,
]
})
export class MasterPageModule { }
我的masterpage.routing.ts代码如下:
import { Routes } from '@angular/router';
import { LocationComponent } from './location/location.component';
import { StorageComponent } from './storage/storage.component';
export const MasterPageRoutes: Routes = [
{
path: '',
children: [
{
path: 'location',
component: LocationComponent,
data: {
title: 'Location',
urls: [{title: 'Location',url: '/location'},{title: 'Location'}]
}
}, {
path: 'storage',
component: StorageComponent,
data: {
title: 'Storage',
urls: [{title: 'Storage',url: '/storage'},{title: 'Storage'}]
}
}
]
}
];
我的样本先前使用url '/ localhost:4200 /#/ dashboard / dashboard1'运行 -这是样本。 我按照自己的要求将仪表板更改为“母版页”,并将其子级“ dashboard1”和“ dashboard2”分别更改为“ location”和“ storage”。 我希望子页面的位置和存储必须使用url '/ localhost:4200 /#/ masterpage / location'加载,但是它对我不起作用。 代码页中没有错误。 我在控制台中仅在检查元素下发现错误。
请帮我解决问题。.在此先感谢。
由于您已经在app.module.ts中声明了LocationComponent ,因此它已在整个应用范围内可用。 因此,无需在masterpage.module.ts中再次声明它。
从声明数组中删除masterpage.module.ts中的 LocationComponent ,并删除导入。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.