时间戳

首页 > 解决方案 > 我尝试在我的角度网站中进行惰性模式

angular - 我尝试在我的角度网站中进行惰性模式

问题描述

我尝试在我的角度网站中执行惰性模式，这看起来有些错误，我无缘无故地做了角度网站显示https://angular.io/guide/lazy-loading-ngmodules

为什么我的应用程序不再工作了？我不知道该怎么办了，我的文件请等待您的帮助。

产品.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { HomeComponent } from '../../home/home.component';
import { InfoComponent } from '../../info/info.component';
import { ProductRoutingModule } from './module.module';

@NgModule({
  declarations: [HomeComponent, InfoComponent],
  imports: [
    CommonModule,
    ProductRoutingModule,
  ],
  exports: [RouterModule]
})
export class ProductModule { }

模块.module.ts

import { NgModule, Component } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from '../../home/home.component';
import { InfoComponent } from '../../info/info.component';


const routes: Routes = [
    { path: 'home', component: HomeComponent },
    { path: 'info', component: InfoComponent }
];


@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class ProductRoutingModule { }

应用程序路由.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { guards } from '../../store/guards';
import { HomeComponent } from '../../home/home.component';

const routes: Routes = [

  { path: '', component: HomeComponent, canActivate: guards },
  { path: 'product', loadChildren: () => import('./product.module').then(m => m.ProductModule) },
  { path: '**', redirectTo: 'product/home', pathMatch: 'full' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

我正在尝试访问'product/info'

app.module.ts

import { AppRoutingModule } from './shared/modules/app-routing.module';

  imports: [
    AppRoutingModule,


The bug is

core.js:6014 错误错误：未捕获（承诺）：错误：HomeComponent 类型是 2 个模块声明的一部分：AppModule 和 ProductModule！请考虑将 HomeComponent 移至导入 AppModule 和 ProductModule 的更高模块。您还可以创建一个新的 NgModule，它导出并包含 HomeComponent，然后将该 NgModule 导入 AppModule 和 ProductModule。错误：HomeComponent 类型是 2 个模块声明的一部分：AppModule 和 ProductModule！请考虑将 HomeComponent 移至导入 AppModule 和 ProductModule 的更高模块。您还可以创建一个新的 NgModule，它导出并包含 HomeComponent，然后将该 NgModule 导入 AppModule 和 ProductModule。


Please help me I am try to do it two days

标签： angularlazy-loading

解决方案

再会！

我可以看到两种解决方案：

  1. 创建模块，例如 HomeModule，它declarations在部分和部分中有 HomeComponent exports：
@NgModule({
  declarations: [HomeComponent],
  imports: [CommonModule],
  exports: [HomeComponent]
})
export class HomeModule {}

之后，您应该在两个模块中都导入这个模块（例如，导入您的 AppModule 和您的延迟加载模块）。

  1. 重做您的 ProductRoutingModule 并直接限制另一个 HomeComponent （您的索引路由）而不是重复：
const routes: Routes = [
    { path: 'home', redirectTo: '/' },
    { path: 'info', component: InfoComponent }
];


@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class ProductRoutingModule { }

推荐阅读