View package.json
{
"name": "webpack-test",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "webpack-dev-server --port=4200",
"build": "webpack",
"test": "karma start ./karma.conf.js",
"lint": "ng lint",
View package.json
{
"name": "webpack-test",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
View dynamic-routing.module.ts
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import DynamicComponent from './dynamic.component';
import { MoviesComponent } from './movies/movies.component';
import { SampleComponent } from './sample.component';
const dynamicRoutes: Routes = [
{ path: '', component: DynamicComponent, pathMatch: 'full' },
{ path: 'movies', component: MoviesComponent},
View dynamic.module.ts
import { NgModule } from '@angular/core';
import {FormsModule } from '@angular/forms'
import DynamicComponent from './dynamic.component';
import { MoviesComponent } from './movies/movies.component';
import { MoviesService } from './movies/movies.service';
import { CommonModule } from '@angular/common';
import { HttpModule } from '@angular/http';
import { routes } from './dynamic-routing.module';
View dynamic.component.ts
import { Component } from '@angular/core';
import { LoggingService } from './looging-service';
@Component({
selector: 'dynamic-component',
template: `
<div class="container">
<div><strong>Dynamic Modules and Components</strong></div>
View app-routing-module.ts
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import InlineComponent from './inline.component';
import { MoviesComponent } from './movies/movies.component';
var providers;
const appRoutes: Routes = [
{
View inline-component.ts
import { Component } from '@angular/core';
@Component({
selector: 'inline-component',
template: `
<div class="container">
<p>This component is the default component and was loaded by default.</p>
<strong> <a routerLink="/dynamic" routerLinkActive="active">Load a dynamic component</a>
<a routerLink="/dynamic/movies" routerLinkActive="active">Load Movies</a>
<a routerLink="/dynamic/sample" routerLinkActive="active">Sample Module</a></strong>
View app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<div class="container"><h1>Code Splitting in Angular 4</h1></div>
<router-outlet></router-outlet>
`
})
export default class AppComponent {}
View app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { routes } from './app-routing.module';
import AppComponent from './app.component';
import InlineComponent from './inline.component';
import SampleInlineComponent from './sample-inline.component';
import { LoggingService } from './looging-service';
View app-routing-module.ts
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import InlineComponent from './inline.component';
import { MoviesComponent } from './movies/movies.component';
var providers;
const appRoutes: Routes = [
{