attempt to bootstrap AngularJS app (1.4) - not successful

scottschafer · Mar 31, 2017 · 4b2c7c5 · 4b2c7c5
1 parent 89610d2
commit 4b2c7c5
Show file tree

Hide file tree

Showing 7 changed files with 65 additions and 6 deletions.
diff --git a/.angular-cli.json b/.angular-cli.json
@@ -9,7 +9,8 @@
       "outDir": "dist",
       "assets": [
         "assets",
-        "favicon.ico"
+        "favicon.ico",
+        "ng1app"
       ],
       "index": "index.html",
       "main": "main.ts",

diff --git a/package.json b/package.json
@@ -20,6 +20,7 @@
     "@angular/platform-browser": "^4.0.0",
     "@angular/platform-browser-dynamic": "^4.0.0",
     "@angular/router": "^4.0.0",
+    "@angular/upgrade": "^4.0.0",
     "core-js": "^2.4.1",
     "rxjs": "^5.1.0",
     "zone.js": "^0.8.4"

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -4,6 +4,7 @@ import { FormsModule } from '@angular/forms';
 import { HttpModule } from '@angular/http';
 
 import { AppComponent } from './app.component';
+import { UpgradeModule } from '@angular/upgrade/static';
 
 @NgModule({
   declarations: [
@@ -12,9 +13,13 @@ import { AppComponent } from './app.component';
   imports: [
     BrowserModule,
     FormsModule,
-    HttpModule
+    HttpModule,
+    UpgradeModule
   ],
-  providers: [],
-  bootstrap: [AppComponent]
+  providers: [] /*,
+  bootstrap: [AppComponent] */
 })
-export class AppModule { }
+export class AppModule {
+  ngDoBootstrap() {}
+
+}
diff --git a/src/index.html b/src/index.html
@@ -7,8 +7,25 @@
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+
+  <!-- IMPORTED FROM NG1-INDEX.HTML -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
+  <script src="./ng1app/ng1-script.js"></script>
+
 </head>
+
+<!-- ANGULAR2-CLI GENERATED:
+
 <body>
   <app-root>Loading...</app-root>
 </body>
+-->
+
+<!-- IMPORTED FROM NG1-INDEX.HTML -->
+<body>
+  <div ng-controller="Ng1Ctrl">
+    {{angular1Msg}}
+  </div>
+</body>
+
 </html>
diff --git a/src/main.ts b/src/main.ts
@@ -3,9 +3,15 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
 import { AppModule } from './app/app.module';
 import { environment } from './environments/environment';
+import { UpgradeModule } from '@angular/upgrade/static';
 
 if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule);
+//platformBrowserDynamic().bootstrapModule(AppModule);
+
+platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
+  const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
+  upgrade.bootstrap(document.body, ['ng1app'], {strictDi: true});
+});
diff --git a/src/ng1app/ng1-index.html b/src/ng1app/ng1-index.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<html ng-app="ng1app">
+<head>
+  <meta charset="utf-8">
+  <title>Test NG1 app </title>
+  <meta name="description" content="">
+  <meta name="viewport" content="width=device-width">
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
+  <script src="ng1-script.js"></script>
+</head>
+
+<body>
+  <div ng-controller="Ng1Ctrl">
+    {{angular1Msg}}
+  </div>
+</body>
+
+</html>
diff --git a/src/ng1app/ng1-script.js b/src/ng1app/ng1-script.js
@@ -0,0 +1,10 @@
+(function () {
+  'use strict';
+
+angular.module('ng1app', [])
+    .controller('Ng1Ctrl', ['$scope',
+      function ($scope) {
+          $scope.angular1Msg = 'Greetings from Angular 1';
+      }]);
+
+})();