Angular

Question

我有 Angular 8 申请。我把我的应用分成了不同的模块。

AppModule
家庭模块
用户模块

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

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

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

Component HomeComponent is not part of any NgModule or the module has not been imported into your module

导致此错误的原因是什么？

谢谢！

Answer 1

你在 app.routing.ts

中犯了一个错误

const routes: 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.routing.ts.

中指定 homeComponent

每个模块都应该有自己的路由。由于 home 是一个模块，它应该有一个 home.routing.ts 并且我们需要指定它在加载 home 模块时应该走哪条路线。所以，我们在home routing中指定了homecomponent。

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

Angular - Render component present inside another module on root url

angular-routing

angular8