import { NgModule } from '@angular/core';
    import { RouterModule, Routes } from '@angular/router';
    ...

    const appRoutes: Routes = [...];
    @NgModule({
        imports: [RouterModule.forRoot(appRoutes)],
        exports: [RouterModule]
    })
    export class AppRoutingModule { }
        

    import { NgModule } from '@angular/core';
    import { RouterModule, Routes } from '@angular/router';
    ...
    const recipesRoutes: Routes = [
        {
            path: 'recipes', component: RecipesComponent, children: [
                { path: '', component: RecipeStartComponent },
                { path: 'new', component: RecipeEditComponent, canActivate: [AuthGuard] },
                // paths without dynamic IDs must be first
                { path: ':id', component: RecipeDetailComponent },
                { path: ':id/edit', component: RecipeEditComponent, canActivate: [AuthGuard] },
            ]
        },
    ];
    @NgModule({
        imports: [RouterModule.forChild(recipesRoutes)],
        exports: [RouterModule]
    })
    export class RecipesRoutingModule { }
        

    ...
    import { RecipesRoutingModule } from './recipes-routing.module';

    @NgModule({
        declarations: [
            ...
        ],
        imports: [
            ...,
            RecipesRoutingModule
        ],
    })
    export class RecipesModule { }
        

    import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';

    import { DropdownDirective } from './dropdown.directive';

    @NgModule({
        declarations: [
            DropdownDirective
        ],
        imports: [
            CommonModule
        ],
        exports: [
            CommonModule,
            DropdownDirective
        ]
    })
    export class SharedModule { }
        

    ...
    // import { DropdownDirective } from './shared/dropdown.directive';
    import { SharedModule } from './shared/shared.module';
    ...
    @NgModule({
      declarations: [
        ...
        // DropdownDirective,
        SignInComponent,
        SignUpComponent
      ],
      imports: [
        ...
        SharedModule
      ],
      ...
    })
    export class AppModule { }
        

    ...
    import { SharedModule } from '../shared/shared.module';

    @NgModule({
        declarations: [
            ...
        ],
        imports: [
            ReactiveFormsModule,
            RecipesRoutingModule,
            SharedModule
        ],
    })
    export class RecipesModule { }
        

    ng g c home --spec false
        

    import { NgModule } from '@angular/core';
    import { RouterModule, Routes } from '@angular/router';

    import { ShoppingListComponent } from './shopping-list/shopping-list.component';
    import { HomeComponent } from './home/home.component';

    const appRoutes: Routes = [
        { path: '', component: HomeComponent },
        // loadChildren: < path to feature model >#< class name >
        { path: 'recipe', loadChildren: './recipes/recipes.module#RecipesModule' },
        { path: 'shopping-list', component: ShoppingListComponent },
    ];
    @NgModule({
        imports: [RouterModule.forRoot(appRoutes)],
        exports: [RouterModule]
    })
    export class AppRoutingModule { }
        

    { path: 'recipes', loadChildren: './recipes/recipes.module#RecipesModule', canLoad: [AuthGuard] } 
        

    import { ActivatedRouteSnapshot, CanActivate, CanLoad, Route, RouterStateSnapshot } from '@angular/router';
    import { Injectable } from '@angular/core';
    import { AuthService } from './auth.service';
    import { Observable } from 'rxjs/Observable';

    @Injectable()
    export class AuthGuard implements CanActivate, CanLoad {

        constructor(private authService: AuthService) { }
        canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
            return this.authService.isAuthenticated();
        }
        canLoad(route: Route): Observable<boolean> | Promise<boolean> | boolean {
            return this.authService.isAuthenticated();
        }
    }
        

    ...
    import { AuthGuard} from './auth/auth-guard.service';

    const appRoutes: Routes = [
        { path: '', component: HomeComponent },
        { path: 'recipe', loadChildren: './recipes/recipes.module#RecipesModule', canLoad: [AuthGuard] },
        { path: 'shopping-list', component: ShoppingListComponent },
    ];
    ...
    export class AppRoutingModule { }
        

in the first case add a shared module which includes the log service in its providers array
when the lazily-load module is loaded it gets a different instance of the service because the child injector is used

don't provide services in shared modules especially if the services are to be used by lazily-loaded modules

1. development
2. production
3. app downloaded in browser
4. Angular parses & compiles templates to JavaScript

1. development
2. Angular parses & compiles templates to JavaScript
3. production
4. app downloaded in browser

• faster startup, no compilation in browser
• templates get checked during compilation
• smaller file size, unused features stripped out, compiler isn't shipped

    ng build
            

    ng build --prod           
     

    ng build --prod --aot          
     

     ...
    const appRoutes: Routes = [ ... ];
    @NgModule({
        imports: [RouterModule.forRoot(appRoutes, { preloadingStrategy: PreloadAllModules })],
        exports: [RouterModule]
    })
    export class AppRoutingModule { }