diff --git a/README.md b/README.md index 7a334a4..995c7e0 100644 --- a/README.md +++ b/README.md @@ -77,4 +77,12 @@ The application is a simple contacts application where you can search, create or - Use `for..of` instead of `angular.forEach` - Use `Promise` instead of `$q` - Use `service` instead of `factory` - \ No newline at end of file + + +### Step 6 - Dual Boot + +- Add Angular dependencies to `package.json` +- Add `polyfills.ts` file +- Remove `ng-app` from `index.html` file +- Add polyfills, `NgModule` and hybrid bootstrap code to `app.main.ts` + diff --git a/package.json b/package.json index 66754ea..0aabbd2 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,19 @@ "author": "", "license": "ISC", "dependencies": { + "@angular/common": "^4.0.0", + "@angular/compiler": "^4.0.0", + "@angular/core": "^4.0.0", + "@angular/forms": "^4.0.0", + "@angular/http": "^4.0.0", + "@angular/upgrade": "^4.0.0", + "@angular/platform-browser": "^4.0.0", + "@angular/platform-browser-dynamic": "^4.0.0", + "@angular/router": "^4.0.0", + "core-js": "^2.4.1", + "rxjs": "^5.1.0", + "zone.js": "^0.8.4", + "angular": "^1.6.2", "angular-animate": "^1.6.2", "angular-auto-validate": "^1.19.0", diff --git a/src/app/main.ts b/src/app/main.ts index 1860991..b52417c 100644 --- a/src/app/main.ts +++ b/src/app/main.ts @@ -11,8 +11,31 @@ import 'angular-ui-router'; import './app.main'; import './services'; -import './directives'; import './filters'; import './components'; import './app.routes'; +import './polyfills.ts'; +import {NgModule} from '@angular/core'; +import {BrowserModule} from '@angular/platform-browser'; +import {UpgradeModule} from '@angular/upgrade/static'; +import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; + +@NgModule({ + imports: [ + BrowserModule, + UpgradeModule + ] +}) +export class AppModule { + // Override Angular bootstrap so it doesn't do anything + ngDoBootstrap() { + } +} + +// Bootstrap using the UpgradeModule +platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => { + console.log("Bootstrapping in Hybrid mode with Angular & AngularJS"); + const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule; + upgrade.bootstrap(document.body, ['codecraft']); +}); \ No newline at end of file diff --git a/src/app/polyfills.ts b/src/app/polyfills.ts new file mode 100644 index 0000000..a7fd714 --- /dev/null +++ b/src/app/polyfills.ts @@ -0,0 +1,19 @@ +// This file includes polyfills needed by Angular and is loaded before +// the app. You can add your own extra polyfills to this file. +import 'core-js/es6/symbol'; +import 'core-js/es6/object'; +import 'core-js/es6/function'; +import 'core-js/es6/parse-int'; +import 'core-js/es6/parse-float'; +import 'core-js/es6/number'; +import 'core-js/es6/math'; +import 'core-js/es6/string'; +import 'core-js/es6/date'; +import 'core-js/es6/array'; +import 'core-js/es6/regexp'; +import 'core-js/es6/map'; +import 'core-js/es6/set'; +import 'core-js/es6/reflect'; + +import 'core-js/es7/reflect'; +import 'zone.js/dist/zone'; \ No newline at end of file diff --git a/src/index.html b/src/index.html index 5073dbf..7afcd4b 100644 --- a/src/index.html +++ b/src/index.html @@ -1,6 +1,5 @@ - + Contacts