Angular2 Router 3.0 - Setting up multi-features (multi sections) routing

Question

I'm making a website with two main sections, public section and the control panel
so I'm trying to make something like this (from angular.io):

here's my code: (it's working)

app/main.ts:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
import { AppModule } from './app.module'
platformBrowserDynamic().bootstrapModule(AppModule)

app/app.module.ts: (I'm declaring all components of all sections here's..)

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { AppComponent } from './app.component'
import { routing,appRoutingProviders } from './app.routing'

// Primary Imports
import { PrimaryComponent } from './primary/components/primary.component'
import { HomeComponent } from './primary/components/home.component'
import { LessonsComponent } from './primary/components/lessons.component'
.
.
.

// Administration Imports
import { AdministrationComponent } from './administration/components/administration.component'
import { DashboardComponent } from './administration/components/dashboard.component'
import { LessonsControlComponent } from './administration/components/lessons-control.component'
.
.
.

import { HttpModule } from '@angular/http'

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    routing,
    HttpModule
  ],
  declarations: [
    AppComponent,
    // Primary
    PrimaryComponent,
    HomeComponent,
    LessonsComponent,
    .
    .
    .

    // Administration
    AdministrationComponent,
    DashboardComponent,
    LessonsControlComponent,
    .
    .
    .

  ],
  providers: [
    appRoutingProviders
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

app/app.routing.ts:

import { Routes, RouterModule } from '@angular/router'
import { PrimaryRoutes } from './primary/components/primary.routes'
import { AdministrationRoutes } from './administration/components/administration.routes'

const appRoutes: Routes = [
    { path: '', redirectTo: '/primary', pathMatch: 'full'},
    ...PrimaryRoutes,
    ...AdministrationRoutes
]

export const appRoutingProviders: any[] = []

export const routing = RouterModule.forRoot(appRoutes)

app/primary/components/primary.routes.ts: (same thing for administration.routes.ts)

import { provideRouter, RouterConfig } from '@angular/router'
import { PrimaryComponent }    from './primary.component'
import { LessonsComponent } from './lessons.component'

export const PrimaryRoutes: RouterConfig = [
    {
        path: 'primary',
        component: PrimaryComponent,
        children: [
            { path: '', component: HomeComponent},
            { path: 'home', component: HomeComponent},
            { path: 'lessons', component: LessonsComponent },
      ]
  }
]

(I apologize for boring you with all this code)

then I have three router-outlet in:

• app.component.ts
• primary/components/primary.component.ts
• administration/components/administration.component.ts

Now this actually works fine, but I think it loads all the website at once this way, so I guess the way I'm implementing it is wrong or missing something
I think i need to have a primary.module.ts and administration.module.ts and declare each section's component's in its module, instead of declaring the universe in app.module.ts, am I right? or maybe two other main.ts files for each section, but I couldn't figure out how to do any of that also the docs in angular.io are helpful but couldn't find something related to this

I hope someone can tell me for sure if I'm doing it wrong, and give me any resources for the right way. thank you.

Answer 1

I think you are looking at async routing

{
  path: 'admin',
  loadChildren: 'app/admin/admin.module#AdminModule',
}