Step 1: boot a hybrid app using both frameworks

README.md

@@ -8,3 +8,50 @@ This project was generated with [Angular CLI](https://github.com/angular/angular
     ```bash
     $ ng new angularjs-to-angular
     ```
+
+## Step 1: Boot your hybrid app using both frameworks
+
+1.  Install AngularJS:
+    ```bash
+    $ npm install angular
+    $ npm install --save-dev @types/angular
+    ```
+2.  Install Angular Upgrade package:
+    ```bash
+    $ npm install @angular/upgrade
+    ```
+3.  Create a folder named **ajs-app** for the AngularJS module.
+4.  Create an AngularJS module named **ajsApp** for the root component and future AngularJS features.
+5.  Create a basic AngularJS component named **ajs-root** with the following template content `<app-root></app-root>`. This will be our new root component and will replace **app-root** as the application root. Include it in your AngularJS root module.
+6.  In `app.module.ts`:
+    - Import `UpgradeModule` from `@angular/upgrade/static` and add it to the NgModule imports array.
+    - Move the `AppComponent` from the `bootstrap` array to the `entryComponents` array in the `NgModule` declaration.
+    - Add a constructor to the AppModule class:
+
+      ```typescript
+      constructor(@Inject(UpgradeModule) public upgrade: UpgradeModule) {}
+      ```
+
+    - Implement a function named `ngDoBootstrap` in the AppModule class. This bootstraps programmatically the AngularJS app:
+
+      ```typescript
+      ngDoBootstrap() {
+        this.upgrade.bootstrap(document.body, [ajsAppModule.name]);
+      }
+      ```
+
+7.  In `main.ts` import `angular` and the `setAngularJSGlobal` function and call it:
+
+    ```typescript
+    setAngularJSGlobal(angular);
+    ```
+
+8.  In your AngularJS root module declare a new **directive** called `ajsRoot` and use the `downgradeComponent` function with `AppComponent`:
+
+    ```typescript
+    ajsAppModule.directive('ajsRoot', downgradeComponent({ component: AppComponent }));
+    ```
+
+9.  Replace `<app-root></app-root>` with `<ajs-root></ajs-root>` in your `index.html`.
+10. Run `ng serve --open`, you should see the same page of a newly generated Angular CLI project. It's the original `app-root` component, wrapped inside the `<ajs-root>` AngularJS component. This means you have successfully booted your hybrid app.
+

package.json

@@ -20,6 +20,8 @@
     "@angular/platform-browser": "^6.0.3",
     "@angular/platform-browser-dynamic": "^6.0.3",
     "@angular/router": "^6.0.3",
+    "@angular/upgrade": "^6.0.5",
+    "angular": "^1.7.2",
     "core-js": "^2.5.4",
     "rxjs": "^6.0.0",
     "zone.js": "^0.8.26"
@@ -29,6 +31,7 @@
     "@angular/cli": "~6.0.7",
     "@angular/compiler-cli": "^6.0.3",
     "@angular/language-service": "^6.0.3",
+    "@types/angular": "^1.6.47",
     "@types/jasmine": "~2.8.6",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "~8.9.4",

src/app/ajs-app/ajs-app.module.ts

@@ -0,0 +1,14 @@
+import * as ng from 'angular';
+import { ajsRootComponent } from './ajs-root.component';
+import { downgradeComponent } from '@angular/upgrade/static';
+import { AppComponent } from '../app.component';
+
+declare var angular: ng.IAngularStatic;
+
+export const ajsAppModule = angular.module('ajsApp', []);
+
+// New application root
+ajsAppModule.component('ajsRoot', ajsRootComponent);
+
+// Downgrade app-root component so we can use it in AngularJS
+ajsAppModule.directive('appRoot', downgradeComponent({ component: AppComponent }));

src/app/ajs-app/ajs-root.component.ts

@@ -0,0 +1,5 @@
+import * as ng from 'angular';
+
+export const ajsRootComponent: ng.IComponentOptions = {
+  template: `<app-root></app-root>`,
+};

src/app/app.module.ts

@@ -1,12 +1,24 @@
 import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
+import { Inject, NgModule } from '@angular/core';
 
 import { AppComponent } from './app.component';
+import { UpgradeModule } from '@angular/upgrade/static';
+import { ajsAppModule } from './ajs-app/ajs-app.module';
 
 @NgModule({
   declarations: [AppComponent],
-  imports: [BrowserModule],
+  imports: [BrowserModule, UpgradeModule],
   providers: [],
-  bootstrap: [AppComponent]
+  bootstrap: [],
+  entryComponents: [AppComponent],
 })
-export class AppModule {}
+export class AppModule {
+  constructor(@Inject(UpgradeModule) public upgrade: UpgradeModule) {}
+
+  /***
+   * This function is called after the module has been bootstrapped
+   */
+  ngDoBootstrap() {
+    this.upgrade.bootstrap(document.body, [ajsAppModule.name]);
+  }
+}

src/index.html

@@ -9,6 +9,6 @@
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
 <body>
-  <app-root></app-root>
+  <ajs-root></ajs-root>
 </body>
 </html>

src/main.ts

@@ -1,8 +1,12 @@
 import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
+import * as angular from 'angular';
 import { AppModule } from './app/app.module';
 import { environment } from './environments/environment';
+import { setAngularJSGlobal } from '@angular/upgrade/static';
+
+// Avoid 'angular is not defined' error
+setAngularJSGlobal(angular);
 
 if (environment.production) {
   enableProdMode();