Upgrade the projec to Angular 2 RC1.

mosh-hamedani · May 18, 2016 · 331127c · 331127c · rakeshkumar125 · Dec 30, 2017
1 parent f81c7ca
commit 331127c
Show file tree

Hide file tree

Showing 18 changed files with 94 additions and 59 deletions.
diff --git a/app/app.component.ts b/app/app.component.ts
@@ -1,5 +1,5 @@
-import {Component} from 'angular2/core';
-import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
+import {Component} from '@angular/core';
+import {RouteConfig, ROUTER_DIRECTIVES} from '@angular/router-deprecated';
 
 import {NavBarComponent} from './navbar.component';
 import {HomeComponent} from './home.component';

diff --git a/app/boot.ts b/app/boot.ts
@@ -1,6 +1,6 @@
-import {bootstrap}    from 'angular2/platform/browser';
-import {ROUTER_PROVIDERS} from 'angular2/router';
-import {HTTP_PROVIDERS} from 'angular2/http';
+import {bootstrap}    from '@angular/platform-browser-dynamic';
+import {ROUTER_PROVIDERS} from '@angular/router-deprecated';
+import {HTTP_PROVIDERS} from '@angular/http';
 
 import {AppComponent} from './app.component';
 

diff --git a/app/home.component.ts b/app/home.component.ts
@@ -1,4 +1,4 @@
-import {Component, OnInit} from 'angular2/core';
+import {Component, OnInit} from '@angular/core';
 
 @Component({
     template: '<h1>Home</h1>'

diff --git a/app/navbar.component.ts b/app/navbar.component.ts
@@ -1,5 +1,5 @@
-import {Component} from 'angular2/core';
-import {ROUTER_DIRECTIVES, Router} from 'angular2/router';
+import {Component} from '@angular/core';
+import {ROUTER_DIRECTIVES, Router} from '@angular/router-deprecated';
 
 @Component({
     selector: 'navbar',

diff --git a/app/not-found.component.ts b/app/not-found.component.ts
@@ -1,4 +1,4 @@
-import {Component} from 'angular2/core';
+import {Component} from '@angular/core';
 
 @Component({
     template: `

diff --git a/app/posts/post.service.ts b/app/posts/post.service.ts
@@ -1,5 +1,5 @@
-import {Injectable} from 'angular2/core';
-import {Http} from 'angular2/http';
+import {Injectable} from '@angular/core';
+import {Http} from '@angular/http';
 import 'rxjs/add/operator/map';
 
 @Injectable()

diff --git a/app/posts/posts.component.html b/app/posts/posts.component.html
@@ -3,14 +3,14 @@ <h1>Posts</h1>
     <div class="col-md-6">
         <select class="form-control" (change)="reloadPosts({ userId: u.value })" #u>
             <option value="">Select a user...</option>
-            <option *ngFor="#user of users" value="{{ user.id }}">
+            <option *ngFor="let user of users" value="{{ user.id }}">
                 {{ user.name }}
             </option>
         </select>
         <spinner [visible]="postsLoading"></spinner>
         <pagination [items]="posts" (page-changed)="onPageChanged($event)"></pagination>
         <ul class="list-group posts">
-            <li *ngFor="#post of pagedPosts" class="list-group-item" [class.active]="currentPost == post" (click)="select(post)">
+            <li *ngFor="let post of pagedPosts" class="list-group-item" [class.active]="currentPost == post" (click)="select(post)">
                 {{ post.title }}
             </li>
         </ul>
@@ -24,7 +24,7 @@ <h3 class="panel-title">{{ currentPost.title }}</h3>
                 <p>{{ currentPost.body }}</p>
                 <hr/>
                 <spinner [visible]="commentsLoading"></spinner>
-                <div class="media" *ngFor="#comment of currentPost.comments">
+                <div class="media" *ngFor="let comment of currentPost.comments">
                     <div class="media-left">
                         <a href="#">
                             <img class="media-object thumbnail" src="http://lorempixel.com/80/80/people?random={{ comment.id }}" alt="...">

diff --git a/app/posts/posts.component.ts b/app/posts/posts.component.ts
@@ -1,4 +1,4 @@
-import {Component, OnInit} from 'angular2/core';
+import {Component, OnInit} from '@angular/core';
 
 import {PostService} from './post.service';
 import {UserService} from '../users/user.service';

diff --git a/app/shared/basicValidators.ts b/app/shared/basicValidators.ts
@@ -1,4 +1,4 @@
-import {Control} from 'angular2/common';
+import {Control} from '@angular/common';
 
 export class BasicValidators{
     static email(control: Control){

diff --git a/app/shared/pagination.component.ts b/app/shared/pagination.component.ts
@@ -1,5 +1,5 @@
-import {Component, Input, Output, EventEmitter} from 'angular2/core';
-import {OnChanges} from 'angular2/core';
+import {Component, Input, Output, EventEmitter} from '@angular/core';
+import {OnChanges} from '@angular/core';
 
 @Component({
 	selector: 'pagination',
@@ -11,7 +11,7 @@ import {OnChanges} from 'angular2/core';
                 <span aria-hidden="true">&laquo;</span>
                 </a>
             </li>
-            <li [class.active]="currentPage == page" *ngFor="#page of pages" (click)="changePage(page)">
+            <li [class.active]="currentPage == page" *ngFor="let page of pages" (click)="changePage(page)">
                 <a>{{ page }}</a>
             </li>
             <li [class.disabled]="currentPage == pages.length">

diff --git a/app/shared/spinner.component.ts b/app/shared/spinner.component.ts
@@ -1,4 +1,4 @@
-import {Component, Input} from 'angular2/core';
+import {Component, Input} from '@angular/core';
 
 @Component({
     selector: 'spinner',

diff --git a/app/users/user-form.component.ts b/app/users/user-form.component.ts
@@ -1,6 +1,6 @@
-import {Component, OnInit} from 'angular2/core';
-import {FormBuilder, ControlGroup, Validators} from 'angular2/common';
-import {CanDeactivate, Router, RouteParams} from 'angular2/router';
+import {Component, OnInit} from '@angular/core';
+import {FormBuilder, ControlGroup, Validators} from '@angular/common';
+import {CanDeactivate, Router, RouteParams} from '@angular/router-deprecated';
 
 import {BasicValidators} from '../shared/basicValidators';
 import {UserService} from './user.service';

diff --git a/app/users/user.service.ts b/app/users/user.service.ts
@@ -1,5 +1,5 @@
-import {Injectable} from 'angular2/core';
-import {Http} from 'angular2/http';
+import {Injectable} from '@angular/core';
+import {Http} from '@angular/http';
 import 'rxjs/add/operator/map';
 
 @Injectable()

diff --git a/app/users/users.component.html b/app/users/users.component.html
@@ -12,7 +12,7 @@ <h1>Users</h1>
 		</tr>
 	</thead>
 	<tbody>
-		<tr *ngFor="#user of users">
+		<tr *ngFor="let user of users">
 			<td>{{ user.name }}</td>
 			<td>{{ user.email }}</td>
 			<td>

diff --git a/app/users/users.component.ts b/app/users/users.component.ts
@@ -1,5 +1,5 @@
-import {Component, OnInit} from 'angular2/core';
-import {RouterLink} from 'angular2/router';
+import {Component, OnInit} from '@angular/core';
+import {RouterLink} from '@angular/router-deprecated';
 
 import {UserService} from './user.service';
 

diff --git a/index.html b/index.html
@@ -11,30 +11,20 @@
     <!-- 1. Load libraries -->
     <!-- IE required polyfills, in this exact order -->
     <script src="node_modules/es6-shim/es6-shim.min.js"></script>
-    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
 
-    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/reflect-metadata/Reflect.js"></script>
     <script src="node_modules/systemjs/dist/system.src.js"></script>
-    <script src="node_modules/rxjs/bundles/Rx.js"></script>
-    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
-    <script src="node_modules/angular2/bundles/router.dev.js"></script>
-    <script src="node_modules/angular2/bundles/http.dev.js"></script>
+
     <script src="node_modules/underscore/underscore.js"></script>
 
     <!-- 2. Configure SystemJS -->
+    <script src="systemjs.config.js"></script>
     <script>
-      System.config({
-        packages: {        
-          app: {
-            format: 'register',
-            defaultExtension: 'js'
-          }
-        }
-      });
-      System.import('app/boot')
-            .then(null, console.error.bind(console));
+      System.import('app').catch(function(err){ console.error(err); });
     </script>
 
+
   </head>
 
   <!-- 3. Display the application -->

diff --git a/package.json b/package.json
@@ -2,28 +2,37 @@
   "name": "angular2-quickstart",
   "version": "1.0.0",
   "scripts": {
-    "postinstall": "npm run typings install",
+    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
+    "lite": "lite-server",
+    "postinstall": "typings install",
     "tsc": "tsc",
     "tsc:w": "tsc -w",
-    "lite": "lite-server",
-    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" ",
     "typings": "typings"
   },
   "license": "ISC",
   "dependencies": {
-    "angular2": "2.0.0-beta.6",
-    "es6-promise": "^3.0.2",
-    "es6-shim": "^0.33.3",
-    "reflect-metadata": "0.1.2",
-    "rxjs": "5.0.0-beta.0",
-    "systemjs": "0.19.20",
-    "underscore": "^1.8.3",
-    "zone.js": "0.5.14"
+    "@angular/common":  "2.0.0-rc.1",
+    "@angular/compiler":  "2.0.0-rc.1",
+    "@angular/core":  "2.0.0-rc.1",
+    "@angular/http":  "2.0.0-rc.1",
+    "@angular/platform-browser":  "2.0.0-rc.1",
+    "@angular/platform-browser-dynamic":  "2.0.0-rc.1",
+    "@angular/router":  "2.0.0-rc.1",
+    "@angular/router-deprecated":  "2.0.0-rc.1",
+    "@angular/upgrade":  "2.0.0-rc.1",
+    "systemjs": "0.19.27",
+    "es6-shim": "^0.35.0",
+    "reflect-metadata": "^0.1.3",
+    "rxjs": "5.0.0-beta.6",
+    "zone.js": "^0.6.12",
+    "angular2-in-memory-web-api": "0.0.7",
+    "bootstrap": "^3.3.6",
+    "underscore": "^1.8.3"
   },
   "devDependencies": {
-    "concurrently": "^1.0.0",
-    "lite-server": "^2.0.1",
-    "typescript": "^1.7.5",
-    "typings": "^0.6.8"
+    "concurrently": "^2.0.0",
+    "lite-server": "^2.2.0",
+    "typescript": "^1.8.10",
+    "typings":"^0.8.1"
   }
 }
diff --git a/systemjs.config.js b/systemjs.config.js
@@ -0,0 +1,36 @@
+(function(global) {
+  // map tells the System loader where to look for things
+  var map = {
+    'app':                        'app', // 'dist',
+    'rxjs':                       'node_modules/rxjs',
+    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
+    '@angular':                   'node_modules/@angular'
+  };
+  // packages tells the System loader how to load when no filename and/or no extension
+  var packages = {
+    'app':                        { main: 'boot.js',  defaultExtension: 'js' },
+    'rxjs':                       { defaultExtension: 'js' },
+    'angular2-in-memory-web-api': { defaultExtension: 'js' },
+  };
+  var packageNames = [
+    '@angular/common',
+    '@angular/compiler',
+    '@angular/core',
+    '@angular/http',
+    '@angular/platform-browser',
+    '@angular/platform-browser-dynamic',
+    '@angular/router',
+    '@angular/router-deprecated',
+    '@angular/testing',
+    '@angular/upgrade',
+  ];
+  // add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
+  packageNames.forEach(function(pkgName) {
+    packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
+  });
+  var config = {
+    map: map,
+    packages: packages
+  }
+  System.config(config);
+})(this);