Step 10

README.md

@@ -132,3 +132,14 @@ The application is a simple contacts application where you can search, create or
 - We replace `UIRouterState` with `Router` instead of `this.$state.go(...)` we use `this.router.navigate([...])`
 - We add the `RouterModule` to `NgModule` and provide the routes.
 
+### Step 10 - Remove AngularJS
+
+If we refer to AngularJS anywhere via an import this will be pulled into the final build by webpack, so we go through the code and make sure all references to AngularJS are removed.
+
+- Search for and remove `import * as angular from "angular";` as well as all downgrade code.
+- Remove `ajs-upgraded-providers.ts` and all usages
+- Remove angular imports from `main.ts`
+- Remove `app.main.ts`
+- Remove AngularJS packages from `package.json`
+- Remove `bower.json` and delete libs folder
+

package.json

@@ -26,28 +26,17 @@
     "zone.js": "^0.8.4",
     "reflect-metadata": "^0.1.10",
 
-    "angular": "^1.6.2",
-    "angular-animate": "^1.6.2",
-    "angular-auto-validate": "^1.19.0",
-    "angular-ladda": "^0.4.3",
-    "angular-resource": "^1.6.2",
-    "angular-strap": "^2.3.12",
-    "angularjs-toaster": "^2.1.0",
     "bootstrap": "3.3.2",
     "bootstrap-additions": "0.3.1",
     "font-awesome": "4.3.0",
     "jquery": "2.1.3",
-    "ng-infinite-scroll": "1.2.1",
-    "angular-ui-router": "^0.4.2",
-    "angular-spinner": "^1.0.1",
 
     "angular2-toaster": "^2.0.0",
     "angular2-infinite-scroll": "^0.3.3",
     "angular2-ladda": "^1.1.1",
     "spin.js": "^2.3.2"
   },
   "devDependencies": {
-    "@types/angular": "^1.6.2",
     "@types/spin.js": "^2.3.0",
     "bower": "^1.8.0",
     "json-server": "^0.9.6",

src/app/components/person-create.component.ts

@@ -1,6 +1,4 @@
-import * as angular from "angular";
-
-import {Component, Inject} from "@angular/core";
+import {Component} from "@angular/core";
 import {Router} from "@angular/router";
 import {ContactService} from "../services/contact.service";
 

src/app/components/person-edit.component.ts

@@ -1,7 +1,6 @@
-import {Component, Inject} from "@angular/core";
+import {Component} from "@angular/core";
 import {Router, ActivatedRoute} from "@angular/router";
 import {ContactService} from "../services/contact.service";
-import {UIRouterStateParams, UIRouterState} from "../ajs-upgraded-providers";
 
 
 @Component({

src/app/components/person-list.component.ts

@@ -1,6 +1,4 @@
-import * as angular from 'angular';
 import {Component} from "@angular/core";
-import {downgradeComponent} from "@angular/upgrade/static";
 import {ContactService} from "../services/contact.service";
 
 @Component({
@@ -39,11 +37,4 @@ export class PersonListComponent {
     console.log("loadMore");
     this.contacts.loadMore();
   }
-}
-
-
-angular
-    .module('codecraft')
-    .directive('personList', downgradeComponent({
-      component: PersonListComponent
-    }) as angular.IDirectiveFactory);
+}

src/app/components/search.component.ts

@@ -1,7 +1,4 @@
-import * as angular from 'angular';
-
 import {Component} from "@angular/core";
-import {downgradeComponent} from "@angular/upgrade/static";
 import {ContactService} from "../services/contact.service";
 import {
     FormGroup,
@@ -64,10 +61,3 @@ export class SearchComponent {
         });
   }
 }
-
-
-angular
-    .module('codecraft')
-    .directive('search', downgradeComponent({
-      component: SearchComponent
-    }) as angular.IDirectiveFactory);

src/app/main.ts

@@ -1,21 +1,4 @@
-import 'angular';
-import 'angular-resource';
-import 'angular-animate';
-import 'ng-infinite-scroll';
-import 'angular-spinner';
-import 'angular-auto-validate/dist/jcs-auto-validate';
-import 'angular-ladda';
-import 'angular-strap';
-import 'angularjs-toaster';
-import 'angular-ui-router';
-
 import 'reflect-metadata';
-
-import './app.main';
-import './services';
-import './pipes';
-import './components';
-import './app.routes';
 import './polyfills.ts';
 import './rxjs-operators.ts';
 

src/app/services/contact.service.ts

@@ -1,7 +1,4 @@
-import * as angular from 'angular';
-
-import {Injectable, Inject} from "@angular/core";
-import {downgradeInjectable} from '@angular/upgrade/static';
+import {Injectable} from "@angular/core";
 import {Contact} from "./contact.resource";
 import {ToasterService} from 'angular2-toaster';
 
@@ -108,8 +105,4 @@ export class ContactService {
     });
   };
 
-}
-
-angular
-    .module('codecraft')
-    .factory('ContactService', downgradeInjectable(ContactService));
+}