angular4で直接指定されたルートURLへのルーティング

Question

私のプロジェクトのプロジェクト構造。私はあなたのプロジェクトをここにモジュールで整理するための角のガイドに従っています。 https://angular.io/guide/router#milestone-4-crisis-center-feature

アプリ-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のコンポーネントに誘導されます。

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

ポータル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タグと1つのrouter-outletタグがありますマップコンポーネント

portal.component.htmlは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 {} 

ポータルのスナップショットのこの時点で

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

スナップショットを持っています.module.ts

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

私はAppModuleにPortalModuleをインポートしているので、PortalComponentクラスとLoginComponentクラスのngOninit（）でconsole.logを見ることができますが、HTMLはロードされません。エラーは表示されません。 PortalModuleクラスをインポートしないと、何も表示されません。 何か助けていただければ幸いです。それは子供をロードした後

Answer 1

ルータが1列にすべてのルートをマージし、それがforChildであなたのforRootコンフィギュレーションをマージしたときに、あなたが得る：だから

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

が PortalComponentに移動し、ルートは次のようになります。

portal/portal 

/portalのみを使用する場合は、forChildの設定を

に変更する必要があります。

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