时间戳

首页 > 解决方案 > Angular - 渲染组件存在于根 url 上的另一个模块中

angular - Angular - 渲染组件存在于根 url 上的另一个模块中

问题描述

我有Angular 8申请。我已将我的应用程序划分为不同的模块。

我正在尝试在根 url (' /')上加载 HomeModule 中存在的 HomeComponent

app.component.html

<app-header></app-header>
<router-outlet></router-outlet>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './module/common/header/header.component';
import { HomeModule } from './module/home/home/home.module';
//& so on.


@NgModule({
declarations: [
  AppComponent,
  LogoComponent,
  MenuComponent,
  SearchComponent,
  SignComponent,
  HeaderComponent
],
imports: [
 BrowserModule,
 AppRoutingModule,
 HomeModule,
 UserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

app.routing.ts

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

const routes: Routes = [
{ path : '', component : HomeComponent, loadChildren: ()=> 
import('../app/module/home/home.module').then(mod => mod.HomeModule)}
];

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

home.module.ts

import { NgModule } from "@angular/core";
import { CommonModule } from '@angular/common';
import { HomeComponent } from './home/home.component';

@NgModule({
 declarations:
    [
        HomeComponent
    ],
imports: [
    CommonModule,
    HomeRoutingModule

],
exports: [
    HomeComponent
],
 providers: []
})

export class HomeModule { }

但是在运行应用程序时，它会抛出以下错误。

组件 HomeComponent 不是任何 NgModule 的一部分，或者该模块尚未导入您的模块

是什么导致了这个错误？

谢谢！

标签： angularangular-routingangular8

解决方案

你在 app.routing.ts 中犯了一个错误

常量路由：Routes = [ { path : '', component : HomeComponent, loadChildren: ()=> import('../app/module/home/home.module').then(mod => mod.HomeModule)} ];

正确的代码应该是：

const routes: Routes = [
{ path : '', loadChildren: ()=> import('../app/module/home/home.module').then(mod => mod.HomeModule)}
];

然后像这样创建一个 home.routing.ts 和代码：

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

由于您不需要在任何其他模块中使用它并且显然不应该，因此从导出中删除 HomeComponent：

exports: [
    HomeComponent
],

应该删除此代码。

解释： 因为在 app 组件中，我们是延迟加载模块，而不是组件。所以，我们不应该在 app.routing.ts 中指定 homeComponent。

每个模块都应该有自己的路由。由于 home 是一个模块，它应该有一个 home.routing.ts 并且我们需要指定它在加载 home 模块时应该走哪条路由。因此，我们在主路由中指定主组件。

推荐阅读