upgradeAdapter.bootstrap throws TypeError: Cannot read property 'injector' of null

I’m submitting a … (check one with “x”)

[X] bug report
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Everything was working OK in 2.0.0-rc.4. I upgrade to rc5 and noticed the new ngModules. I went through and added ng modules along with AppModule where appropriate and instantiated the upgradeAdapter like so:

import { UpgradeAdapter } from '@angular/upgrade';
import { AppModule } from './app.module';

let upgradeAdapter = new UpgradeAdapter(AppModule);

upgradeAdapter.bootstrap(document.body, ['myApp']);

Current behavior

My app fails to bootstrap. The error shown in the javascript console is: upgrade_adapter.js:326 Uncaught TypeError: Cannot read property ‘injector’ of null

Expected/desired behavior

The app bootstraps successfully.

Reproduction of the problem

Am I the only person this fails for? If so, I’ll put something up.

Please tell us about your environment:

• Angular version: 2.0.0-rc.5
• Browser: [ Chrome 52.0.2743.82 ]
• Language: [TypeScript and ES6]

I looked at the code in upgrade_adapter.js that was erroring and noticed that moduleRef gets set after a call to platform_browser_dynamic_1.platformBrowserDynamic(). So I went ahead and added this hoping that’s what I needed to make the null ref error go away:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

platformBrowserDynamic().bootstrapModule(AppModule);

Now I have another error: browser_adapter.js:84EXCEPTION: The module AppModule was bootstrapped, but it does not declare “@NgModule.bootstrap” components nor a “ngDoBootstrap” method. Please define one of these.

import { NgModule } from '@angular/core';
import { BrowserModule  } from '@angular/platform-browser';

import { ComponentModule } from './components/component.module';

@NgModule({
  declarations: [],
  imports: [ BrowserModule, ComponentModule ],
  bootstrap: []
})
export class AppModule {}

The thing is, I don’t have any ng2 components to add here. Currently, my app is mostly ng1 with some ng2 providers that I downgrade to be used in ng1 using the upgradeAdapter. That setup worked in rc4.

[ghost]

I ended up getting it working by following one of the examples in upgrade_adapter.js

var adapter = new UpgradeAdapter(forwardRef(() => MyNg2Module));
var module = angular.module('myExample', []);

module.directive('greet', function() {
  return {
    scope: {salutation: '=', name: '=' },
    template: '{{salutation}} {{name}}! - <span ng-transclude></span>'
  };
});

module.directive('ng2', adapter.downgradeNg2Component(Ng2));

@Component({
  selector: 'ng2',
  template: 'ng2 template: <greet salutation="Hello" [name]="world">text</greet>'
})
class Ng2 {
}

@NgModule({
  declarations: [Ng2, adapter.upgradeNg1Component('greet')],
  imports: [BrowserModule]
})
class MyNg2Module {}

document.body.innerHTML = '<ng2></ng2>';

adapter.bootstrap(document.body, ['myExample']).ready(function() {
  expect(document.body.textContent).toEqual("ng2 template: Hello world! - text");
});

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}