still problems wiith the $injector when calling the super to upgrade a component

correasebastian · correasebastian · commit 0386e8cdf933 · 2017-06-30T08:57:52.000-07:00
diff --git a/ng1/app.js b/ng1/app.js
@@ -4,8 +4,8 @@
     .module('demo', [])
     .component('ng1AppComponent', {
       template: '<div>Hi</div>',
-      controller: function (sessionService) {
-        console.log(sessionService.get())
+      controller: function () {
+        console.log('hi from ng1AppComponent')
       }
     })
     .component('ng1FooComponent', {
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -1,16 +1,58 @@
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
 
-import { AppComponent } from './app.component';
+import { NgModule, Inject, Injectable, Component, Directive, Injector, ElementRef } from '@angular/core'
+import { BrowserModule } from '@angular/platform-browser'
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { UpgradeModule, downgradeInjectable, UpgradeComponent } from '@angular/upgrade/static';
+
+// import { AppComponent } from './app.component';
+
+// @NgModule({
+//   declarations: [
+//     AppComponent
+//   ],
+//   imports: [
+//     BrowserModule
+//   ],
+//   providers: [],
+//   bootstrap: [AppComponent]
+// })
+// export class AppModule { }
+
+@Directive({
+  // tslint:disable-next-line:directive-selector
+  selector: 'ng1-foo-component'
+})
+export class Ng1FooDirective extends UpgradeComponent {
+  constructor(elementRef: ElementRef, injector: Injector) {
+    super('ng1FooComponent', elementRef, injector);
+  }
+}
+
+
+@Component({
+  // tslint:disable-next-line:component-selector
+  selector: 'root-component',
+  template: '<div>Root</div><ng1-foo-component></ng1-foo-component>'
+})
+export class RootComponent {
+    constructor() {
+      console.log('RootComponent')
+    }
+}
+
 
 @NgModule({
-  declarations: [
-    AppComponent
-  ],
-  imports: [
-    BrowserModule
-  ],
-  providers: [],
-  bootstrap: [AppComponent]
+  imports: [ BrowserModule, UpgradeModule ],
+  declarations: [ RootComponent, Ng1FooDirective ],
+  bootstrap: [ RootComponent ]
 })
-export class AppModule { }
+export class AppModule {
+  constructor(private upgrade: UpgradeModule) {
+  }
+
+  ngDoBootstrap() {
+    // this.upgrade.bootstrap(document.body, ['demo'], { strictDi: true });
+  }
+}
+
+
diff --git a/src/index.html b/src/index.html
@@ -9,6 +9,6 @@
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
 <body>
-  <app-root></app-root>
+  <root-component>loading...</root-component>
 </body>
 </html>
diff --git a/src/main.ts b/src/main.ts
@@ -3,9 +3,21 @@ 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(ref => {
+    // Once Angular bootstrap is complete then we bootstrap the AngularJS module
+    const upgrade = ref.injector.get(UpgradeModule) as UpgradeModule;
+
+    upgrade.bootstrap(document.body, ['demo']);
+  });
+  // platformBrowserDynamic().bootstrapModule(AppModule);
+
+
