├── .gitignore ├── README.md ├── _config.yaml ├── app ├── app-routing.module.ts ├── app.component.ts ├── app.module.ts ├── main.ts ├── tasks │ ├── task-detail.component.ts │ ├── tasks-list.component.ts │ ├── tasks-routing.module.ts │ ├── tasks.component.ts │ └── tasks.module.ts └── users │ ├── users-list.component.ts │ ├── users-routing.module.ts │ ├── users.component.ts │ └── users.module.ts ├── assets └── view.gif ├── index.html ├── package.json ├── style.css ├── systemjs.config.js └── tsconfig.json /.gitignore: -------------------------------------------------------------------------------- 1 | ########################### 2 | #WebStorm Files 3 | ########################### 4 | .idea/ 5 | *ipr 6 | *.iml 7 | 8 | ########################### 9 | #NPM Files 10 | ########################### 11 | node_modules/ 12 | npm-debug.log 13 | 14 | ########################### 15 | #Angular2 Files 16 | ########################### 17 | typings/ 18 | app/*.js 19 | app/*.js.map 20 | app/tasks/*.js 21 | app/tasks/*.js.map 22 | app/users/*.js 23 | app/users/*.js.map -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Lazy Loading with Angular2 Routing 2 | 3 | Let's dive into one of the cool features of **Angular2 Router** i.e. **Lazy Loading of Modules**. 4 | If we go back to **Angular 1.x** we know that, there we were defining **Controller** and **Template** for each route, while templates were getting 5 | lazy loaded, but js files weren't. But in **Angular2** it is possible to load your modules as and when they are required. So let's not get into the `coding mode`. 6 | 7 | So we have this small app which has basically 3 modules: 8 | 9 | 1. AppModule - This is the root module of the application 10 | 2. TasksModule - This is the child module of `AppModule` 11 | 3. UsersModule - Child module of `AppModule`, sibling module of `TasksModule` 12 | 13 | Following are various components in which the application has been divided: 14 | 15 | 1. AppComponent - This is the root component of the application. 16 | 2. TasksComponent - It is the parent component in the tasks module. 17 | 3. TaskDetailComponent - This component is responsible for displaying details of the task. 18 | 4. TasksListComponent - Component that displays list of tasks. 19 | 5. UsersComponent - It is the parent component in the users module and container component for UsersListComponent. 20 | 6. UsersListComponent - Displays the list of users 21 | 22 | Before we move on further, let's note that there are 3 other important parts of this app: 23 | 24 | 1. ROUTING - This is the main router for our application. 25 | 2. TASKS_ROUTING - This is the child router. Takes care of routing for tasks module. 26 | 3. USERS_ROUTING - Takes care of routing for users module. 27 | 28 | Now, let's see some code now: 29 | 30 | ```app.module.ts 31 | import {NgModule} from '@angular/core'; 32 | import {BrowserModule} from '@angular/platform-browser'; 33 | import {AppComponent} from './app.component'; 34 | import {AppRoutingModule} from './app-routing.module'; 35 | 36 | @NgModule({ 37 | imports: [ 38 | BrowserModule, 39 | AppRoutingModule 40 | ], 41 | declarations: [ 42 | AppComponent 43 | ], 44 | bootstrap: [AppComponent] 45 | }) 46 | export class AppModule { 47 | } 48 | ``` 49 | 50 | > I am assuming that readers of this blog have some idea about Angular2 and its routing but would still try to give overview of few things. 51 | 52 | In the above code you can see that we have imported **NgModule** and **BrowserModule**. We need `NgModule` decorator for defining module-level components, directives, pipes etc. 53 | **BrowserModule** registers critical application service providers and also re-exports **CommonModule** from `@angular/common`. 54 | We provide `AppComponent` in **declarations**, to tell **Angular** that `AppComponent` belongs to `AppModule`. 55 | **bootstrap** is to advise **Angular** to bootstrap `AppComponent` into the **DOM** once `AppModule` starts. 56 | 57 | Our `AppComponent` looks something like this: 58 | 59 | ```app.component.ts 60 | import {Component} from '@angular/core'; 61 | 62 | @Component({ 63 | selector: 'my-app', 64 | template: ` 65 | 69 | 70 | ` 71 | }) 72 | 73 | export class AppComponent { 74 | } 75 | ``` 76 | 77 | As you can see above, we have two anchor tags for navigation - one takes us to `tasks` page and another one takes us to `users` page. 78 | You can see `routerLink` property here which has a string path. 79 | 80 | Let's see `TasksModule`: 81 | 82 | ```tasks.module.ts 83 | import {NgModule} from '@angular/core'; 84 | import {CommonModule} from '@angular/common'; 85 | import {TasksComponent} from './tasks.component'; 86 | import {TaskDetailComponent} from './task-detail.component'; 87 | import {TasksListComponent} from './tasks-list.component'; 88 | import {TasksRoutingModule} from "./tasks-routing.module"; 89 | 90 | @NgModule({ 91 | imports: [ 92 | CommonModule, 93 | TasksRoutingModule 94 | ], 95 | declarations: [ 96 | TasksComponent, 97 | TaskDetailComponent, 98 | TasksListComponent 99 | ] 100 | }) 101 | export class TasksModule { 102 | } 103 | ``` 104 | 105 | We have imported **CommonModule** because it provides important directives such as **NgIf** and **NgFor**. 106 | And here are the various components: 107 | 108 | ```tasks.component.ts 109 | import {Component} from '@angular/core'; 110 | 111 | @Component({ 112 | template: ` 113 |

Your Tasks

114 | 115 | `, 116 | }) 117 | export class TasksComponent { 118 | } 119 | ``` 120 | 121 | ```tasks-list.component.ts 122 | import {Component} from '@angular/core'; 123 | import {Router} from '@angular/router'; 124 | 125 | @Component({ 126 | template: ` 127 |
128 | 134 |
135 | `, 136 | }) 137 | 138 | export class TasksListComponent { 139 | 140 | constructor(private router:Router) { 141 | } 142 | 143 | private tasks = [ 144 | {id: '1', title: 'Code Cleanup'}, 145 | {id: '2', title: 'Review Code'}, 146 | {id: '3', title: 'Build to Prod'} 147 | ]; 148 | private errorMessage:any = ''; 149 | 150 | onSelect(task) { 151 | this.router.navigate(['/tasks', task.id]); 152 | } 153 | } 154 | ``` 155 | 156 | In order to keep the demo as simple as possible, we have a small hard-coded list of tasks. We are displaying a list of tasks 157 | and on clicking on each task, user would be navigated to `task-detail` page where details of a task would be displayed. 158 | 159 | ```task-detail.component.ts 160 | import {Component} from '@angular/core'; 161 | 162 | @Component({ 163 | template: ` 164 |
165 | Some task detail to show up here. 166 |
167 | ` 168 | }) 169 | 170 | export class TaskDetailComponent { 171 | } 172 | ``` 173 | 174 | And here is the`TasksRoutingModule` which has route configuration for our`tasks` module: 175 | 176 | ```tasks-routing.module.ts 177 | import {NgModule} from '@angular/core'; 178 | import {RouterModule} from '@angular/router'; 179 | import {TasksComponent} from './tasks.component'; 180 | import {TaskDetailComponent} from './task-detail.component'; 181 | import {TasksListComponent} from './tasks-list.component'; 182 | 183 | @NgModule({ 184 | imports: [ 185 | RouterModule.forChild([ 186 | { 187 | path: '', 188 | component: TasksComponent, 189 | children: [ 190 | { 191 | path: '', 192 | component: TasksListComponent 193 | }, 194 | { 195 | path: ':id', 196 | component: TaskDetailComponent, 197 | } 198 | ] 199 | } 200 | ]) 201 | ], 202 | exports: [ 203 | RouterModule 204 | ] 205 | }) 206 | export class TasksRoutingModule { 207 | } 208 | ``` 209 | 210 | So when a user lands to the application, by default `tasks` module would be displayed to him. So when the path would be simply `/tasks`, user would see list of tasks and once 211 | user clicks on a particular task, id would be added as the **routeParam** and route would change to '/tasks/id'(id of that particular task). 212 | 213 | Now, let's quickly have a look at the `users` module. 214 | 215 | ```users.module.ts 216 | import {NgModule} from '@angular/core'; 217 | import {CommonModule} from '@angular/common'; 218 | import {UsersComponent} from './users.component'; 219 | import {UsersListComponent} from './users-list.component'; 220 | import {UsersRoutingModule} from "./users-routing.module"; 221 | 222 | @NgModule({ 223 | imports: [ 224 | CommonModule, 225 | UsersRoutingModule 226 | ], 227 | declarations: [ 228 | UsersComponent, 229 | UsersListComponent 230 | ] 231 | }) 232 | export class UsersModule { 233 | } 234 | ``` 235 | 236 | and here is the `UsersComponent` which is the parent component for `UsersList`. Here are both the components: 237 | 238 | ```users.component.ts 239 | import {Component} from '@angular/core'; 240 | 241 | @Component({ 242 | template: ` 243 |

Users List

244 | 245 | `, 246 | }) 247 | export class UsersComponent { 248 | } 249 | ``` 250 | 251 | 252 | ```users-list.component.ts 253 | import {Component} from '@angular/core'; 254 | 255 | @Component({ 256 | template: ` 257 |
258 | 264 |
265 | `, 266 | }) 267 | 268 | export class UsersListComponent { 269 | private users = [ 270 | {id: '1', name: 'John Doe'}, 271 | {id: '2', name: 'Jane Roe'}, 272 | {id: '3', name: 'John Smith'} 273 | ]; 274 | } 275 | ``` 276 | 277 | and here is the routing for `Users` module: 278 | 279 | ```users.routing.ts 280 | import {NgModule} from '@angular/core'; 281 | import {RouterModule} from '@angular/router'; 282 | import {UsersComponent} from './users.component'; 283 | import {UsersListComponent} from './users-list.component'; 284 | 285 | 286 | @NgModule({ 287 | imports: [ 288 | RouterModule.forChild([ 289 | { 290 | path: '', 291 | component: UsersComponent, 292 | children: [ 293 | { 294 | path: '', 295 | component: UsersListComponent 296 | } 297 | ] 298 | } 299 | ]) 300 | ], 301 | exports: [ 302 | RouterModule 303 | ] 304 | }) 305 | export class UsersRoutingModule { 306 | } 307 | ``` 308 | 309 | Let's quickly move onto the place where all the magic happens i.e. `AppRoutingModule`: 310 | 311 | ```app-routing.module.ts 312 | import {NgModule} from '@angular/core'; 313 | import {RouterModule} from '@angular/router'; 314 | 315 | 316 | @NgModule({ 317 | imports: [ 318 | RouterModule.forRoot([ 319 | {path: '', redirectTo: '/tasks', pathMatch: 'full'}, 320 | {path: 'tasks', loadChildren: 'app/tasks/tasks.module#TasksModule'}, 321 | {path: 'users', loadChildren: 'app/users/users.module#UsersModule'} 322 | ]) 323 | ], 324 | exports: [ 325 | RouterModule 326 | ] 327 | }) 328 | export class AppRoutingModule { 329 | } 330 | ``` 331 | 332 | Well, as you can see in the above code, since by default we are redirecting our page to `tasks` so our tasks module would get loaded. When the route changes to '/users', the routes module would be loaded. This has been achieved 333 | using the `loadChildren` property defined on the route. **Angular** will fetch the module at the location and then load the routes defined in its router config. 334 | The path to the file and name of the module is separated by `#`. The **Router** reads the `ModuleName` given after `#` and loads the module accordingly. 335 | So we did not load `UsersModule` and `TasksModule` in our `AppComponent`, instead used `loadChildren` property in the routing config to lazy load our modules. 336 | 337 | Here is the quick view of what is happening: 338 | 339 | ![view.gif](https://raw.githubusercontent.com/NamitaMalik/Lazy-Loading-with-Angular2-Routing/master/assets/view.gif) 340 | 341 | You can see tasks module gets loaded only when we click on the Tasks link. Similarly, users module also gets when we click on the Users link. 342 | 343 | Well that's all for now, though **lazy loading** is an advantage of **Angular Router**, it has a disadvantage too i.e. there would be some waiting every time when a new module is being loaded. This issue can be resolved using **preloading** of modules which 344 | I'll be discussing in my upcoming blog..till then Happy Learning! 345 | 346 | Follow Me 347 | --- 348 | [Github](https://github.com/NamitaMalik) 349 | 350 | [Twitter](https://twitter.com/namita13_04) 351 | 352 | [LinkedIn](https://in.linkedin.com/in/namita-malik-a7885b23) 353 | 354 | [More Blogs By Me](https://namitamalik.github.io/) -------------------------------------------------------------------------------- /_config.yaml: -------------------------------------------------------------------------------- 1 | theme: jekyll-theme-hacker 2 | -------------------------------------------------------------------------------- /app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by NamitaMalik on 9/27/2016. 3 | */ 4 | import {NgModule} from '@angular/core'; 5 | import {RouterModule} from '@angular/router'; 6 | 7 | 8 | @NgModule({ 9 | imports: [ 10 | RouterModule.forRoot([ 11 | {path: '', redirectTo: '/tasks', pathMatch: 'full'}, 12 | {path: 'tasks', loadChildren: 'app/tasks/tasks.module#TasksModule'}, 13 | {path: 'users', loadChildren: 'app/users/users.module#UsersModule'} 14 | ]) 15 | ], 16 | exports: [ 17 | RouterModule 18 | ] 19 | }) 20 | export class AppRoutingModule { 21 | } -------------------------------------------------------------------------------- /app/app.component.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by NamitaMalik on 9/27/2016. 3 | */ 4 | import {Component} from '@angular/core'; 5 | 6 | @Component({ 7 | selector: 'my-app', 8 | template: ` 9 | 13 | 14 | ` 15 | }) 16 | 17 | export class AppComponent { 18 | } -------------------------------------------------------------------------------- /app/app.module.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by NamitaMalik on 9/27/2016. 3 | */ 4 | import {NgModule} from '@angular/core'; 5 | import {BrowserModule} from '@angular/platform-browser'; 6 | import {AppComponent} from './app.component'; 7 | import {AppRoutingModule} from './app-routing.module'; 8 | 9 | @NgModule({ 10 | imports: [ 11 | BrowserModule, 12 | AppRoutingModule 13 | ], 14 | declarations: [ 15 | AppComponent 16 | ], 17 | bootstrap: [AppComponent] 18 | }) 19 | export class AppModule { 20 | } -------------------------------------------------------------------------------- /app/main.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by NamitaMalik on 9/27/2016. 3 | */ 4 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; 5 | import {AppModule} from './app.module'; 6 | 7 | platformBrowserDynamic().bootstrapModule(AppModule); -------------------------------------------------------------------------------- /app/tasks/task-detail.component.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by NamitaMalik on 9/27/2016. 3 | */ 4 | import {Component} from '@angular/core'; 5 | 6 | @Component({ 7 | template: ` 8 |
9 | Some task detail to show up here. 10 |
11 | ` 12 | }) 13 | 14 | export class TaskDetailComponent { 15 | } -------------------------------------------------------------------------------- /app/tasks/tasks-list.component.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by NamitaMalik on 9/27/2016. 3 | */ 4 | import {Component} from '@angular/core'; 5 | import {Router} from '@angular/router'; 6 | 7 | @Component({ 8 | template: ` 9 |
10 | 16 |
17 | `, 18 | }) 19 | 20 | export class TasksListComponent { 21 | 22 | constructor(private router:Router) { 23 | } 24 | 25 | private tasks = [ 26 | {id: '1', title: 'Code Cleanup'}, 27 | {id: '2', title: 'Review Code'}, 28 | {id: '3', title: 'Build to Prod'} 29 | ]; 30 | private errorMessage:any = ''; 31 | 32 | onSelect(task) { 33 | this.router.navigate(['/tasks', task.id]); 34 | } 35 | } -------------------------------------------------------------------------------- /app/tasks/tasks-routing.module.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by namita on 7/10/16. 3 | */ 4 | import {NgModule} from '@angular/core'; 5 | import {RouterModule} from '@angular/router'; 6 | import {TasksComponent} from './tasks.component'; 7 | import {TaskDetailComponent} from './task-detail.component'; 8 | import {TasksListComponent} from './tasks-list.component'; 9 | 10 | @NgModule({ 11 | imports: [ 12 | RouterModule.forChild([ 13 | { 14 | path: '', 15 | component: TasksComponent, 16 | children: [ 17 | { 18 | path: '', 19 | component: TasksListComponent 20 | }, 21 | { 22 | path: ':id', 23 | component: TaskDetailComponent, 24 | } 25 | ] 26 | } 27 | ]) 28 | ], 29 | exports: [ 30 | RouterModule 31 | ] 32 | }) 33 | export class TasksRoutingModule { 34 | } -------------------------------------------------------------------------------- /app/tasks/tasks.component.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by NamitaMalik on 9/27/2016. 3 | */ 4 | import {Component} from '@angular/core'; 5 | 6 | @Component({ 7 | template: ` 8 |

Your Tasks

9 | 10 | `, 11 | }) 12 | export class TasksComponent { 13 | } -------------------------------------------------------------------------------- /app/tasks/tasks.module.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by NamitaMalik on 9/27/2016. 3 | */ 4 | import {NgModule} from '@angular/core'; 5 | import {CommonModule} from '@angular/common'; 6 | import {TasksComponent} from './tasks.component'; 7 | import {TaskDetailComponent} from './task-detail.component'; 8 | import {TasksListComponent} from './tasks-list.component'; 9 | import {TasksRoutingModule} from "./tasks-routing.module"; 10 | 11 | @NgModule({ 12 | imports: [ 13 | CommonModule, 14 | TasksRoutingModule 15 | ], 16 | declarations: [ 17 | TasksComponent, 18 | TaskDetailComponent, 19 | TasksListComponent 20 | ] 21 | }) 22 | export class TasksModule { 23 | } -------------------------------------------------------------------------------- /app/users/users-list.component.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by NamitaMalik on 9/28/2016. 3 | */ 4 | import {Component} from '@angular/core'; 5 | 6 | @Component({ 7 | template: ` 8 |
9 | 15 |
16 | `, 17 | }) 18 | 19 | export class UsersListComponent { 20 | private users = [ 21 | {id: '1', name: 'John Doe'}, 22 | {id: '2', name: 'Jane Roe'}, 23 | {id: '3', name: 'John Smith'} 24 | ]; 25 | } -------------------------------------------------------------------------------- /app/users/users-routing.module.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by NamitaMalik on 9/28/2016. 3 | */ 4 | import {NgModule} from '@angular/core'; 5 | import {RouterModule} from '@angular/router'; 6 | import {UsersComponent} from './users.component'; 7 | import {UsersListComponent} from './users-list.component'; 8 | 9 | 10 | @NgModule({ 11 | imports: [ 12 | RouterModule.forChild([ 13 | { 14 | path: '', 15 | component: UsersComponent, 16 | children: [ 17 | { 18 | path: '', 19 | component: UsersListComponent 20 | } 21 | ] 22 | } 23 | ]) 24 | ], 25 | exports: [ 26 | RouterModule 27 | ] 28 | }) 29 | export class UsersRoutingModule { 30 | } -------------------------------------------------------------------------------- /app/users/users.component.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by NamitaMalik on 9/28/2016. 3 | */ 4 | import {Component} from '@angular/core'; 5 | 6 | @Component({ 7 | template: ` 8 |

Users List

9 | 10 | `, 11 | }) 12 | export class UsersComponent { 13 | } -------------------------------------------------------------------------------- /app/users/users.module.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by NamitaMalik on 9/28/2016. 3 | */ 4 | import {NgModule} from '@angular/core'; 5 | import {CommonModule} from '@angular/common'; 6 | import {UsersComponent} from './users.component'; 7 | import {UsersListComponent} from './users-list.component'; 8 | import {UsersRoutingModule} from "./users-routing.module"; 9 | 10 | @NgModule({ 11 | imports: [ 12 | CommonModule, 13 | UsersRoutingModule 14 | ], 15 | declarations: [ 16 | UsersComponent, 17 | UsersListComponent 18 | ] 19 | }) 20 | export class UsersModule { 21 | } -------------------------------------------------------------------------------- /assets/view.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NamitaMalik/Lazy-Loading-with-Angular2-Routing/d40fe5f97052543060248ae3524b421428063430/assets/view.gif -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Lazy Loading with Angular2 Routing 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 21 | 22 | 23 | 24 | Loading... 25 | 26 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "lazy-loading-with-angular2-routing", 3 | "version": "1.0.0", 4 | "scripts": { 5 | "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ", 6 | "lite": "lite-server", 7 | "tsc": "tsc", 8 | "tsc:w": "tsc -w" 9 | }, 10 | "author": "Namita Malik", 11 | "license": "ISC", 12 | "dependencies": { 13 | "@angular/common": "~2.1.1", 14 | "@angular/compiler": "~2.1.1", 15 | "@angular/core": "~2.1.1", 16 | "@angular/forms": "~2.1.1", 17 | "@angular/http": "~2.1.1", 18 | "@angular/platform-browser": "~2.1.1", 19 | "@angular/platform-browser-dynamic": "~2.1.1", 20 | "@angular/router": "~3.1.1", 21 | "@angular/upgrade": "~2.1.1", 22 | "angular-in-memory-web-api": "~0.1.13", 23 | "bootstrap": "^3.3.7", 24 | "core-js": "^2.4.1", 25 | "reflect-metadata": "^0.1.8", 26 | "rxjs": "5.0.0-beta.12", 27 | "systemjs": "0.19.39", 28 | "zone.js": "^0.6.25" 29 | }, 30 | "devDependencies": { 31 | "@types/core-js": "^0.9.34", 32 | "@types/node": "^6.0.45", 33 | "concurrently": "^3.0.0", 34 | "lite-server": "^2.2.2", 35 | "typescript": "^2.0.3" 36 | } 37 | } -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | .bubble { 2 | margin: 0 0 2em 0; 3 | list-style-type: none; 4 | padding: 0; 5 | width: 12em; 6 | } 7 | 8 | .bubble li { 9 | cursor: pointer; 10 | position: relative; 11 | left: 0; 12 | margin: .5em; 13 | padding: .3em .3em; 14 | height: 1.6em; 15 | border-radius: 4px; 16 | background-color: #EEE; 17 | } -------------------------------------------------------------------------------- /systemjs.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * System configuration for Angular samples 3 | * Adjust as necessary for your application needs. 4 | */ 5 | (function (global) { 6 | System.config({ 7 | paths: { 8 | // paths serve as alias 9 | 'npm:': 'node_modules/' 10 | }, 11 | // map tells the System loader where to look for things 12 | map: { 13 | // our app is within the app folder 14 | app: 'app', 15 | // angular bundles 16 | '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 17 | '@angular/common': 'npm:@angular/common/bundles/common.umd.js', 18 | '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', 19 | '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', 20 | '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', 21 | '@angular/http': 'npm:@angular/http/bundles/http.umd.js', 22 | '@angular/router': 'npm:@angular/router/bundles/router.umd.js', 23 | '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', 24 | // other libraries 25 | 'rxjs': 'npm:rxjs', 26 | 'angular-in-memory-web-api': 'npm:angular-in-memory-web-api', 27 | }, 28 | // packages tells the System loader how to load when no filename and/or no extension 29 | packages: { 30 | app: { 31 | main: './main.js', 32 | defaultExtension: 'js' 33 | }, 34 | rxjs: { 35 | defaultExtension: 'js' 36 | }, 37 | 'angular-in-memory-web-api': { 38 | main: './index.js', 39 | defaultExtension: 'js' 40 | } 41 | } 42 | }); 43 | })(this); 44 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "commonjs", 5 | "moduleResolution": "node", 6 | "sourceMap": true, 7 | "emitDecoratorMetadata": true, 8 | "experimentalDecorators": true, 9 | "removeComments": false, 10 | "noImplicitAny": false 11 | } 12 | } 13 | --------------------------------------------------------------------------------