angular: Angular2 UpgradeComponent missing $injector
I’m submitting a …
[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
Current behavior
I was following the Upgrade documentation to upgrade an Angular1 Component to Angular2: https://angular.io/docs/ts/latest/guide/upgrade.html
When using @angular 2.2.1’s UpgradeComponent, it gives an error saying this.$injector is not found in upgrade_component.js
Upon closer inspection… Line 97 of upgrade_component.js is undefined:
Minimal reproduction of the problem with instructions
Minimal Demo is created using angular-cli, with only one filed added: https://github.com/dolanmiu/angular2-upgrade-test
https://github.com/dolanmiu/angular2-upgrade-test/blob/master/src/app/chart/chart.component.ts
The corresponding .ts file is here:
https://github.com/angular/angular/blob/master/modules/@angular/upgrade/src/aot/upgrade_component.ts#L121
What is the motivation / use case for changing the behavior?
I need to upgrade old existing Angular1 code into Angular2
Please tell us about your environment:
- Angular version: 2.2.1
- Browser: [all | Chrome]
-
Language: [all | TypeScript]
-
Node (for AoT issues):
node --version= 6.9.1
About this issue
- Original URL
- State: closed
- Created 8 years ago
- Reactions: 8
- Comments: 20 (3 by maintainers)
If you are using
upgrade/staticthen you should only move theAppComponentto theentryComponentsand not put anything insidengDoBootstrap. The Angular 1 app will be responsible for instantiating the downgradedAppComponentWell, and there is another scenario in which $injector is undefined.
https://plnkr.co/edit/eq8VXrAnMWExTDdZJEF6
When we inject an upgraded service (e.g. $rootScope) into a downgraded service (in this example, MyService) and inject MyService into a run() block, then MyService is constructed with $injector still undefined.
I’ve encountered the same issue and spent half a day on it until I found what’s wrong.
https://plnkr.co/edit/ocxuE39B7Aci8wmSNEJJ
Problem is with ngOnInit lifecycle method. When you put it on a ng2 service that injects upgraded services, factory for this upgraded service is called sooner (during bootstrapModule, not in upgrade.bootstrap as it should, so $injector is not available).
I cannot reopen this issue. I can report a new bug if you want.
So for many of the people in this thread, I believe the problem comes from providing a
bootstrapcomponent in yourAppModule. For example, here https://github.com/vladotesanovic/ui-grid-angular2/blob/master/src/app/app.module.ts#L52What happens in this case is that when we bootstrap the AppModule, via
platform.bootstrapModule(AppModule)(https://github.com/vladotesanovic/ui-grid-angular2/blob/master/src/main.ts#L18) it immediately tries to boot up theAppComponent, instead of waiting for the Angular 1 bits to do their bootstrap.We should not have any components in the
bootstrapproperty of theAppModule.@dolanmiu I had the same issue but with SystemJs. If you read the upgrade docs carefully it states that you always have to take an angular 1 component as root and use a downgraded angular 2 component in it to bootstrap a hybrid A1/A2 app. From that angular 2 component you can normally use Angular 2 components.
The key is every time you go from a A1 context to an A2 context or the other way arround, you have to up or downgrade components to the parent context level. Once down or upgraded you can use other components living in the same A1 or A2 context.
The reason the $injector is undefined is because you are boostrapping A1 and A2 seperately. You have to have a root A1 component which has the root A2 component in it’s template to boostrap the A2 context.