Hybrid mode doesn't allow NG1 upgrades after app is bootstrapped.

[prasikumbhare]

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

Current behavior
Loading a component dynamically using ViewContainerRef.createComponent() fails in case of ng1 child component. The issue here is NG2 component being loaded dynamically contains an NG1 child component. And Upgrade Adapter fails to bind the scope of upgraded NG1 component throwing below exception.

EXCEPTION: Error: Uncaught (in promise): EXCEPTION: Error in ./DynamicComponent class DynamicComponent - inline template:0:0
ORIGINAL EXCEPTION: TypeError: Cannot read property 'scope' of null
ORIGINAL STACKTRACE:
TypeError: Cannot read property 'scope' of null
    at new UpgradeNg1ComponentAdapter (https://npmcdn.com/@angular/upgrade@2.0.0-rc.4/bundles/upgrade.umd.js:440:57)
    at new UpgradeNg1ComponentAdapterBuilder.type._angular_core.Directive.Class.constructor (https://npmcdn.com/@angular/upgrade@2.0.0-rc.4/bundles/upgrade.umd.js:293:36)
    at DebugAppView._View_DynamicComponent0.createInternal rc.4/bundles/core.umd.js:12207:48)

Expected/desired behavior
It should be possible to load a ng1 component dynamically in hybrid mode. Upgrade Adapter should allow NG1 upgrades even after app is bootstrapped.

Reproduction of the problem
Here is the plunker : https://plnkr.co/edit/HADJILztGEELg5lavfvP?p=preview

What is the expected behavior?
It should be possible to load a ng1 component dynamically in hybrid mode.

What is the motivation / use case for changing the behavior?
Due to this issue, it's not possible to (re) use the ng1 components inside ng2 app.

Please tell us about your environment:

• Angular version: 2.0.0-rc.4
• Browser: [Chrome 51 ]
  Version 51.0.2704.106 m
• Language: [all | TypeScript 1.8 | ES5 ]

[prasikumbhare]

OK .. figured out the problem.. the problem is with UpgradeAdapter. It does not allow upgrades after app is bootstrapped. Unfortunately this requires to know all the components to be upgraded upfront before app is bootstrapped. Here is a working plunker with NG1 component (to be loaded dynamically) pre-upgraded before UpgradeAdapter.bootstrap().
Upgrade adapters needs to allow dynamic upgrades..

[prasikumbhare]

I have fixed it locally in UpgradeAdapter code.
Here is the plunker with local fix in "angular2/upgradeRC4/bundles/upgrade.umd.js" :
https://plnkr.co/edit/hhhSAeXvhViE8zZMVqoy?p=info

The upgraded NG1 components are resolved during UpgradeAdapter.bootstrap(). The fix is , if the app is already bootstrapped, then resolve the NG1 components after upgrade immediately.

UpgradeAdapter.prototype.upgradeNg1Component = function (name) {
            if (this.downgradedComponents.hasOwnProperty(name)) {
                return this.downgradedComponents[name].type;
            }
            else {
                (this.downgradedComponents[name] = new UpgradeNg1ComponentAdapterBuilder(name));
                if(this.ng1Injector) {
                  UpgradeNg1ComponentAdapterBuilder.resolve([this.downgradedComponents[name]], this.ng1Injector);
                }
              return this.downgradedComponents[name].type;
            }
        };

@IgorMinar
Appreciate if someone from @angular team promote this code.

[AlexKhymenko]

The same with services. After the application bootstraped you cant use services.

[gkalpak]

Since the old, dynamic ngUpgrade has been deprecated, this issue is now obsolete. It is recommended to use the new, static version (imported from @angular/upgrade/static), which requires the upgraded components to be registered with the Angular module (since they need to be statically analyzed for AoT).

[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.}