直接以angular4路由到特定路由URL

我项目的项目结构 . 我正在遵循安全指南，在这里安排您的项目模块 . https://angular.io/guide/router#milestone-4-crisis-center-feature

APP-routing.module.ts

const routes: Routes = [
  {
    path: 'portal',
    canActivate: [RuntimeEnvironmentService],
    loadChildren: 'app/portal/portal.module#PortalModule',
  },
  {
    path: '',
    canActivate: [RuntimeEnvironmentService],
    loadChildren: 'app/features/features.module#FeaturesModule',
  }

];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      preloadingStrategy: environment.preloadAllLazyLoadedModules
        ? PreloadAllModules
        : NoPreloading,
    }),
  ],
})
export class AppRoutingModule {}

如果用户导航到http://localhost:4200我希望将用户定向到FeaturesModule，它可以正常工作 .

但是当用户导航到http://localhost:4200/portal时，我希望将该用户定向到PortalModule中无法正常工作的组件 .

feature-routing.module.ts的快照

const routes: Routes = [
  {
    path: '',
    component: FeaturesComponent,
    children: [
      {
        path: 'map-page',
        component: MapPageComponent
      },
      {
        path: '',
        redirectTo: 'map-page',
        pathMatch: 'full'
      }
    ]
  }
];

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

portal-routing.module.ts的快照

const routes: Routes = [
  {
    path: 'portal',
    component: PortalComponent,
    children: [
      {
        path: '',
        component: LoginComponent
      }
    ]

  }
];

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

app.component.html只有一个路由器插座标签

<router-outlet></router-outlet>

features.component.html有自己的html和一个router-outlet标签来显示 Map 组件 .

portal.component.html目前有这个

<p>
  portal works! Why this is not displayed !!!
  <router-outlet></router-outlet>
</p>

AppModule的快照

import { environment } from 'environments/environment';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CoreModule } from './core/core.module';
import { SharedModule } from './shared/shared.module';
import { PortalModule } from './portal/portal.module';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    CoreModule,
    SharedModule,
    PortalModule,
    AppRoutingModule
  ],
  providers: [
    // use hash location strategy or not based on env
    {
      provide: LocationStrategy,
      useClass: environment.hashLocationStrategy
        ? HashLocationStrategy
        : PathLocationStrategy,
    },
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

features.module.ts的快照

@NgModule({
  imports: [
            SharedModule,
            FeaturesRoutingModule,
            AgmCoreModule.forRoot({
              apiKey: 'AIzaSyAzGVaB4-VPQvIKlhcxz_uy2ft8uCPMZP4'
            })
  ],
  declarations: [
            FeaturesComponent,
            MapPageComponent,
  ],
  providers: [
            SkymeetService
  ]
})
export class FeaturesModule {}

portal.module.ts的快照

@NgModule({
  imports: [
    SharedModule,
    PortalRoutingModule
  ],
  declarations: [
    PortalComponent,
    LoginComponent
  ]
})
export class PortalModule { }

由于我在AppModule中导入了PortalModule，我可以在PortalComponent类和LoginComponent类的ngOninit（）中看到console.log，但HTML没有加载 . 没有显示错误 . 如果我不导入PortalModule类，则不显示任何内容 . 任何帮助是极大的赞赏 .