Маршрутизатор Angular2: как правильно загружать дочерние модули с собственными правилами маршрутизации

вот моя структура приложения Angular2:

Вот часть моего кода. Ниже приводится основнойmodule приложения Angular2, которое импортирует свои правила маршрутизации и дочерний модуль (EdgeModule) и использует некоторые компоненты, связанные с некоторыми страницами.

app.module.ts

@NgModule({
    declarations: [
        AppComponent,
        PageNotFoundComponent,
        LoginComponent
    ],
    imports: [
        ...
        appRouting,
        EdgeModule
    ],
    providers: [
        appRoutingProviders,
        LoginService
    ],
    bootstrap: [AppComponent]
})

export class AppModule {
}

Вот правила маршрутизации для основного модуля. У него есть пути к странице входа и страница не найдена.

app.routing.ts

const appRoutes: Routes = [
    { path: 'login', component: LoginComponent },
    { path: '**', component: PageNotFoundComponent }
];

export const appRoutingProviders: any[] = [];

export const appRouting = RouterModule.forRoot(appRoutes, { useHash: true });

ВотEdgeModule объявляет используемый компонент и импортирует собственные правила маршрутизации и 2 дочерних модуля (FirstSectionModule а такжеSecondSectionModule).

edge.module.ts

@NgModule({
    declarations: [
        EdgeComponent,
        SidebarComponent,
        TopbarComponent
    ],
    imports: [
        ...
        edgeRouting,
        FirstSectionModule,
        SecondSectionModule
    ],
    providers: [
        AuthGuard
    ]
})

export class EdgeModule {
}

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

edge.routing.ts

Paths['edgePaths'] = {
    firstSection: 'firstSection',
    secondSection: 'secondSection'
};

const appRoutes: Routes = [
    { path: '', component: EdgeComponent,
        canActivate: [AuthGuard],
        children: [
            { path: Paths.edgePaths.firstSection, loadChildren: '../somepath/first-section.module#FirstModule' },
            { path: Paths.edgePaths.secondSection, loadChildren: '../someotherpath/second-section.module#SecondModule' },
            { path: '', redirectTo: edgePaths.dashboard, pathMatch: 'full' }
        ]
    }
];

export const edgeRouting = RouterModule.forChild(appRoutes);

Наконец, это один из двух дочерних модулей, который имеет свои компоненты и импортирует свои правила маршрутизации.

первоклассников section.module.ts

@NgModule({
    declarations: [
        FirstSectionComponent,
        SomeComponent
    ],
    imports: [
        ...
        firstSectionRouting
    ],
    providers: [
        AuthGuard,
    ]
})

export class FirstSectionModule {
}

Это правила маршрутизации для страниц (компонентов)FirstSectionModule

первоклассников section.routing.ts

Paths['firstSectionPaths'] = {
    someSubPage: 'some-sub-page',
    someOtherSubPage: 'some-other-sub-page'
};

const appRoutes: Routes = [
    {
        path: '',
        children: [
            { path: Paths.firstSectionPaths.someSubPage, component: someSubPageComponent},
            { path: Paths.firstSectionPaths.someOtherSubPage, component: someOtherSubPageComponent},
            { path: '', component: AnagraficheComponent }
        ]
    }
];

export const firstSectionRouting = RouterModule.forChild(appRoutes);

Почти то же самое происходит дляsecond-section.module.ts а такжеsecond-section.routing.ts файлы.

Когда я запускаю приложение, в первую очередь загружается страница, связанная сFirstSectionComponent, без боковой панели и верхней панели.

Можете ли вы сказать мне, что не так с моим кодом? В консоли нет ошибок.

Ответы на вопрос(4)

Ваш ответ на вопрос