Here is my folder:
-app
-content
-footer
-header
-main-header
{other services - shortcut} <- I just shortcut this bec. it is too long.
main-header.component.html
main-header.component.scss
main-header.component.spec.ts
main-header.module.ts
main-header.routing.ts
app.component.html
etc..
main-header module
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MainHeaderComponent } from './main-header.component';
import { MainHeaderRouteModule } from './main-header.routing';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatCardModule } from '@angular/material/card';
import { MatSidenavModule } from '@angular/material/sidenav';
import { FormsModule } from '@angular/forms';
import { LayoutModule } from '@angular/cdk/layout';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatListModule } from '@angular/material/list';
@NgModule({
declarations: [
MainHeaderComponent
],
imports: [
MatCardModule,
MatCheckboxModule,
MatSidenavModule,
FormsModule,
LayoutModule,
MatToolbarModule,
MatButtonModule,
MatIconModule,
MatListModule,
MatCardModule,
MainHeaderRouteModule,
CommonModule
]
})
export class MainHeaderModule {}
main-header.routing
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { MainHeaderComponent } from './main-header.component';
const routes: Routes = [
{path: '', component: MainHeaderComponent}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class MainHeaderRouteModule {}
app module
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MainHeaderComponent } from './header/main-header/main-header.component';
@NgModule({
declarations: [
AppComponent,
MainHeaderComponent
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule
],
exports: [
MainHeaderComponent
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.routing.module
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{path: '', redirectTo: 'main-header', pathMatch: 'full'},
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
Since I am using a lazyloading route, it seems that the main-module doesn't recognize angular material:
'mat-sidenav-container' is not a known element: 1. If 'mat-sidenav-container' is an Angular component, then verify that it is part of this module. 2. If 'mat-sidenav-container' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]
我没有看到你在 app.module 的任何地方导入你的 MainHeaderModule
According to the comments for Lys's answer, you need to import MainHeaderModule in app.module.ts. Then you will get the error you mentioned
ERROR in Type MainHeaderComponent in D:/Angular/proj/src/app/header/main-header/main-header.component.ts is part of the declarations of 2 modules
The error is because, in both modules you have declared MainHeaderComponent. Remove MainHeaderComponent from app.module.ts. Since it's already declared in main header module. Importing main header module in app.module.ts will take care of MainHeaderComponent.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.