Question

我创建了一个标准的角度应用程序，然后添加了一个home模块，然后添加了home组件，但是该页面始终显示空白页面。

创建应用程序：

ng新的angularapp
ng g m个模块\ home
ng g modules \ home \ home
添加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

我认为您的代码中的所有内容都很好，除非您没有在 HomeComponent 中导出 Home Module 。这就是为什么您无法在浏览器上显示任何内容的原因。

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

export class HomeModule { }

希望这会解决您的问题..：）

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

如果您想知道... 答案是我在app.modules.ts中导入的顺序。

我需要将其更改为以下内容：

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

它奏效了。

找不到归属模块的路由

4 个答案: