angular 的延迟加载是 2 个模块声明的一部分：AppModule 和 ProductModule！ 我说每一个指南，仍然有问题，我必须你的专业帮助如何思考它。
我分享一个代码 -
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{ path: 'product', loadChildren: () => import('./product/product.module').then(m => m.ProductModule) },
{ path: '**', redirectTo: 'product/home', pathMatch: 'full' }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from 'src/app/home/home.component';
import { FavoriteComponent } from 'src/app/favorite/favorite.component';
import { AccountComponent } from 'src/app/account/account.component';
import { LoginComponent } from 'src/app/login/login.component';
import { RegisterComponent } from 'src/app/register/register.component';
import { InfoComponent } from 'src/app/info/info.component';
import { guards } from 'src/app/store/guards';
const routes: Routes = [
{ path: 'home', component: HomeComponent, canActivate: guards },
{ path: 'favorite', component: FavoriteComponent, canActivate: guards },
{ path: 'account', component: AccountComponent, canActivate: guards },
{ path: 'login', component: LoginComponent },
{ path: 'register', component: RegisterComponent },
{ path: 'info', component: InfoComponent }
]
@NgModule({
declarations: [],
imports: [
CommonModule,
RouterModule.forChild(routes),
]
})
export class ProductModule { }
整个问题
core.js:6014 ERROR Error: Uncaught (in promise): Error: Component HomeComponent is not part of any NgModule or the module has not been imported into your module.
Error: Component HomeComponent is not part of any NgModule or the module has not been imported into your module.
at JitCompiler._createCompiledHostTemplate (compiler.js:25915)
at compiler.js:25891
at Array.forEach (<anonymous>)
at compiler.js:25888
at Array.forEach (<anonymous>)
at JitCompiler._compileComponents (compiler.js:25877)
at compiler.js:25808
at Object.then (compiler.js:2166)
at JitCompiler._compileModuleAndComponents (compiler.js:25807)
at JitCompiler.compileModuleAsync (compiler.js:25769)
at resolvePromise (zone-evergreen.js:797)
at resolvePromise (zone-evergreen.js:754)
at zone-evergreen.js:858
at ZoneDelegate.invokeTask (zone-evergreen.js:391)
at Object.onInvokeTask (core.js:39680)
at ZoneDelegate.invokeTask (zone-evergreen.js:390)
at Zone.runTask (zone-evergreen.js:168)
at drainMicroTaskQueue (zone-evergreen.js:559)
AppModule 按照我的要求，希望它能帮助您找到我的问题
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './shared/modules/app-routing.module';
import { BrowserModule } from '@angular/platform-browser';
import { environment } from 'src/environments/environment';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { StoreModule } from '@ngrx/store';
import { EffectsModule } from '@ngrx/effects';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { RouterStateSerializer, StoreRouterConnectingModule, RouterState } from '@ngrx/router-store';
import { reducer, CustomSerializer } from './storeRouter';
import { reducers, effects } from './store';
import { AppComponent } from './app.component';
import { NavbarComponent } from './navbar/navbar.component';
import { HomeComponent } from './home/home.component';
import { FavoriteComponent } from './favorite/favorite.component';
import { InfoComponent } from './info/info.component';
import { AccountComponent } from './account/account.component';
import { LoginComponent } from './login/login.component';
import { RegisterComponent } from './register/register.component';
@NgModule({
declarations: [
AppComponent,
NavbarComponent,
HomeComponent,
FavoriteComponent,
InfoComponent,
AccountComponent,
LoginComponent,
RegisterComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
HttpClientModule,
StoreRouterConnectingModule.forRoot({
routerState: RouterState.Minimal,
}),
EffectsModule.forRoot(effects),
StoreModule.forRoot(reducer, {
runtimeChecks: {
strictStateImmutability: false,
strictActionImmutability: false,
strictStateSerializability: false,
strictActionSerializability: false,
},
}),
StoreModule.forFeature('products', reducers),
// Only a tool for developers will delete on products
StoreDevtoolsModule.instrument({
maxAge: 25,
logOnly: environment.production,
}),
],
providers: [{ provide: RouterStateSerializer, useClass: CustomSerializer }],
bootstrap: [AppComponent]
})
export class AppModule { }
如果需要更多信息，我很高兴添加，但我必须得到您的帮助，非常感谢！！
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from 'src/app/home/home.component';
import { FavoriteComponent } from 'src/app/favorite/favorite.component';
import { AccountComponent } from 'src/app/account/account.component';
import { LoginComponent } from 'src/app/login/login.component';
import { RegisterComponent } from 'src/app/register/register.component';
import { InfoComponent } from 'src/app/info/info.component';
import { guards } from 'src/app/store/guards';
const routes: Routes = [
{ path: 'home', component: HomeComponent, canActivate: guards },
{ path: 'favorite', component: FavoriteComponent, canActivate: guards },
{ path: 'account', component: AccountComponent, canActivate: guards },
{ path: 'login', component: LoginComponent },
{ path: 'register', component: RegisterComponent },
{ path: 'info', component: InfoComponent }
]
@NgModule({
declarations: [
HomeComponent,
FavoriteComponent,
AccountComponent,
LoginComponent,
RegisterComponent
InfoComponent
],
imports: [
CommonModule,
RouterModule.forChild(routes),
]
})
export class ProductModule { }
应用模块
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './shared/modules/app-routing.module';
import { BrowserModule } from '@angular/platform-browser';
import { environment } from 'src/environments/environment';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { StoreModule } from '@ngrx/store';
import { EffectsModule } from '@ngrx/effects';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { RouterStateSerializer, StoreRouterConnectingModule, RouterState } from '@ngrx/router-store';
import { reducer, CustomSerializer } from './storeRouter';
import { reducers, effects } from './store';
import { AppComponent } from './app.component';
import { NavbarComponent } from './navbar/navbar.component';
import { HomeComponent } from './home/home.component';
import { FavoriteComponent } from './favorite/favorite.component';
import { InfoComponent } from './info/info.component';
import { AccountComponent } from './account/account.component';
import { LoginComponent } from './login/login.component';
import { RegisterComponent } from './register/register.component';
@NgModule({
declarations: [
AppComponent,
NavbarComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
HttpClientModule,
StoreRouterConnectingModule.forRoot({
routerState: RouterState.Minimal,
}),
EffectsModule.forRoot(effects),
StoreModule.forRoot(reducer, {
runtimeChecks: {
strictStateImmutability: false,
strictActionImmutability: false,
strictStateSerializability: false,
strictActionSerializability: false,
},
}),
StoreModule.forFeature('products', reducers),
// Only a tool for developers will delete on products
StoreDevtoolsModule.instrument({
maxAge: 25,
logOnly: environment.production,
}),
],
providers: [{ provide: RouterStateSerializer, useClass: CustomSerializer }],
bootstrap: [AppComponent]
})
export class AppModule { }