Не найдена маршрутизация для домашнего модуля

Question

Я создаю стандартное угловое приложение, затем добавляю домашний модуль, затем добавляю домашний компонент, но на странице всегда отображается пустая страница.

Чтобы создать приложение:

1. ngnew angularapp
2. ng gm modules \ home
3. ng gc modules \ home \ home
4. Добавить home-routing.module.ts

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

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

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

Измените home.module.ts

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

// Routing for the module
import { HomeRoutingModule } from './home-routing.module';

@NgModule({
  declarations: [
    HomeComponent
  ],
  imports: [
    CommonModule,
    HomeRoutingModule
  ],
  exports: [],
  providers: [],
  entryComponents: []
})
export class HomeModule { }

Измените 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';

// Application Modules
import { HomeModule } from './modules/home/home.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    // Angular
    BrowserModule,
    // app
    AppRoutingModule,
    // Application Modules
    HomeModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Измените app.component.html

Angular Application
<router-outlet></router-outlet>

Запустите приложение:

ng serve -o

И я получаю заголовок с угловым приложением

Любая помощь будет благодарна

ПРИМЕЧАНИЕ: Git Repo - https://github.com/scossgrove/AngularModules

Answer 1

на случай, если вам интересно ... Ответ - это порядок, в котором я импортировал файл app.modules.ts.

Мне нужно было изменить его на следующее:

imports: [
    // Angular
    BrowserModule,
    // Application Modules
    HomeModule,
    // app
    AppRoutingModule
  ],

И это сработало.

Answer 2

//app.module.ts
imports:[
  RouterModule.forRoot([])   
] 

//app-routing.module.ts
 {
   path: '', 
   loadChildren: './home/home.module#HomeModule'
                 //(path with file name of homeModule # exported class in home.module.ts)
  }

Добавьте указанный выше код в файл app.module.ts & app-routing.module.ts

Answer 3

Вы ничего не видите в HomeModule, потому что вы используете только

<router-outlet></router-outlet>

в вашем app.component.html.Поскольку маршрутизатор-розетка является заполнителем для отображения содержимого компонента, но вы не переходите к другому представлению, так как вы можете его увидеть.Поэтому, если вы хотите увидеть что-то из HomeModule, вам нужно перейти к домашнему маршруту или что-то еще

А также вам нужно добавить маршрут для HomeComponent, например,

export const routes: Routes = [
  {
    path: 'home',
    component: HomeComponent,
    pathMatch: 'full'
  }
];

Answer 4

Я думаю, что в вашем коде все хорошо, кроме того, что вы не экспортируете HomeComponent в Home Module.Вот почему вы ничего не можете отобразить в браузере.

@NgModule({
  declarations: [
    HomeComponent
  ],
  imports: [
    CommonModule,
    HomeRoutingModule
  ],
  exports: [
   HomeComponent   // add your component here
  ],
  providers: [],
  entryComponents: []
})

export class HomeModule { }

надеюсь, что это решит вашу проблему ..:)