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

[ghost]

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");
});

[ptomaszi]

What about upgrading Angular 1 providers? Should I add the following to the NgModule metadata?

providers: [ adapter.upgradeNg1Provider('token') ]

Any suggestions?

[dparish]

@ptomaszi I'm where you are. I got past my MANY MANY other errors related to RC5 and UpgradeAdapter, but now am getting a "No provider for ..." for my angular 1 services. This of course was all working on RC4.

You can't use:

adapter.upgradeNg1Provider('token')

As upgradeNg1Provider returns void.

[marcalj]

@dparish see #10723 (comment) to know how to use forwardRefreference.

[dparish]

@marcalj I'll try that. I can see that you are using a const to give access to the upgradeAdapter to the rest of the code base.

export const upgradeAdapter = new UpgradeAdapter(forwardRef(() => WebsaysDashboardModule));

Are you then referencing upgradeAdapter from the rest of the app or creating a new instance of upgradeAdapter in other portions of the app?

[marcalj]

@dparish Referencing it, for example:

import {upgradeAdapter} from './app.module';

upgradeAdapter.upgradeNg1Provider('$filter');

[jtomaszewski]

This bug is the same as #10879 . Some workarounds are posted there.

Although the setTimeout workaround is not really nice. Because of it, I can't use angular.run() callbacks that use any kind of services that are or depend on ng2 downgraded services, as it will issue the bug.

[angular-automatic-lock-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.}