angular的延迟加载是两个模块声明的一部分:AppModule和ProductModule

angular的延迟加载是两个模块声明的一部分:AppModule和ProductModule,angular,lazy-loading,Angular,Lazy Loading,angular的延迟加载是两个模块声明的一部分:AppModule和ProductModule! 我说的每一个指南和仍然存在的问题我必须帮助你的职业如何思考它 我共享一个代码- import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; const routes: Routes = [ { path: 'product', loadChildren: ()

angular的延迟加载是两个模块声明的一部分: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 { }

整个问题

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)
如果需要更多的信息,我很高兴添加,但我必须你的帮助,非常感谢

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 { }
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,
  ],
  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 { }

您在appmodule和productmodule的声明中有登录组件?我编辑我的问题您可以共享您的appmodule吗?将产品模块的路由配置中的组件从appmodule的声明移动到productmodule的声明我添加了我所有的配置,您想让我的git链接看到吗?当我删除我的声明时:[],我有一个问题“core.js:6014 ERROR ERROR:Uncaught(承诺中):ERROR:Component HomeComponent不是任何NgModule的一部分,或者模块没有导入到您的模块中。ERROR:Component HomeComponent不是任何NgModule的一部分,或者模块没有导入到您的模块中。”我们讨论的是logincomponent,不是HomeComponent我知道当我删除声明时会发生什么为什么只有navbar?很难回答的问题,没有任何效果,但我创建了一个新项目,并复制了我上一个项目的所有想法,它像我一样工作,我只想知道区别是什么,以及我是否需要像上面那样进行更改^
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 { }