Angular 添加懒散负载-';垫图标';不是已知元素
我有现有的应用程序,现在我想添加延迟加载 我的应用程序结构是这样的Angular 添加懒散负载-';垫图标';不是已知元素,angular,lazy-loading,Angular,Lazy Loading,我有现有的应用程序,现在我想添加延迟加载 我的应用程序结构是这样的 app core | |-shared.module.ts | |-core.module.ts | |--home | | | |-home.component.ts | |-home.component.html | |-home.component.css | |--users | | | |-users.component.ts |
app
core
| |-shared.module.ts
| |-core.module.ts
|
|--home
| |
| |-home.component.ts
| |-home.component.html
| |-home.component.css
|
|--users
| |
| |-users.component.ts
| |-users.component.html
| |-users.component.css
|
app.component.ts
app.component.html
app.component.css
app.module.ts
app-routing.module.ts
import { BrowserModule } from "@angular/platform-browser";
import { NgModule, ModuleWithProviders } from "@angular/core";
import { CoreModule } from "../../../core/core-module";
import { SharedModule } from "../../../core/shared.app.module.dependency";
// views
import { AppComponent } from "./app.component";
import { AppRoutingModule } from "./app-routing.module";
import { RouterModule } from "@angular/router";
import { HomeModule } from "./home/home.module";
import { UsersModule } from "./users/users.module";
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
RouterModule,
AppRoutingModule,
SharedModule,
CoreModule,
HomeModule,
UsersModule
providers: [],
bootstrap: [AppComponent]
})
export class AdminModule {}
现在,我在每个组件中添加了home.module.ts和home routing.module.ts
和users.module.ts和home routing.module.ts
同样从我的app.module
中,我将所有导入移动到shared.module
和core.module
现在,在我的应用程序中,模块
如下所示
app
core
| |-shared.module.ts
| |-core.module.ts
|
|--home
| |
| |-home.component.ts
| |-home.component.html
| |-home.component.css
|
|--users
| |
| |-users.component.ts
| |-users.component.html
| |-users.component.css
|
app.component.ts
app.component.html
app.component.css
app.module.ts
app-routing.module.ts
import { BrowserModule } from "@angular/platform-browser";
import { NgModule, ModuleWithProviders } from "@angular/core";
import { CoreModule } from "../../../core/core-module";
import { SharedModule } from "../../../core/shared.app.module.dependency";
// views
import { AppComponent } from "./app.component";
import { AppRoutingModule } from "./app-routing.module";
import { RouterModule } from "@angular/router";
import { HomeModule } from "./home/home.module";
import { UsersModule } from "./users/users.module";
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
RouterModule,
AppRoutingModule,
SharedModule,
CoreModule,
HomeModule,
UsersModule
providers: [],
bootstrap: [AppComponent]
})
export class AdminModule {}
在core.module
中,我设置了这个
import { NgModule, ModuleWithProviders, APP_INITIALIZER } from
"@angular/core";
import { CommonModule } from "@angular/common";
import { HttpClientModule, HttpClient, HTTP_INTERCEPTORS } from
"@angular/common/http";
import { ReactiveFormsModule, FormsModule } from "@angular/forms";
import { BrowserAnimationsModule } from "@angular/platform-
browser/animations";
import { BrowserModule } from "@angular/platform-browser";
@NgModule({
imports: [CommonModule, BrowserModule, BrowserAnimationsModule,
HttpClientModule, FormsModule, ReactiveFormsModule, KeycloakAngularModule],
declarations: [],
exports: [BrowserModule]
})
export class CoreModule {}
在shared.module
中,我将我需要的所有内容导入到我的应用程序中,比如角度材质(我将其设置为导入和导出)以及CommonModule、FormsModule、ReactiveFormsModule等
现在,在我的“home.module”中,我导入了一个共享模块和组件
import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { HomeComponent } from "./home.component";
import { SharedModule } from "projects/core/shared.app.module.dependency";
import { RouterModule } from "@angular/router";
import { HomeRoutingModule } from "./home-routing.module";
@NgModule({
declarations: [HomeComponent],
imports: [CommonModule, RouterModule, HomeRoutingModule, SharedModule]
})
export class HomeModule {}
但我总是在控制台中出错
在共享模块中,我导入所有材质依赖项。在此之前,一切正常
A11yModule,
CdkStepperModule,
CdkTableModule,
CdkTreeModule,
DragDropModule,
MatAutocompleteModule,
MatBadgeModule,
MatBottomSheetModule,
MatButtonModule,
MatButtonToggleModule,
MatCardModule,
MatCheckboxModule,
MatChipsModule,
MatStepperModule,
MatDatepickerModule,
MatDialogModule,
MatDividerModule,
MatExpansionModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatListModule,
MatMenuModule,
MatNativeDateModule,
MatPaginatorModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatRadioModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatSliderModule,
MatSlideToggleModule,
MatSnackBarModule,
MatSortModule,
MatTableModule,
MatTabsModule,
MatToolbarModule,
MatTooltipModule,
MatTreeModule,
PortalModule,
ScrollingModule
你是否在你的
应用程序模块中导入了你的共享模块
?你是否在共享模块中导出了:[MatIconModule]
?@YashRami是的我导入了所有内容,你可以在我的帖子中看到我在question@KrishnaRathore是的,我导出所有mat模块MATIComponent呢?它被很好地导出,或者它的选择器可能是错误的!你是否在你的应用程序模块中导入了你的共享模块
?你是否在共享模块中导出了:[MatIconModule]
?@YashRami是的我导入了所有内容,你可以在我的帖子中看到我在question@KrishnaRathore是的,我导出所有mat模块MATIComponent呢?它被很好地导出,或者它的选择器可能是错误的!