@angular/upgrade - npm Package Compare versions

Comparing version 2.0.0-rc.4 to 2.0.0-rc.5

bundles/upgrade.umd.js

 /**
- * @license Angular 2.0.0-rc.4
+ * @license Angular v2.0.0-rc.5
  * (c) 2010-2016 Google, Inc. https://angular.io/
@@ -229,3 +229,3 @@ * License: MIT
         }
-        var selector = selector.replace(SKEWER_CASE, function (all /** TODO #9100 */, letter) { return letter.toUpperCase(); });
+        selector = selector.replace(SKEWER_CASE, function (all /** TODO #9100 */, letter) { return letter.toUpperCase(); });
         return {
@@ -406,2 +406,5 @@ type: type,
         };
+        /**
+         * Upgrade ng1 components into Angular 2.
+         */
         UpgradeNg1ComponentAdapterBuilder.resolve = function (exportedComponents, injector) {
@@ -613,7 +616,7 @@ var promises = [];
      * ```
-     * var adapter = new UpgradeAdapter();
+     * var adapter = new UpgradeAdapter(forwardRef(() => MyNg2Module));
      * var module = angular.module('myExample', []);
-     * module.directive('ng2', adapter.downgradeNg2Component(Ng2));
+     * module.directive('ng2Comp', adapter.downgradeNg2Component(Ng2));
      *
-     * module.directive('ng1', function() {
+     * module.directive('ng1Hello', function() {
      *   return {
@@ -627,12 +630,19 @@ *      scope: { title: '=' },
      * @Component({
-     *   selector: 'ng2',
+     *   selector: 'ng2-comp',
      *   inputs: ['name'],
-     *   template: 'ng2[<ng1 [title]="name">transclude</ng1>](<ng-content></ng-content>)',
-     *   directives: [adapter.upgradeNg1Component('ng1')]
+     *   template: 'ng2[<ng1-hello [title]="name">transclude</ng1-hello>](<ng-content></ng-content>)',
+     *   directives:
      * })
-     * class Ng2 {
+     * class Ng2Component {
      * }
      *
-     * document.body.innerHTML = '<ng2 name="World">project</ng2>';
+     * @NgModule({
+     *   declarations: [Ng2Component, adapter.upgradeNg1Component('ng1Hello')],
+     *   imports: [BrowserModule]
+     * })
+     * class MyNg2Module {}
      *
+     *
+     * document.body.innerHTML = '<ng2-comp name="World">project</ng2-comp>';
+     *
      * adapter.bootstrap(document.body, ['myExample']).ready(function() {
@@ -642,2 +652,3 @@ *   expect(document.body.textContent).toEqual(
      * });
+     *
      * ```
@@ -648,3 +659,6 @@ *
     var UpgradeAdapter = (function () {
-        function UpgradeAdapter() {
+        // the ng2AppModule param should be required once the deprecated @Component.directives prop is
+        // removed
+        function UpgradeAdapter(ng2AppModule) {
+            this.ng2AppModule = ng2AppModule;
             /* @internal */
@@ -654,6 +668,16 @@ this.idPrefix = "NG2_UPGRADE_" + upgradeCount++ + "_";
             this.upgradedComponents = [];
+            /**
+             * An internal map of ng1 components which need to up upgraded to ng2.
+             *
+             * We can't upgrade until injector is instantiated and we can retrieve the component metadata.
+             * For this reason we keep a list of components to upgrade until ng1 injector is bootstrapped.
+             *
+             * @internal
+             */
+            this.ng1ComponentsToBeUpgraded = {};
             /* @internal */
-            this.downgradedComponents = {};
-            /* @internal */
             this.providers = [];
+            if (arguments.length && !ng2AppModule) {
+                throw new _angular_core.BaseException('UpgradeAdapter constructor called with undefined instead of a ng module type');
+            }
         }
@@ -688,3 +712,3 @@ /**
          * ```
-         * var adapter = new UpgradeAdapter();
+         * var adapter = new UpgradeAdapter(forwardRef(() => MyNg2Module));
          * var module = angular.module('myExample', []);
@@ -702,2 +726,8 @@ * module.directive('greet', adapter.downgradeNg2Component(Greeter));
          *
+         * @NgModule({
+         *   declarations: [Greeter],
+         *   imports: [BrowserModule]
+         * })
+         * class MyNg2Module {}
+         *
          * document.body.innerHTML =
@@ -761,3 +791,3 @@ *   'ng1 template: <greet salutation="Hello" [name]="world">text</greet>';
          * ```
-         * var adapter = new UpgradeAdapter();
+         * var adapter = new UpgradeAdapter(forwardRef(() => MyNg2Module));
          * var module = angular.module('myExample', []);
@@ -777,3 +807,2 @@ *
          *   template: 'ng2 template: <greet salutation="Hello" [name]="world">text</greet>'
-         *   directives: [adapter.upgradeNg1Component('greet')]
          * })
@@ -783,2 +812,8 @@ * class Ng2 {
          *
+         * @NgModule({
+         *   declarations: [Ng2, adapter.upgradeNg1Component('greet')],
+         *   imports: [BrowserModule]
+         * })
+         * class MyNg2Module {}
+         *
          * document.body.innerHTML = '<ng2></ng2>';
@@ -792,7 +827,8 @@ *
         UpgradeAdapter.prototype.upgradeNg1Component = function (name) {
-            if (this.downgradedComponents.hasOwnProperty(name)) {
-                return this.downgradedComponents[name].type;
+            if (this.ng1ComponentsToBeUpgraded.hasOwnProperty(name)) {
+                return this.ng1ComponentsToBeUpgraded[name].type;
             }
             else {
-                return (this.downgradedComponents[name] = new UpgradeNg1ComponentAdapterBuilder(name)).type;
+                return (this.ng1ComponentsToBeUpgraded[name] = new UpgradeNg1ComponentAdapterBuilder(name))
+                    .type;
             }
@@ -825,4 +861,3 @@ };
          *   inputs: ['name'],
-         *   template: 'ng2[<ng1 [title]="name">transclude</ng1>](<ng-content></ng-content>)',
-         *   directives: [adapter.upgradeNg1Component('ng1')]
+         *   template: 'ng2[<ng1 [title]="name">transclude</ng1>](<ng-content></ng-content>)'
          * })
@@ -832,2 +867,8 @@ * class Ng2 {
          *
+         * @NgModule({
+         *   declarations: [Ng2, adapter.upgradeNg1Component('ng1')],
+         *   imports: [BrowserModule]
+         * })
+         * class MyNg2Module {}
+         *
          * document.body.innerHTML = '<ng2 name="World">project</ng2>';
@@ -843,16 +884,6 @@ *
             var _this = this;
+            var ngZone = new _angular_core.NgZone({ enableLongStackTrace: Zone.hasOwnProperty('longStackTraceZoneSpec') });
             var upgrade = new UpgradeAdapterRef();
             var ng1Injector = null;
-            var platformRef = _angular_platformBrowser.browserPlatform();
-            var applicationRef = _angular_core.ReflectiveInjector
-                .resolveAndCreate([
-                _angular_platformBrowser.BROWSER_APP_PROVIDERS, _angular_platformBrowserDynamic.BROWSER_APP_COMPILER_PROVIDERS,
-                { provide: NG1_INJECTOR, useFactory: function () { return ng1Injector; } },
-                { provide: NG1_COMPILE, useFactory: function () { return ng1Injector.get(NG1_COMPILE); } },
-                this.providers
-            ], platformRef.injector)
-                .get(_angular_core.ApplicationRef);
-            var injector = applicationRef.injector;
-            var ngZone = injector.get(_angular_core.NgZone);
-            var compiler = injector.get(_angular_core.ComponentResolver);
+            var moduleRef = null;
             var delayApplyExps = [];
@@ -864,18 +895,20 @@ var original$applyFn;
             var ng1Module = module$1(this.idPrefix, modules);
-            var ng1BootstrapPromise = null;
-            var ng1compilePromise = null;
-            ng1Module.value(NG2_INJECTOR, injector)
+            var ng1BootstrapPromise;
+            var ng1compilePromise;
+            ng1Module.factory(NG2_INJECTOR, function () { return moduleRef.injector.get(_angular_core.Injector); })
                 .value(NG2_ZONE, ngZone)
-                .value(NG2_COMPILER, compiler)
+                .factory(NG2_COMPILER, function () { return moduleRef.injector.get(_angular_core.Compiler); })
                 .value(NG2_COMPONENT_FACTORY_REF_MAP, componentFactoryRefMap)
                 .config([
                 '$provide', '$injector',
-                function (provide /** TODO #???? */, ng1Injector /** TODO #???? */) {
+                function (provide /** TODO #???? */, ng1Injector) {
                     provide.decorator(NG1_ROOT_SCOPE, [
                         '$delegate',
                         function (rootScopeDelegate) {
+                            // Capture the root apply so that we can delay first call to $apply until we
+                            // bootstrap Angular 2 and then we replay and restore the $apply.
                             rootScopePrototype = rootScopeDelegate.constructor.prototype;
                             if (rootScopePrototype.hasOwnProperty('$apply')) {
                                 original$applyFn = rootScopePrototype.$apply;
-                                rootScopePrototype.$apply = function (exp /** TODO #???? */) { return delayApplyExps.push(exp); };
+                                rootScopePrototype.$apply = function (exp) { return delayApplyExps.push(exp); };
                             }
@@ -893,7 +926,7 @@ else {
                                 var _this = this;
-                                var ng2Testability = injector.get(_angular_core.Testability);
-                                var origonalWhenStable = testabilityDelegate.whenStable;
+                                var originalWhenStable = testabilityDelegate.whenStable;
                                 var newWhenStable = function (callback) {
                                     var whenStableContext = _this;
-                                    origonalWhenStable.call(_this, function () {
+                                    originalWhenStable.call(_this, function () {
+                                        var ng2Testability = moduleRef.injector.get(_angular_core.Testability);
                                         if (ng2Testability.isStable()) {
@@ -919,7 +952,25 @@ callback.apply(this, arguments);
                         ng1Injector = injector;
-                        ngZone.onMicrotaskEmpty.subscribe({
-                            next: function (_ /** TODO #???? */) { return ngZone.runOutsideAngular(function () { return rootScope.$evalAsync(); }); }
+                        UpgradeNg1ComponentAdapterBuilder.resolve(_this.ng1ComponentsToBeUpgraded, injector)
+                            .then(function () {
+                            // At this point we have ng1 injector and we have lifted ng1 components into ng2, we
+                            // now can bootstrap ng2.
+                            var DynamicNgUpgradeModule = _angular_core.NgModule({
+                                providers: [
+                                    { provide: NG1_INJECTOR, useFactory: function () { return ng1Injector; } },
+                                    { provide: NG1_COMPILE, useFactory: function () { return ng1Injector.get(NG1_COMPILE); } },
+                                    _this.providers
+                                ],
+                                imports: _this.ng2AppModule ? [_this.ng2AppModule] : [_angular_platformBrowser.BrowserModule]
+                            }).Class({ constructor: function () { }, ngDoBootstrap: function () { } });
+                            _angular_platformBrowserDynamic.platformBrowserDynamic()
+                                ._bootstrapModuleWithZone(DynamicNgUpgradeModule, undefined, ngZone)
+                                .then(function (ref) {
+                                moduleRef = ref;
+                                element(element$$).data(controllerKey(NG2_INJECTOR), moduleRef.injector);
+                                ngZone.onMicrotaskEmpty.subscribe({
+                                    next: function (_) { return ngZone.runOutsideAngular(function () { return rootScope.$evalAsync(); }); }
+                                });
+                            })
+                                .then(resolve, reject);
                         });
-                        UpgradeNg1ComponentAdapterBuilder.resolve(_this.downgradedComponents, injector)
-                            .then(resolve, reject);
                     }
@@ -931,3 +982,2 @@ ]);
             windowAngular.resumeBootstrap = undefined;
-            element(element$$).data(controllerKey(NG2_INJECTOR), injector);
             ngZone.run(function () { bootstrap(element$$, [_this.idPrefix], config); });
@@ -947,9 +997,8 @@ ng1BootstrapPromise = new Promise(function (resolve, reject) {
             });
-            Promise
-                .all([
-                this.compileNg2Components(compiler, componentFactoryRefMap), ng1BootstrapPromise,
-                ng1compilePromise
-            ])
+            Promise.all([ng1BootstrapPromise, ng1compilePromise])
                 .then(function () {
-                ngZone.run(function () {
+                return _this.compileNg2Components(moduleRef.injector.get(_angular_core.Compiler), componentFactoryRefMap);
+            })
+                .then(function () {
+                moduleRef.injector.get(_angular_core.NgZone).run(function () {
                     if (rootScopePrototype) {
@@ -960,3 +1009,3 @@ rootScopePrototype.$apply = original$applyFn; // restore original $apply
                         }
-                        upgrade._bootstrapDone(applicationRef, ng1Injector);
+                        upgrade._bootstrapDone(moduleRef, ng1Injector);
                         rootScopePrototype = null;
@@ -1003,2 +1052,5 @@ }
          *```
+         *
+         * @deprecated Use NgModules and `new UpgradeAdapter(ng2AppModule)` to configure top-level
+         *providers
          */
@@ -1079,3 +1131,3 @@ UpgradeAdapter.prototype.addProvider = function (provider) { this.providers.push(provider); };
             for (var i = 0; i < types.length; i++) {
-                promises.push(compiler.resolveComponent(types[i]));
+                promises.push(compiler.compileComponentAsync(types[i], this.ng2AppModule));
             }
@@ -1104,3 +1156,2 @@ return Promise.all(promises).then(function (componentFactories) {
                             throw new Error('Expecting ComponentFactory for: ' + info.selector);
-                        var domElement = element[0];
                         if (parentInjector === null) {
@@ -1122,3 +1173,3 @@ parentInjector = ng1Injector.get(NG2_INJECTOR);
     /**
-     * Use `UgradeAdapterRef` to control a hybrid AngularJS v1 / Angular v2 application.
+     * Use `UpgradeAdapterRef` to control a hybrid AngularJS v1 / Angular v2 application.
      *
@@ -1133,9 +1184,9 @@ * @experimental
             this.ng1Injector = null;
-            this.ng2ApplicationRef = null;
+            this.ng2ModuleRef = null;
             this.ng2Injector = null;
         }
         /* @internal */
-        UpgradeAdapterRef.prototype._bootstrapDone = function (applicationRef, ng1Injector) {
-            this.ng2ApplicationRef = applicationRef;
-            this.ng2Injector = applicationRef.injector;
+        UpgradeAdapterRef.prototype._bootstrapDone = function (ngModuleRef, ng1Injector) {
+            this.ng2ModuleRef = ngModuleRef;
+            this.ng2Injector = ngModuleRef.injector;
             this.ng1Injector = ng1Injector;
@@ -1158,3 +1209,3 @@ this.ng1RootScope = ng1Injector.get(NG1_ROOT_SCOPE);
             this.ng1Injector.get(NG1_ROOT_SCOPE).$destroy();
-            this.ng2ApplicationRef.dispose();
+            this.ng2ModuleRef.destroy();
         };
@@ -1161,0 +1212,0 @@ return UpgradeAdapterRef;

bundles/upgrade.umd.min.js

@@ -1,1 +0,6 @@
-!function(global,factory){"object"==typeof exports&&"undefined"!=typeof module?factory(exports,require("@angular/core"),require("@angular/platform-browser"),require("@angular/platform-browser-dynamic"),require("@angular/compiler")):"function"==typeof define&&define.amd?define(["exports","@angular/core","@angular/platform-browser","@angular/platform-browser-dynamic","@angular/compiler"],factory):factory((global.ng=global.ng||{},global.ng.upgrade=global.ng.upgrade||{}),global.ng.core,global.ng.platformBrowser,global.ng.platformBrowserDynamic,global.ng.compiler)}(this,function(exports,_angular_core,_angular_platformBrowser,_angular_platformBrowserDynamic,_angular_compiler){"use strict";function noNg(){throw new Error("AngularJS v1.x is not loaded!")}function getComponentInfo(type){var resolvedMetadata=directiveResolver.resolve(type),selector=resolvedMetadata.selector;if(!selector.match(COMPONENT_SELECTOR))throw new Error("Only selectors matching element names are supported, got: "+selector);var selector=selector.replace(SKEWER_CASE,function(all,letter){return letter.toUpperCase()});return{type:type,selector:selector,inputs:parseFields(resolvedMetadata.inputs),outputs:parseFields(resolvedMetadata.outputs)}}function parseFields(names){var attrProps=[];if(names)for(var i=0;i<names.length;i++){var parts=names[i].split(":"),prop=parts[0].trim(),attr=(parts[1]||parts[0]).trim(),capitalAttr=attr.charAt(0).toUpperCase()+attr.substr(1);attrProps.push({prop:prop,attr:attr,bracketAttr:"["+attr+"]",parenAttr:"("+attr+")",bracketParenAttr:"[("+attr+")]",onAttr:"on"+capitalAttr,bindAttr:"bind"+capitalAttr,bindonAttr:"bindon"+capitalAttr})}return attrProps}function onError(e){throw console.log(e,e.stack),e}function controllerKey(name){return"$"+name+"Controller"}function ng1ComponentDirective(info,idPrefix){function directiveFactory(ng1Injector,componentFactoryRefMap,parse){var idCount=0;return{restrict:"E",require:REQUIRE_INJECTOR,link:{post:function(scope,element,attrs,parentInjector,transclude){var componentFactory=componentFactoryRefMap[info.selector];if(!componentFactory)throw new Error("Expecting ComponentFactory for: "+info.selector);element[0];null===parentInjector&&(parentInjector=ng1Injector.get(NG2_INJECTOR));var facade=new DowngradeNg2ComponentAdapter(idPrefix+idCount++,info,element,attrs,scope,parentInjector,parse,componentFactory);facade.setupInputs(),facade.bootstrapNg2(),facade.projectContent(),facade.setupOutputs(),facade.registerCleanup()}}}}return directiveFactory.$inject=[NG1_INJECTOR,NG2_COMPONENT_FACTORY_REF_MAP,NG1_PARSE],directiveFactory}var angular={bootstrap:noNg,module:noNg,element:noNg,version:noNg,resumeBootstrap:noNg,getTestability:noNg};try{window.hasOwnProperty("angular")&&(angular=window.angular)}catch(e){}var bootstrap=angular.bootstrap,module$1=angular.module,element=angular.element,NG2_COMPILER="ng2.Compiler",NG2_INJECTOR="ng2.Injector",NG2_COMPONENT_FACTORY_REF_MAP="ng2.ComponentFactoryRefMap",NG2_ZONE="ng2.NgZone",NG1_CONTROLLER="$controller",NG1_SCOPE="$scope",NG1_ROOT_SCOPE="$rootScope",NG1_COMPILE="$compile",NG1_HTTP_BACKEND="$httpBackend",NG1_INJECTOR="$injector",NG1_PARSE="$parse",NG1_TEMPLATE_CACHE="$templateCache",NG1_TESTABILITY="$$testability",REQUIRE_INJECTOR="?^"+NG2_INJECTOR,INITIAL_VALUE={__UNINITIALIZED__:!0},DowngradeNg2ComponentAdapter=function(){function DowngradeNg2ComponentAdapter(id,info,element,attrs,scope,parentInjector,parse,componentFactory){this.id=id,this.info=info,this.element=element,this.attrs=attrs,this.scope=scope,this.parentInjector=parentInjector,this.parse=parse,this.componentFactory=componentFactory,this.component=null,this.inputChangeCount=0,this.inputChanges=null,this.componentRef=null,this.changeDetector=null,this.contentInsertionPoint=null,this.element[0].id=id,this.componentScope=scope.$new(),this.childNodes=element.contents()}return DowngradeNg2ComponentAdapter.prototype.bootstrapNg2=function(){var childInjector=_angular_core.ReflectiveInjector.resolveAndCreate([{provide:NG1_SCOPE,useValue:this.componentScope}],this.parentInjector);this.contentInsertionPoint=document.createComment("ng1 insertion point"),this.componentRef=this.componentFactory.create(childInjector,[[this.contentInsertionPoint]],this.element[0]),this.changeDetector=this.componentRef.changeDetectorRef,this.component=this.componentRef.instance},DowngradeNg2ComponentAdapter.prototype.setupInputs=function(){for(var _this=this,attrs=this.attrs,inputs=this.info.inputs,i=0;i<inputs.length;i++){var input=inputs[i],expr=null;if(attrs.hasOwnProperty(input.attr)){var observeFn=function(prop){var prevValue=INITIAL_VALUE;return function(value){null!==_this.inputChanges&&(_this.inputChangeCount++,_this.inputChanges[prop]=new Ng1Change(value,prevValue===INITIAL_VALUE?value:prevValue),prevValue=value),_this.component[prop]=value}}(input.prop);attrs.$observe(input.attr,observeFn)}else attrs.hasOwnProperty(input.bindAttr)?expr=attrs[input.bindAttr]:attrs.hasOwnProperty(input.bracketAttr)?expr=attrs[input.bracketAttr]:attrs.hasOwnProperty(input.bindonAttr)?expr=attrs[input.bindonAttr]:attrs.hasOwnProperty(input.bracketParenAttr)&&(expr=attrs[input.bracketParenAttr]);if(null!=expr){var watchFn=function(prop){return function(value,prevValue){null!=_this.inputChanges&&(_this.inputChangeCount++,_this.inputChanges[prop]=new Ng1Change(prevValue,value)),_this.component[prop]=value}}(input.prop);this.componentScope.$watch(expr,watchFn)}}var prototype=this.info.type.prototype;prototype&&prototype.ngOnChanges&&(this.inputChanges={},this.componentScope.$watch(function(){return _this.inputChangeCount},function(){var inputChanges=_this.inputChanges;_this.inputChanges={},_this.component.ngOnChanges(inputChanges)})),this.componentScope.$watch(function(){return _this.changeDetector&&_this.changeDetector.detectChanges()})},DowngradeNg2ComponentAdapter.prototype.projectContent=function(){var childNodes=this.childNodes,parent=this.contentInsertionPoint.parentNode;if(parent)for(var i=0,ii=childNodes.length;i<ii;i++)parent.insertBefore(childNodes[i],this.contentInsertionPoint)},DowngradeNg2ComponentAdapter.prototype.setupOutputs=function(){for(var _this=this,attrs=this.attrs,outputs=this.info.outputs,j=0;j<outputs.length;j++){var output=outputs[j],expr=null,assignExpr=!1,bindonAttr=output.bindonAttr?output.bindonAttr.substring(0,output.bindonAttr.length-6):null,bracketParenAttr=output.bracketParenAttr?"[("+output.bracketParenAttr.substring(2,output.bracketParenAttr.length-8)+")]":null;if(attrs.hasOwnProperty(output.onAttr)?expr=attrs[output.onAttr]:attrs.hasOwnProperty(output.parenAttr)?expr=attrs[output.parenAttr]:attrs.hasOwnProperty(bindonAttr)?(expr=attrs[bindonAttr],assignExpr=!0):attrs.hasOwnProperty(bracketParenAttr)&&(expr=attrs[bracketParenAttr],assignExpr=!0),null!=expr&&null!=assignExpr){var getter=this.parse(expr),setter=getter.assign;if(assignExpr&&!setter)throw new Error("Expression '"+expr+"' is not assignable!");var emitter=this.component[output.prop];if(!emitter)throw new Error("Missing emitter '"+output.prop+"' on component '"+this.info.selector+"'!");emitter.subscribe({next:assignExpr?function(setter){return function(v){return setter(_this.scope,v)}}(setter):function(getter){return function(v){return getter(_this.scope,{$event:v})}}(getter)})}}},DowngradeNg2ComponentAdapter.prototype.registerCleanup=function(){var _this=this;this.element.bind("$destroy",function(){_this.componentScope.$destroy(),_this.componentRef.destroy()})},DowngradeNg2ComponentAdapter}(),Ng1Change=function(){function Ng1Change(previousValue,currentValue){this.previousValue=previousValue,this.currentValue=currentValue}return Ng1Change.prototype.isFirstChange=function(){return this.previousValue===this.currentValue},Ng1Change}(),COMPONENT_SELECTOR=/^[\w|-]*$/,SKEWER_CASE=/-(\w)/g,directiveResolver=new _angular_compiler.DirectiveResolver,CAMEL_CASE=/([A-Z])/g,INITIAL_VALUE$1={__UNINITIALIZED__:!0},NOT_SUPPORTED="NOT_SUPPORTED",UpgradeNg1ComponentAdapterBuilder=function(){function UpgradeNg1ComponentAdapterBuilder(name){this.name=name,this.inputs=[],this.inputsRename=[],this.outputs=[],this.outputsRename=[],this.propertyOutputs=[],this.checkProperties=[],this.propertyMap={},this.linkFn=null,this.directive=null,this.$controller=null;var selector=name.replace(CAMEL_CASE,function(all,next){return"-"+next.toLowerCase()}),self=this;this.type=_angular_core.Directive({selector:selector,inputs:this.inputsRename,outputs:this.outputsRename}).Class({constructor:[new _angular_core.Inject(NG1_SCOPE),_angular_core.ElementRef,function(scope,elementRef){return new UpgradeNg1ComponentAdapter(self.linkFn,scope,self.directive,elementRef,self.$controller,self.inputs,self.outputs,self.propertyOutputs,self.checkProperties,self.propertyMap)}],ngOnInit:function(){},ngOnChanges:function(){},ngDoCheck:function(){}})}return UpgradeNg1ComponentAdapterBuilder.prototype.extractDirective=function(injector){var directives=injector.get(this.name+"Directive");if(directives.length>1)throw new Error("Only support single directive definition for: "+this.name);var directive=directives[0];directive.replace&&this.notSupported("replace"),directive.terminal&&this.notSupported("terminal");var link=directive.link;return"object"==typeof link&&link.post&&this.notSupported("link.post"),directive},UpgradeNg1ComponentAdapterBuilder.prototype.notSupported=function(feature){throw new Error("Upgraded directive '"+this.name+"' does not support '"+feature+"'.")},UpgradeNg1ComponentAdapterBuilder.prototype.extractBindings=function(){var btcIsObject="object"==typeof this.directive.bindToController;if(btcIsObject&&Object.keys(this.directive.scope).length)throw new Error("Binding definitions on scope and controller at the same time are not supported.");var context=btcIsObject?this.directive.bindToController:this.directive.scope;if("object"==typeof context)for(var name in context)if(context.hasOwnProperty(name)){var localName=context[name],type=localName.charAt(0);localName=localName.substr(1)||name;var outputName="output_"+name,outputNameRename=outputName+": "+name,outputNameRenameChange=outputName+": "+name+"Change",inputName="input_"+name,inputNameRename=inputName+": "+name;switch(type){case"=":this.propertyOutputs.push(outputName),this.checkProperties.push(localName),this.outputs.push(outputName),this.outputsRename.push(outputNameRenameChange),this.propertyMap[outputName]=localName,this.inputs.push(inputName),this.inputsRename.push(inputNameRename),this.propertyMap[inputName]=localName;break;case"@":case"<":this.inputs.push(inputName),this.inputsRename.push(inputNameRename),this.propertyMap[inputName]=localName;break;case"&":this.outputs.push(outputName),this.outputsRename.push(outputNameRename),this.propertyMap[outputName]=localName;break;default:var json=JSON.stringify(context);throw new Error("Unexpected mapping '"+type+"' in '"+json+"' in '"+this.name+"' directive.")}}},UpgradeNg1ComponentAdapterBuilder.prototype.compileTemplate=function(compile,templateCache,httpBackend){function compileHtml(html){var div=document.createElement("div");return div.innerHTML=html,compile(div.childNodes)}var _this=this;if(void 0!==this.directive.template)this.linkFn=compileHtml("function"==typeof this.directive.template?this.directive.template():this.directive.template);else{if(!this.directive.templateUrl)throw new Error("Directive '"+this.name+"' is not a component, it is missing template.");var url="function"==typeof this.directive.templateUrl?this.directive.templateUrl():this.directive.templateUrl,html=templateCache.get(url);if(void 0===html)return new Promise(function(resolve,err){httpBackend("GET",url,null,function(status,response){200==status?resolve(_this.linkFn=compileHtml(templateCache.put(url,response))):err("GET "+url+" returned "+status+": "+response)})});this.linkFn=compileHtml(html)}return null},UpgradeNg1ComponentAdapterBuilder.resolve=function(exportedComponents,injector){var promises=[],compile=injector.get(NG1_COMPILE),templateCache=injector.get(NG1_TEMPLATE_CACHE),httpBackend=injector.get(NG1_HTTP_BACKEND),$controller=injector.get(NG1_CONTROLLER);for(var name in exportedComponents)if(exportedComponents.hasOwnProperty(name)){var exportedComponent=exportedComponents[name];exportedComponent.directive=exportedComponent.extractDirective(injector),exportedComponent.$controller=$controller,exportedComponent.extractBindings();var promise=exportedComponent.compileTemplate(compile,templateCache,httpBackend);promise&&promises.push(promise)}return Promise.all(promises)},UpgradeNg1ComponentAdapterBuilder}(),UpgradeNg1ComponentAdapter=function(){function UpgradeNg1ComponentAdapter(linkFn,scope,directive,elementRef,$controller,inputs,outputs,propOuts,checkProperties,propertyMap){this.linkFn=linkFn,this.directive=directive,this.$controller=$controller,this.inputs=inputs,this.outputs=outputs,this.propOuts=propOuts,this.checkProperties=checkProperties,this.propertyMap=propertyMap,this.destinationObj=null,this.checkLastValues=[],this.$element=null,this.element=elementRef.nativeElement,this.componentScope=scope.$new(!!directive.scope),this.$element=element(this.element);var controllerType=directive.controller;directive.bindToController&&controllerType?this.destinationObj=this.buildController(controllerType):this.destinationObj=this.componentScope;for(var i=0;i<inputs.length;i++)this[inputs[i]]=null;for(var j=0;j<outputs.length;j++){var emitter=this[outputs[j]]=new _angular_core.EventEmitter;this.setComponentProperty(outputs[j],function(emitter){return function(value){return emitter.emit(value)}}(emitter))}for(var k=0;k<propOuts.length;k++)this[propOuts[k]]=new _angular_core.EventEmitter,this.checkLastValues.push(INITIAL_VALUE$1)}return UpgradeNg1ComponentAdapter.prototype.ngOnInit=function(){var _this=this;!this.directive.bindToController&&this.directive.controller&&this.buildController(this.directive.controller);var link=this.directive.link;if("object"==typeof link&&(link=link.pre),link){var attrs=NOT_SUPPORTED,transcludeFn=NOT_SUPPORTED,linkController=this.resolveRequired(this.$element,this.directive.require);this.directive.link(this.componentScope,this.$element,attrs,linkController,transcludeFn)}for(var childNode,childNodes=[];childNode=this.element.firstChild;)this.element.removeChild(childNode),childNodes.push(childNode);this.linkFn(this.componentScope,function(clonedElement,scope){for(var i=0,ii=clonedElement.length;i<ii;i++)_this.element.appendChild(clonedElement[i])},{parentBoundTranscludeFn:function(scope,cloneAttach){cloneAttach(childNodes)}}),this.destinationObj.$onInit&&this.destinationObj.$onInit()},UpgradeNg1ComponentAdapter.prototype.ngOnChanges=function(changes){for(var name in changes)if(changes.hasOwnProperty(name)){var change=changes[name];this.setComponentProperty(name,change.currentValue)}},UpgradeNg1ComponentAdapter.prototype.ngDoCheck=function(){for(var count=0,destinationObj=this.destinationObj,lastValues=this.checkLastValues,checkProperties=this.checkProperties,i=0;i<checkProperties.length;i++){var value=destinationObj[checkProperties[i]],last=lastValues[i];if(value!==last)if("number"==typeof value&&isNaN(value)&&"number"==typeof last&&isNaN(last));else{var eventEmitter=this[this.propOuts[i]];eventEmitter.emit(lastValues[i]=value)}}return count},UpgradeNg1ComponentAdapter.prototype.setComponentProperty=function(name,value){this.destinationObj[this.propertyMap[name]]=value},UpgradeNg1ComponentAdapter.prototype.buildController=function(controllerType){var locals={$scope:this.componentScope,$element:this.$element},controller=this.$controller(controllerType,locals,null,this.directive.controllerAs);return this.$element.data(controllerKey(this.directive.name),controller),controller},UpgradeNg1ComponentAdapter.prototype.resolveRequired=function($element,require){if(require){if("string"==typeof require){var name=require,isOptional=!1,startParent=!1,searchParents=!1;"?"==name.charAt(0)&&(isOptional=!0,name=name.substr(1)),"^"==name.charAt(0)&&(searchParents=!0,name=name.substr(1)),"^"==name.charAt(0)&&(startParent=!0,name=name.substr(1));var key=controllerKey(name);startParent&&($element=$element.parent());var dep=searchParents?$element.inheritedData(key):$element.data(key);if(!dep&&!isOptional)throw new Error("Can not locate '"+require+"' in '"+this.directive.name+"'.");return dep}if(require instanceof Array){for(var deps=[],i=0;i<require.length;i++)deps.push(this.resolveRequired($element,require[i]));return deps}throw new Error("Directive '"+this.directive.name+"' require syntax unrecognized: "+this.directive.require)}},UpgradeNg1ComponentAdapter}(),upgradeCount=0,UpgradeAdapter=function(){function UpgradeAdapter(){this.idPrefix="NG2_UPGRADE_"+upgradeCount++ +"_",this.upgradedComponents=[],this.downgradedComponents={},this.providers=[]}return UpgradeAdapter.prototype.downgradeNg2Component=function(type){this.upgradedComponents.push(type);var info=getComponentInfo(type);return ng1ComponentDirective(info,""+this.idPrefix+info.selector+"_c")},UpgradeAdapter.prototype.upgradeNg1Component=function(name){return this.downgradedComponents.hasOwnProperty(name)?this.downgradedComponents[name].type:(this.downgradedComponents[name]=new UpgradeNg1ComponentAdapterBuilder(name)).type},UpgradeAdapter.prototype.bootstrap=function(element$$,modules,config){var original$applyFn,rootScopePrototype,rootScope,_this=this,upgrade=new UpgradeAdapterRef,ng1Injector=null,platformRef=_angular_platformBrowser.browserPlatform(),applicationRef=_angular_core.ReflectiveInjector.resolveAndCreate([_angular_platformBrowser.BROWSER_APP_PROVIDERS,_angular_platformBrowserDynamic.BROWSER_APP_COMPILER_PROVIDERS,{provide:NG1_INJECTOR,useFactory:function(){return ng1Injector}},{provide:NG1_COMPILE,useFactory:function(){return ng1Injector.get(NG1_COMPILE)}},this.providers],platformRef.injector).get(_angular_core.ApplicationRef),injector=applicationRef.injector,ngZone=injector.get(_angular_core.NgZone),compiler=injector.get(_angular_core.ComponentResolver),delayApplyExps=[],componentFactoryRefMap={},ng1Module=module$1(this.idPrefix,modules),ng1BootstrapPromise=null,ng1compilePromise=null;ng1Module.value(NG2_INJECTOR,injector).value(NG2_ZONE,ngZone).value(NG2_COMPILER,compiler).value(NG2_COMPONENT_FACTORY_REF_MAP,componentFactoryRefMap).config(["$provide","$injector",function(provide,ng1Injector){provide.decorator(NG1_ROOT_SCOPE,["$delegate",function(rootScopeDelegate){if(rootScopePrototype=rootScopeDelegate.constructor.prototype,!rootScopePrototype.hasOwnProperty("$apply"))throw new Error("Failed to find '$apply' on '$rootScope'!");return original$applyFn=rootScopePrototype.$apply,rootScopePrototype.$apply=function(exp){return delayApplyExps.push(exp)},rootScope=rootScopeDelegate}]),ng1Injector.has(NG1_TESTABILITY)&&provide.decorator(NG1_TESTABILITY,["$delegate",function(testabilityDelegate){var _this=this,ng2Testability=injector.get(_angular_core.Testability),origonalWhenStable=testabilityDelegate.whenStable,newWhenStable=function(callback){var whenStableContext=_this;origonalWhenStable.call(_this,function(){ng2Testability.isStable()?callback.apply(this,arguments):ng2Testability.whenStable(newWhenStable.bind(whenStableContext,callback))})};return testabilityDelegate.whenStable=newWhenStable,testabilityDelegate}])}]),ng1compilePromise=new Promise(function(resolve,reject){ng1Module.run(["$injector","$rootScope",function(injector,rootScope){ng1Injector=injector,ngZone.onMicrotaskEmpty.subscribe({next:function(_){return ngZone.runOutsideAngular(function(){return rootScope.$evalAsync()})}}),UpgradeNg1ComponentAdapterBuilder.resolve(_this.downgradedComponents,injector).then(resolve,reject)}])});var windowAngular=window.angular;return windowAngular.resumeBootstrap=void 0,element(element$$).data(controllerKey(NG2_INJECTOR),injector),ngZone.run(function(){bootstrap(element$$,[_this.idPrefix],config)}),ng1BootstrapPromise=new Promise(function(resolve,reject){if(windowAngular.resumeBootstrap){var originalResumeBootstrap=windowAngular.resumeBootstrap;windowAngular.resumeBootstrap=function(){windowAngular.resumeBootstrap=originalResumeBootstrap,windowAngular.resumeBootstrap.apply(this,arguments),resolve()}}else resolve()}),Promise.all([this.compileNg2Components(compiler,componentFactoryRefMap),ng1BootstrapPromise,ng1compilePromise]).then(function(){ngZone.run(function(){if(rootScopePrototype){for(rootScopePrototype.$apply=original$applyFn;delayApplyExps.length;)rootScope.$apply(delayApplyExps.shift());upgrade._bootstrapDone(applicationRef,ng1Injector),rootScopePrototype=null}})},onError),upgrade},UpgradeAdapter.prototype.addProvider=function(provider){this.providers.push(provider)},UpgradeAdapter.prototype.upgradeNg1Provider=function(name,options){var token=options&&options.asToken||name;this.providers.push({provide:token,useFactory:function(ng1Injector){return ng1Injector.get(name)},deps:[NG1_INJECTOR]})},UpgradeAdapter.prototype.downgradeNg2Provider=function(token){var factory=function(injector){return injector.get(token)};return factory.$inject=[NG2_INJECTOR],factory},UpgradeAdapter.prototype.compileNg2Components=function(compiler,componentFactoryRefMap){for(var _this=this,promises=[],types=this.upgradedComponents,i=0;i<types.length;i++)promises.push(compiler.resolveComponent(types[i]));return Promise.all(promises).then(function(componentFactories){for(var types=_this.upgradedComponents,i=0;i<componentFactories.length;i++)componentFactoryRefMap[getComponentInfo(types[i]).selector]=componentFactories[i];return componentFactoryRefMap},onError)},UpgradeAdapter}(),UpgradeAdapterRef=function(){function UpgradeAdapterRef(){this._readyFn=null,this.ng1RootScope=null,this.ng1Injector=null,this.ng2ApplicationRef=null,this.ng2Injector=null}return UpgradeAdapterRef.prototype._bootstrapDone=function(applicationRef,ng1Injector){this.ng2ApplicationRef=applicationRef,this.ng2Injector=applicationRef.injector,this.ng1Injector=ng1Injector,this.ng1RootScope=ng1Injector.get(NG1_ROOT_SCOPE),this._readyFn&&this._readyFn(this)},UpgradeAdapterRef.prototype.ready=function(fn){this._readyFn=fn},UpgradeAdapterRef.prototype.dispose=function(){this.ng1Injector.get(NG1_ROOT_SCOPE).$destroy(),this.ng2ApplicationRef.dispose()},UpgradeAdapterRef}();exports.UpgradeAdapter=UpgradeAdapter,exports.UpgradeAdapterRef=UpgradeAdapterRef});
+/**
+ * @license Angular v2.0.0-rc.5
+ * (c) 2010-2016 Google, Inc. https://angular.io/
+ * License: MIT
+ */
+!function(global,factory){"object"==typeof exports&&"undefined"!=typeof module?factory(exports,require("@angular/core"),require("@angular/platform-browser"),require("@angular/platform-browser-dynamic"),require("@angular/compiler")):"function"==typeof define&&define.amd?define(["exports","@angular/core","@angular/platform-browser","@angular/platform-browser-dynamic","@angular/compiler"],factory):factory((global.ng=global.ng||{},global.ng.upgrade=global.ng.upgrade||{}),global.ng.core,global.ng.platformBrowser,global.ng.platformBrowserDynamic,global.ng.compiler)}(this,function(exports,_angular_core,_angular_platformBrowser,_angular_platformBrowserDynamic,_angular_compiler){"use strict";function noNg(){throw new Error("AngularJS v1.x is not loaded!")}function getComponentInfo(type){var resolvedMetadata=directiveResolver.resolve(type),selector=resolvedMetadata.selector;if(!selector.match(COMPONENT_SELECTOR))throw new Error("Only selectors matching element names are supported, got: "+selector);return selector=selector.replace(SKEWER_CASE,function(all,letter){return letter.toUpperCase()}),{type:type,selector:selector,inputs:parseFields(resolvedMetadata.inputs),outputs:parseFields(resolvedMetadata.outputs)}}function parseFields(names){var attrProps=[];if(names)for(var i=0;i<names.length;i++){var parts=names[i].split(":"),prop=parts[0].trim(),attr=(parts[1]||parts[0]).trim(),capitalAttr=attr.charAt(0).toUpperCase()+attr.substr(1);attrProps.push({prop:prop,attr:attr,bracketAttr:"["+attr+"]",parenAttr:"("+attr+")",bracketParenAttr:"[("+attr+")]",onAttr:"on"+capitalAttr,bindAttr:"bind"+capitalAttr,bindonAttr:"bindon"+capitalAttr})}return attrProps}function onError(e){throw console.log(e,e.stack),e}function controllerKey(name){return"$"+name+"Controller"}function ng1ComponentDirective(info,idPrefix){function directiveFactory(ng1Injector,componentFactoryRefMap,parse){var idCount=0;return{restrict:"E",require:REQUIRE_INJECTOR,link:{post:function(scope,element,attrs,parentInjector,transclude){var componentFactory=componentFactoryRefMap[info.selector];if(!componentFactory)throw new Error("Expecting ComponentFactory for: "+info.selector);null===parentInjector&&(parentInjector=ng1Injector.get(NG2_INJECTOR));var facade=new DowngradeNg2ComponentAdapter(idPrefix+idCount++,info,element,attrs,scope,parentInjector,parse,componentFactory);facade.setupInputs(),facade.bootstrapNg2(),facade.projectContent(),facade.setupOutputs(),facade.registerCleanup()}}}}return directiveFactory.$inject=[NG1_INJECTOR,NG2_COMPONENT_FACTORY_REF_MAP,NG1_PARSE],directiveFactory}var angular={bootstrap:noNg,module:noNg,element:noNg,version:noNg,resumeBootstrap:noNg,getTestability:noNg};try{window.hasOwnProperty("angular")&&(angular=window.angular)}catch(e){}var bootstrap=angular.bootstrap,module$1=angular.module,element=angular.element,NG2_COMPILER="ng2.Compiler",NG2_INJECTOR="ng2.Injector",NG2_COMPONENT_FACTORY_REF_MAP="ng2.ComponentFactoryRefMap",NG2_ZONE="ng2.NgZone",NG1_CONTROLLER="$controller",NG1_SCOPE="$scope",NG1_ROOT_SCOPE="$rootScope",NG1_COMPILE="$compile",NG1_HTTP_BACKEND="$httpBackend",NG1_INJECTOR="$injector",NG1_PARSE="$parse",NG1_TEMPLATE_CACHE="$templateCache",NG1_TESTABILITY="$$testability",REQUIRE_INJECTOR="?^"+NG2_INJECTOR,INITIAL_VALUE={__UNINITIALIZED__:!0},DowngradeNg2ComponentAdapter=function(){function DowngradeNg2ComponentAdapter(id,info,element,attrs,scope,parentInjector,parse,componentFactory){this.id=id,this.info=info,this.element=element,this.attrs=attrs,this.scope=scope,this.parentInjector=parentInjector,this.parse=parse,this.componentFactory=componentFactory,this.component=null,this.inputChangeCount=0,this.inputChanges=null,this.componentRef=null,this.changeDetector=null,this.contentInsertionPoint=null,this.element[0].id=id,this.componentScope=scope.$new(),this.childNodes=element.contents()}return DowngradeNg2ComponentAdapter.prototype.bootstrapNg2=function(){var childInjector=_angular_core.ReflectiveInjector.resolveAndCreate([{provide:NG1_SCOPE,useValue:this.componentScope}],this.parentInjector);this.contentInsertionPoint=document.createComment("ng1 insertion point"),this.componentRef=this.componentFactory.create(childInjector,[[this.contentInsertionPoint]],this.element[0]),this.changeDetector=this.componentRef.changeDetectorRef,this.component=this.componentRef.instance},DowngradeNg2ComponentAdapter.prototype.setupInputs=function(){for(var _this=this,attrs=this.attrs,inputs=this.info.inputs,i=0;i<inputs.length;i++){var input=inputs[i],expr=null;if(attrs.hasOwnProperty(input.attr)){var observeFn=function(prop){var prevValue=INITIAL_VALUE;return function(value){null!==_this.inputChanges&&(_this.inputChangeCount++,_this.inputChanges[prop]=new Ng1Change(value,prevValue===INITIAL_VALUE?value:prevValue),prevValue=value),_this.component[prop]=value}}(input.prop);attrs.$observe(input.attr,observeFn)}else attrs.hasOwnProperty(input.bindAttr)?expr=attrs[input.bindAttr]:attrs.hasOwnProperty(input.bracketAttr)?expr=attrs[input.bracketAttr]:attrs.hasOwnProperty(input.bindonAttr)?expr=attrs[input.bindonAttr]:attrs.hasOwnProperty(input.bracketParenAttr)&&(expr=attrs[input.bracketParenAttr]);if(null!=expr){var watchFn=function(prop){return function(value,prevValue){null!=_this.inputChanges&&(_this.inputChangeCount++,_this.inputChanges[prop]=new Ng1Change(prevValue,value)),_this.component[prop]=value}}(input.prop);this.componentScope.$watch(expr,watchFn)}}var prototype=this.info.type.prototype;prototype&&prototype.ngOnChanges&&(this.inputChanges={},this.componentScope.$watch(function(){return _this.inputChangeCount},function(){var inputChanges=_this.inputChanges;_this.inputChanges={},_this.component.ngOnChanges(inputChanges)})),this.componentScope.$watch(function(){return _this.changeDetector&&_this.changeDetector.detectChanges()})},DowngradeNg2ComponentAdapter.prototype.projectContent=function(){var childNodes=this.childNodes,parent=this.contentInsertionPoint.parentNode;if(parent)for(var i=0,ii=childNodes.length;i<ii;i++)parent.insertBefore(childNodes[i],this.contentInsertionPoint)},DowngradeNg2ComponentAdapter.prototype.setupOutputs=function(){for(var _this=this,attrs=this.attrs,outputs=this.info.outputs,j=0;j<outputs.length;j++){var output=outputs[j],expr=null,assignExpr=!1,bindonAttr=output.bindonAttr?output.bindonAttr.substring(0,output.bindonAttr.length-6):null,bracketParenAttr=output.bracketParenAttr?"[("+output.bracketParenAttr.substring(2,output.bracketParenAttr.length-8)+")]":null;if(attrs.hasOwnProperty(output.onAttr)?expr=attrs[output.onAttr]:attrs.hasOwnProperty(output.parenAttr)?expr=attrs[output.parenAttr]:attrs.hasOwnProperty(bindonAttr)?(expr=attrs[bindonAttr],assignExpr=!0):attrs.hasOwnProperty(bracketParenAttr)&&(expr=attrs[bracketParenAttr],assignExpr=!0),null!=expr&&null!=assignExpr){var getter=this.parse(expr),setter=getter.assign;if(assignExpr&&!setter)throw new Error("Expression '"+expr+"' is not assignable!");var emitter=this.component[output.prop];if(!emitter)throw new Error("Missing emitter '"+output.prop+"' on component '"+this.info.selector+"'!");emitter.subscribe({next:assignExpr?function(setter){return function(v){return setter(_this.scope,v)}}(setter):function(getter){return function(v){return getter(_this.scope,{$event:v})}}(getter)})}}},DowngradeNg2ComponentAdapter.prototype.registerCleanup=function(){var _this=this;this.element.bind("$destroy",function(){_this.componentScope.$destroy(),_this.componentRef.destroy()})},DowngradeNg2ComponentAdapter}(),Ng1Change=function(){function Ng1Change(previousValue,currentValue){this.previousValue=previousValue,this.currentValue=currentValue}return Ng1Change.prototype.isFirstChange=function(){return this.previousValue===this.currentValue},Ng1Change}(),COMPONENT_SELECTOR=/^[\w|-]*$/,SKEWER_CASE=/-(\w)/g,directiveResolver=new _angular_compiler.DirectiveResolver,CAMEL_CASE=/([A-Z])/g,INITIAL_VALUE$1={__UNINITIALIZED__:!0},NOT_SUPPORTED="NOT_SUPPORTED",UpgradeNg1ComponentAdapterBuilder=function(){function UpgradeNg1ComponentAdapterBuilder(name){this.name=name,this.inputs=[],this.inputsRename=[],this.outputs=[],this.outputsRename=[],this.propertyOutputs=[],this.checkProperties=[],this.propertyMap={},this.linkFn=null,this.directive=null,this.$controller=null;var selector=name.replace(CAMEL_CASE,function(all,next){return"-"+next.toLowerCase()}),self=this;this.type=_angular_core.Directive({selector:selector,inputs:this.inputsRename,outputs:this.outputsRename}).Class({constructor:[new _angular_core.Inject(NG1_SCOPE),_angular_core.ElementRef,function(scope,elementRef){return new UpgradeNg1ComponentAdapter(self.linkFn,scope,self.directive,elementRef,self.$controller,self.inputs,self.outputs,self.propertyOutputs,self.checkProperties,self.propertyMap)}],ngOnInit:function(){},ngOnChanges:function(){},ngDoCheck:function(){}})}return UpgradeNg1ComponentAdapterBuilder.prototype.extractDirective=function(injector){var directives=injector.get(this.name+"Directive");if(directives.length>1)throw new Error("Only support single directive definition for: "+this.name);var directive=directives[0];directive.replace&&this.notSupported("replace"),directive.terminal&&this.notSupported("terminal");var link=directive.link;return"object"==typeof link&&link.post&&this.notSupported("link.post"),directive},UpgradeNg1ComponentAdapterBuilder.prototype.notSupported=function(feature){throw new Error("Upgraded directive '"+this.name+"' does not support '"+feature+"'.")},UpgradeNg1ComponentAdapterBuilder.prototype.extractBindings=function(){var btcIsObject="object"==typeof this.directive.bindToController;if(btcIsObject&&Object.keys(this.directive.scope).length)throw new Error("Binding definitions on scope and controller at the same time are not supported.");var context=btcIsObject?this.directive.bindToController:this.directive.scope;if("object"==typeof context)for(var name in context)if(context.hasOwnProperty(name)){var localName=context[name],type=localName.charAt(0);localName=localName.substr(1)||name;var outputName="output_"+name,outputNameRename=outputName+": "+name,outputNameRenameChange=outputName+": "+name+"Change",inputName="input_"+name,inputNameRename=inputName+": "+name;switch(type){case"=":this.propertyOutputs.push(outputName),this.checkProperties.push(localName),this.outputs.push(outputName),this.outputsRename.push(outputNameRenameChange),this.propertyMap[outputName]=localName,this.inputs.push(inputName),this.inputsRename.push(inputNameRename),this.propertyMap[inputName]=localName;break;case"@":case"<":this.inputs.push(inputName),this.inputsRename.push(inputNameRename),this.propertyMap[inputName]=localName;break;case"&":this.outputs.push(outputName),this.outputsRename.push(outputNameRename),this.propertyMap[outputName]=localName;break;default:var json=JSON.stringify(context);throw new Error("Unexpected mapping '"+type+"' in '"+json+"' in '"+this.name+"' directive.")}}},UpgradeNg1ComponentAdapterBuilder.prototype.compileTemplate=function(compile,templateCache,httpBackend){function compileHtml(html){var div=document.createElement("div");return div.innerHTML=html,compile(div.childNodes)}var _this=this;if(void 0!==this.directive.template)this.linkFn=compileHtml("function"==typeof this.directive.template?this.directive.template():this.directive.template);else{if(!this.directive.templateUrl)throw new Error("Directive '"+this.name+"' is not a component, it is missing template.");var url="function"==typeof this.directive.templateUrl?this.directive.templateUrl():this.directive.templateUrl,html=templateCache.get(url);if(void 0===html)return new Promise(function(resolve,err){httpBackend("GET",url,null,function(status,response){200==status?resolve(_this.linkFn=compileHtml(templateCache.put(url,response))):err("GET "+url+" returned "+status+": "+response)})});this.linkFn=compileHtml(html)}return null},UpgradeNg1ComponentAdapterBuilder.resolve=function(exportedComponents,injector){var promises=[],compile=injector.get(NG1_COMPILE),templateCache=injector.get(NG1_TEMPLATE_CACHE),httpBackend=injector.get(NG1_HTTP_BACKEND),$controller=injector.get(NG1_CONTROLLER);for(var name in exportedComponents)if(exportedComponents.hasOwnProperty(name)){var exportedComponent=exportedComponents[name];exportedComponent.directive=exportedComponent.extractDirective(injector),exportedComponent.$controller=$controller,exportedComponent.extractBindings();var promise=exportedComponent.compileTemplate(compile,templateCache,httpBackend);promise&&promises.push(promise)}return Promise.all(promises)},UpgradeNg1ComponentAdapterBuilder}(),UpgradeNg1ComponentAdapter=function(){function UpgradeNg1ComponentAdapter(linkFn,scope,directive,elementRef,$controller,inputs,outputs,propOuts,checkProperties,propertyMap){this.linkFn=linkFn,this.directive=directive,this.$controller=$controller,this.inputs=inputs,this.outputs=outputs,this.propOuts=propOuts,this.checkProperties=checkProperties,this.propertyMap=propertyMap,this.destinationObj=null,this.checkLastValues=[],this.$element=null,this.element=elementRef.nativeElement,this.componentScope=scope.$new(!!directive.scope),this.$element=element(this.element);var controllerType=directive.controller;directive.bindToController&&controllerType?this.destinationObj=this.buildController(controllerType):this.destinationObj=this.componentScope;for(var i=0;i<inputs.length;i++)this[inputs[i]]=null;for(var j=0;j<outputs.length;j++){var emitter=this[outputs[j]]=new _angular_core.EventEmitter;this.setComponentProperty(outputs[j],function(emitter){return function(value){return emitter.emit(value)}}(emitter))}for(var k=0;k<propOuts.length;k++)this[propOuts[k]]=new _angular_core.EventEmitter,this.checkLastValues.push(INITIAL_VALUE$1)}return UpgradeNg1ComponentAdapter.prototype.ngOnInit=function(){var _this=this;!this.directive.bindToController&&this.directive.controller&&this.buildController(this.directive.controller);var link=this.directive.link;if("object"==typeof link&&(link=link.pre),link){var attrs=NOT_SUPPORTED,transcludeFn=NOT_SUPPORTED,linkController=this.resolveRequired(this.$element,this.directive.require);this.directive.link(this.componentScope,this.$element,attrs,linkController,transcludeFn)}for(var childNode,childNodes=[];childNode=this.element.firstChild;)this.element.removeChild(childNode),childNodes.push(childNode);this.linkFn(this.componentScope,function(clonedElement,scope){for(var i=0,ii=clonedElement.length;i<ii;i++)_this.element.appendChild(clonedElement[i])},{parentBoundTranscludeFn:function(scope,cloneAttach){cloneAttach(childNodes)}}),this.destinationObj.$onInit&&this.destinationObj.$onInit()},UpgradeNg1ComponentAdapter.prototype.ngOnChanges=function(changes){for(var name in changes)if(changes.hasOwnProperty(name)){var change=changes[name];this.setComponentProperty(name,change.currentValue)}},UpgradeNg1ComponentAdapter.prototype.ngDoCheck=function(){for(var count=0,destinationObj=this.destinationObj,lastValues=this.checkLastValues,checkProperties=this.checkProperties,i=0;i<checkProperties.length;i++){var value=destinationObj[checkProperties[i]],last=lastValues[i];if(value!==last)if("number"==typeof value&&isNaN(value)&&"number"==typeof last&&isNaN(last));else{var eventEmitter=this[this.propOuts[i]];eventEmitter.emit(lastValues[i]=value)}}return count},UpgradeNg1ComponentAdapter.prototype.setComponentProperty=function(name,value){this.destinationObj[this.propertyMap[name]]=value},UpgradeNg1ComponentAdapter.prototype.buildController=function(controllerType){var locals={$scope:this.componentScope,$element:this.$element},controller=this.$controller(controllerType,locals,null,this.directive.controllerAs);return this.$element.data(controllerKey(this.directive.name),controller),controller},UpgradeNg1ComponentAdapter.prototype.resolveRequired=function($element,require){if(require){if("string"==typeof require){var name=require,isOptional=!1,startParent=!1,searchParents=!1;"?"==name.charAt(0)&&(isOptional=!0,name=name.substr(1)),"^"==name.charAt(0)&&(searchParents=!0,name=name.substr(1)),"^"==name.charAt(0)&&(startParent=!0,name=name.substr(1));var key=controllerKey(name);startParent&&($element=$element.parent());var dep=searchParents?$element.inheritedData(key):$element.data(key);if(!dep&&!isOptional)throw new Error("Can not locate '"+require+"' in '"+this.directive.name+"'.");return dep}if(require instanceof Array){for(var deps=[],i=0;i<require.length;i++)deps.push(this.resolveRequired($element,require[i]));return deps}throw new Error("Directive '"+this.directive.name+"' require syntax unrecognized: "+this.directive.require)}},UpgradeNg1ComponentAdapter}(),upgradeCount=0,UpgradeAdapter=function(){function UpgradeAdapter(ng2AppModule){if(this.ng2AppModule=ng2AppModule,this.idPrefix="NG2_UPGRADE_"+upgradeCount++ +"_",this.upgradedComponents=[],this.ng1ComponentsToBeUpgraded={},this.providers=[],arguments.length&&!ng2AppModule)throw new _angular_core.BaseException("UpgradeAdapter constructor called with undefined instead of a ng module type")}return UpgradeAdapter.prototype.downgradeNg2Component=function(type){this.upgradedComponents.push(type);var info=getComponentInfo(type);return ng1ComponentDirective(info,""+this.idPrefix+info.selector+"_c")},UpgradeAdapter.prototype.upgradeNg1Component=function(name){return this.ng1ComponentsToBeUpgraded.hasOwnProperty(name)?this.ng1ComponentsToBeUpgraded[name].type:(this.ng1ComponentsToBeUpgraded[name]=new UpgradeNg1ComponentAdapterBuilder(name)).type},UpgradeAdapter.prototype.bootstrap=function(element$$,modules,config){var original$applyFn,rootScopePrototype,rootScope,ng1BootstrapPromise,ng1compilePromise,_this=this,ngZone=new _angular_core.NgZone({enableLongStackTrace:Zone.hasOwnProperty("longStackTraceZoneSpec")}),upgrade=new UpgradeAdapterRef,ng1Injector=null,moduleRef=null,delayApplyExps=[],componentFactoryRefMap={},ng1Module=module$1(this.idPrefix,modules);ng1Module.factory(NG2_INJECTOR,function(){return moduleRef.injector.get(_angular_core.Injector)}).value(NG2_ZONE,ngZone).factory(NG2_COMPILER,function(){return moduleRef.injector.get(_angular_core.Compiler)}).value(NG2_COMPONENT_FACTORY_REF_MAP,componentFactoryRefMap).config(["$provide","$injector",function(provide,ng1Injector){provide.decorator(NG1_ROOT_SCOPE,["$delegate",function(rootScopeDelegate){if(rootScopePrototype=rootScopeDelegate.constructor.prototype,!rootScopePrototype.hasOwnProperty("$apply"))throw new Error("Failed to find '$apply' on '$rootScope'!");return original$applyFn=rootScopePrototype.$apply,rootScopePrototype.$apply=function(exp){return delayApplyExps.push(exp)},rootScope=rootScopeDelegate}]),ng1Injector.has(NG1_TESTABILITY)&&provide.decorator(NG1_TESTABILITY,["$delegate",function(testabilityDelegate){var _this=this,originalWhenStable=testabilityDelegate.whenStable,newWhenStable=function(callback){var whenStableContext=_this;originalWhenStable.call(_this,function(){var ng2Testability=moduleRef.injector.get(_angular_core.Testability);ng2Testability.isStable()?callback.apply(this,arguments):ng2Testability.whenStable(newWhenStable.bind(whenStableContext,callback))})};return testabilityDelegate.whenStable=newWhenStable,testabilityDelegate}])}]),ng1compilePromise=new Promise(function(resolve,reject){ng1Module.run(["$injector","$rootScope",function(injector,rootScope){ng1Injector=injector,UpgradeNg1ComponentAdapterBuilder.resolve(_this.ng1ComponentsToBeUpgraded,injector).then(function(){var DynamicNgUpgradeModule=_angular_core.NgModule({providers:[{provide:NG1_INJECTOR,useFactory:function(){return ng1Injector}},{provide:NG1_COMPILE,useFactory:function(){return ng1Injector.get(NG1_COMPILE)}},_this.providers],imports:_this.ng2AppModule?[_this.ng2AppModule]:[_angular_platformBrowser.BrowserModule]}).Class({constructor:function(){},ngDoBootstrap:function(){}});_angular_platformBrowserDynamic.platformBrowserDynamic()._bootstrapModuleWithZone(DynamicNgUpgradeModule,void 0,ngZone).then(function(ref){moduleRef=ref,element(element$$).data(controllerKey(NG2_INJECTOR),moduleRef.injector),ngZone.onMicrotaskEmpty.subscribe({next:function(_){return ngZone.runOutsideAngular(function(){return rootScope.$evalAsync()})}})}).then(resolve,reject)})}])});var windowAngular=window.angular;return windowAngular.resumeBootstrap=void 0,ngZone.run(function(){bootstrap(element$$,[_this.idPrefix],config)}),ng1BootstrapPromise=new Promise(function(resolve,reject){if(windowAngular.resumeBootstrap){var originalResumeBootstrap=windowAngular.resumeBootstrap;windowAngular.resumeBootstrap=function(){windowAngular.resumeBootstrap=originalResumeBootstrap,windowAngular.resumeBootstrap.apply(this,arguments),resolve()}}else resolve()}),Promise.all([ng1BootstrapPromise,ng1compilePromise]).then(function(){return _this.compileNg2Components(moduleRef.injector.get(_angular_core.Compiler),componentFactoryRefMap)}).then(function(){moduleRef.injector.get(_angular_core.NgZone).run(function(){if(rootScopePrototype){for(rootScopePrototype.$apply=original$applyFn;delayApplyExps.length;)rootScope.$apply(delayApplyExps.shift());upgrade._bootstrapDone(moduleRef,ng1Injector),rootScopePrototype=null}})},onError),upgrade},UpgradeAdapter.prototype.addProvider=function(provider){this.providers.push(provider)},UpgradeAdapter.prototype.upgradeNg1Provider=function(name,options){var token=options&&options.asToken||name;this.providers.push({provide:token,useFactory:function(ng1Injector){return ng1Injector.get(name)},deps:[NG1_INJECTOR]})},UpgradeAdapter.prototype.downgradeNg2Provider=function(token){var factory=function(injector){return injector.get(token)};return factory.$inject=[NG2_INJECTOR],factory},UpgradeAdapter.prototype.compileNg2Components=function(compiler,componentFactoryRefMap){for(var _this=this,promises=[],types=this.upgradedComponents,i=0;i<types.length;i++)promises.push(compiler.compileComponentAsync(types[i],this.ng2AppModule));return Promise.all(promises).then(function(componentFactories){for(var types=_this.upgradedComponents,i=0;i<componentFactories.length;i++)componentFactoryRefMap[getComponentInfo(types[i]).selector]=componentFactories[i];return componentFactoryRefMap},onError)},UpgradeAdapter}(),UpgradeAdapterRef=function(){function UpgradeAdapterRef(){this._readyFn=null,this.ng1RootScope=null,this.ng1Injector=null,this.ng2ModuleRef=null,this.ng2Injector=null}return UpgradeAdapterRef.prototype._bootstrapDone=function(ngModuleRef,ng1Injector){this.ng2ModuleRef=ngModuleRef,this.ng2Injector=ngModuleRef.injector,this.ng1Injector=ng1Injector,this.ng1RootScope=ng1Injector.get(NG1_ROOT_SCOPE),this._readyFn&&this._readyFn(this)},UpgradeAdapterRef.prototype.ready=function(fn){this._readyFn=fn},UpgradeAdapterRef.prototype.dispose=function(){this.ng1Injector.get(NG1_ROOT_SCOPE).$destroy(),this.ng2ModuleRef.destroy()},UpgradeAdapterRef}();exports.UpgradeAdapter=UpgradeAdapter,exports.UpgradeAdapterRef=UpgradeAdapterRef});

esm/src/angular_js.d.ts

@@ -123,2 +123,3 @@ /**
     get(key: string): any;
+    has(key: string): boolean;
 }
@@ -125,0 +126,0 @@ export interface ITestabilityService {

esm/src/angular_js.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"bootstrap":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"angular"},"member":"bootstrap"},"module":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"angular"},"member":"module"},"element":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"angular"},"member":"element"},"version":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"angular"},"member":"version"},"resumeBootstrap":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"angular"},"member":"resumeBootstrap"},"getTestability":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"angular"},"member":"getTestability"}}}
+{"__symbolic":"module","version":1,"metadata":{"bootstrap":{"__symbolic":"error","message":"Reference to a local symbol","line":134,"character":3,"context":{"name":"angular"}},"module":{"__symbolic":"error","message":"Reference to a local symbol","line":134,"character":3,"context":{"name":"angular"}},"element":{"__symbolic":"error","message":"Reference to a local symbol","line":134,"character":3,"context":{"name":"angular"}},"version":{"__symbolic":"error","message":"Reference to a local symbol","line":134,"character":3,"context":{"name":"angular"}},"resumeBootstrap":{"__symbolic":"error","message":"Reference to a local symbol","line":134,"character":3,"context":{"name":"angular"}},"getTestability":{"__symbolic":"error","message":"Reference to a local symbol","line":134,"character":3,"context":{"name":"angular"}}}}

esm/src/metadata.js

@@ -18,3 +18,3 @@ /**
     }
-    var selector = selector.replace(SKEWER_CASE, (all /** TODO #9100 */, letter) => letter.toUpperCase());
+    selector = selector.replace(SKEWER_CASE, (all /** TODO #9100 */, letter) => letter.toUpperCase());
     return {
@@ -21,0 +21,0 @@ type: type,

esm/src/upgrade_adapter.d.ts

@@ -8,3 +8,3 @@ /**
  */
-import { ApplicationRef, Injector, Provider, Type } from '@angular/core';
+import { Injector, NgModuleRef, Provider, Type } from '@angular/core';
 import * as angular from './angular_js';
@@ -51,7 +51,7 @@ /**
  * ```
- * var adapter = new UpgradeAdapter();
+ * var adapter = new UpgradeAdapter(forwardRef(() => MyNg2Module));
  * var module = angular.module('myExample', []);
- * module.directive('ng2', adapter.downgradeNg2Component(Ng2));
+ * module.directive('ng2Comp', adapter.downgradeNg2Component(Ng2));
  *
- * module.directive('ng1', function() {
+ * module.directive('ng1Hello', function() {
  *   return {
@@ -65,12 +65,19 @@ *      scope: { title: '=' },
  * @Component({
- *   selector: 'ng2',
+ *   selector: 'ng2-comp',
  *   inputs: ['name'],
- *   template: 'ng2[<ng1 [title]="name">transclude</ng1>](<ng-content></ng-content>)',
- *   directives: [adapter.upgradeNg1Component('ng1')]
+ *   template: 'ng2[<ng1-hello [title]="name">transclude</ng1-hello>](<ng-content></ng-content>)',
+ *   directives:
  * })
- * class Ng2 {
+ * class Ng2Component {
  * }
  *
- * document.body.innerHTML = '<ng2 name="World">project</ng2>';
+ * @NgModule({
+ *   declarations: [Ng2Component, adapter.upgradeNg1Component('ng1Hello')],
+ *   imports: [BrowserModule]
+ * })
+ * class MyNg2Module {}
  *
+ *
+ * document.body.innerHTML = '<ng2-comp name="World">project</ng2-comp>';
+ *
  * adapter.bootstrap(document.body, ['myExample']).ready(function() {
@@ -80,2 +87,3 @@ *   expect(document.body.textContent).toEqual(
  * });
+ *
  * ```
@@ -86,2 +94,4 @@ *
 export declare class UpgradeAdapter {
+    private ng2AppModule;
+    constructor(ng2AppModule?: Type);
     /**
@@ -115,3 +125,3 @@ * Allows Angular v2 Component to be used from AngularJS v1.
      * ```
-     * var adapter = new UpgradeAdapter();
+     * var adapter = new UpgradeAdapter(forwardRef(() => MyNg2Module));
      * var module = angular.module('myExample', []);
@@ -129,2 +139,8 @@ * module.directive('greet', adapter.downgradeNg2Component(Greeter));
      *
+     * @NgModule({
+     *   declarations: [Greeter],
+     *   imports: [BrowserModule]
+     * })
+     * class MyNg2Module {}
+     *
      * document.body.innerHTML =
@@ -184,3 +200,3 @@ *   'ng1 template: <greet salutation="Hello" [name]="world">text</greet>';
      * ```
-     * var adapter = new UpgradeAdapter();
+     * var adapter = new UpgradeAdapter(forwardRef(() => MyNg2Module));
      * var module = angular.module('myExample', []);
@@ -200,3 +216,2 @@ *
      *   template: 'ng2 template: <greet salutation="Hello" [name]="world">text</greet>'
-     *   directives: [adapter.upgradeNg1Component('greet')]
      * })
@@ -206,2 +221,8 @@ * class Ng2 {
      *
+     * @NgModule({
+     *   declarations: [Ng2, adapter.upgradeNg1Component('greet')],
+     *   imports: [BrowserModule]
+     * })
+     * class MyNg2Module {}
+     *
      * document.body.innerHTML = '<ng2></ng2>';
@@ -240,4 +261,3 @@ *
      *   inputs: ['name'],
-     *   template: 'ng2[<ng1 [title]="name">transclude</ng1>](<ng-content></ng-content>)',
-     *   directives: [adapter.upgradeNg1Component('ng1')]
+     *   template: 'ng2[<ng1 [title]="name">transclude</ng1>](<ng-content></ng-content>)'
      * })
@@ -247,2 +267,8 @@ * class Ng2 {
      *
+     * @NgModule({
+     *   declarations: [Ng2, adapter.upgradeNg1Component('ng1')],
+     *   imports: [BrowserModule]
+     * })
+     * class MyNg2Module {}
+     *
      * document.body.innerHTML = '<ng2 name="World">project</ng2>';
@@ -292,2 +318,5 @@ *
      *```
+     *
+     * @deprecated Use NgModules and `new UpgradeAdapter(ng2AppModule)` to configure top-level
+     *providers
      */
@@ -355,3 +384,3 @@ addProvider(provider: Type | Provider | any[] | any): void;
 /**
- * Use `UgradeAdapterRef` to control a hybrid AngularJS v1 / Angular v2 application.
+ * Use `UpgradeAdapterRef` to control a hybrid AngularJS v1 / Angular v2 application.
  *
@@ -363,3 +392,3 @@ * @experimental
     ng1Injector: angular.IInjectorService;
-    ng2ApplicationRef: ApplicationRef;
+    ng2ModuleRef: NgModuleRef<any>;
     ng2Injector: Injector;
@@ -366,0 +395,0 @@ /**

esm/src/upgrade_adapter.js

@@ -8,5 +8,5 @@ /**
  */
-import { ApplicationRef, ComponentResolver, NgZone, ReflectiveInjector, Testability } from '@angular/core';
-import { BROWSER_APP_PROVIDERS, browserPlatform } from '@angular/platform-browser';
-import { BROWSER_APP_COMPILER_PROVIDERS } from '@angular/platform-browser-dynamic';
+import { BaseException, Compiler, Injector, NgModule, NgZone, Testability } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import * as angular from './angular_js';
@@ -59,7 +59,7 @@ import { NG1_COMPILE, NG1_INJECTOR, NG1_PARSE, NG1_ROOT_SCOPE, NG1_TESTABILITY, NG2_COMPILER, NG2_COMPONENT_FACTORY_REF_MAP, NG2_INJECTOR, NG2_ZONE, REQUIRE_INJECTOR } from './constants';
  * ```
- * var adapter = new UpgradeAdapter();
+ * var adapter = new UpgradeAdapter(forwardRef(() => MyNg2Module));
  * var module = angular.module('myExample', []);
- * module.directive('ng2', adapter.downgradeNg2Component(Ng2));
+ * module.directive('ng2Comp', adapter.downgradeNg2Component(Ng2));
  *
- * module.directive('ng1', function() {
+ * module.directive('ng1Hello', function() {
  *   return {
@@ -73,12 +73,19 @@ *      scope: { title: '=' },
  * @Component({
- *   selector: 'ng2',
+ *   selector: 'ng2-comp',
  *   inputs: ['name'],
- *   template: 'ng2[<ng1 [title]="name">transclude</ng1>](<ng-content></ng-content>)',
- *   directives: [adapter.upgradeNg1Component('ng1')]
+ *   template: 'ng2[<ng1-hello [title]="name">transclude</ng1-hello>](<ng-content></ng-content>)',
+ *   directives:
  * })
- * class Ng2 {
+ * class Ng2Component {
  * }
  *
- * document.body.innerHTML = '<ng2 name="World">project</ng2>';
+ * @NgModule({
+ *   declarations: [Ng2Component, adapter.upgradeNg1Component('ng1Hello')],
+ *   imports: [BrowserModule]
+ * })
+ * class MyNg2Module {}
  *
+ *
+ * document.body.innerHTML = '<ng2-comp name="World">project</ng2-comp>';
+ *
  * adapter.bootstrap(document.body, ['myExample']).ready(function() {
@@ -88,2 +95,3 @@ *   expect(document.body.textContent).toEqual(
  * });
+ *
  * ```
@@ -94,3 +102,6 @@ *
 export class UpgradeAdapter {
-    constructor() {
+    // the ng2AppModule param should be required once the deprecated @Component.directives prop is
+    // removed
+    constructor(ng2AppModule) {
+        this.ng2AppModule = ng2AppModule;
         /* @internal */
@@ -100,6 +111,16 @@ this.idPrefix = `NG2_UPGRADE_${upgradeCount++}_`;
         this.upgradedComponents = [];
+        /**
+         * An internal map of ng1 components which need to up upgraded to ng2.
+         *
+         * We can't upgrade until injector is instantiated and we can retrieve the component metadata.
+         * For this reason we keep a list of components to upgrade until ng1 injector is bootstrapped.
+         *
+         * @internal
+         */
+        this.ng1ComponentsToBeUpgraded = {};
         /* @internal */
-        this.downgradedComponents = {};
-        /* @internal */
         this.providers = [];
+        if (arguments.length && !ng2AppModule) {
+            throw new BaseException('UpgradeAdapter constructor called with undefined instead of a ng module type');
+        }
     }
@@ -134,3 +155,3 @@ /**
      * ```
-     * var adapter = new UpgradeAdapter();
+     * var adapter = new UpgradeAdapter(forwardRef(() => MyNg2Module));
      * var module = angular.module('myExample', []);
@@ -148,2 +169,8 @@ * module.directive('greet', adapter.downgradeNg2Component(Greeter));
      *
+     * @NgModule({
+     *   declarations: [Greeter],
+     *   imports: [BrowserModule]
+     * })
+     * class MyNg2Module {}
+     *
      * document.body.innerHTML =
@@ -207,3 +234,3 @@ *   'ng1 template: <greet salutation="Hello" [name]="world">text</greet>';
      * ```
-     * var adapter = new UpgradeAdapter();
+     * var adapter = new UpgradeAdapter(forwardRef(() => MyNg2Module));
      * var module = angular.module('myExample', []);
@@ -223,3 +250,2 @@ *
      *   template: 'ng2 template: <greet salutation="Hello" [name]="world">text</greet>'
-     *   directives: [adapter.upgradeNg1Component('greet')]
      * })
@@ -229,2 +255,8 @@ * class Ng2 {
      *
+     * @NgModule({
+     *   declarations: [Ng2, adapter.upgradeNg1Component('greet')],
+     *   imports: [BrowserModule]
+     * })
+     * class MyNg2Module {}
+     *
      * document.body.innerHTML = '<ng2></ng2>';
@@ -238,7 +270,8 @@ *
     upgradeNg1Component(name) {
-        if (this.downgradedComponents.hasOwnProperty(name)) {
-            return this.downgradedComponents[name].type;
+        if (this.ng1ComponentsToBeUpgraded.hasOwnProperty(name)) {
+            return this.ng1ComponentsToBeUpgraded[name].type;
         }
         else {
-            return (this.downgradedComponents[name] = new UpgradeNg1ComponentAdapterBuilder(name)).type;
+            return (this.ng1ComponentsToBeUpgraded[name] = new UpgradeNg1ComponentAdapterBuilder(name))
+                .type;
         }
@@ -271,4 +304,3 @@ }
      *   inputs: ['name'],
-     *   template: 'ng2[<ng1 [title]="name">transclude</ng1>](<ng-content></ng-content>)',
-     *   directives: [adapter.upgradeNg1Component('ng1')]
+     *   template: 'ng2[<ng1 [title]="name">transclude</ng1>](<ng-content></ng-content>)'
      * })
@@ -278,2 +310,8 @@ * class Ng2 {
      *
+     * @NgModule({
+     *   declarations: [Ng2, adapter.upgradeNg1Component('ng1')],
+     *   imports: [BrowserModule]
+     * })
+     * class MyNg2Module {}
+     *
      * document.body.innerHTML = '<ng2 name="World">project</ng2>';
@@ -288,16 +326,6 @@ *
     bootstrap(element, modules, config) {
+        const ngZone = new NgZone({ enableLongStackTrace: Zone.hasOwnProperty('longStackTraceZoneSpec') });
         var upgrade = new UpgradeAdapterRef();
         var ng1Injector = null;
-        var platformRef = browserPlatform();
-        var applicationRef = ReflectiveInjector
-            .resolveAndCreate([
-            BROWSER_APP_PROVIDERS, BROWSER_APP_COMPILER_PROVIDERS,
-            { provide: NG1_INJECTOR, useFactory: () => ng1Injector },
-            { provide: NG1_COMPILE, useFactory: () => ng1Injector.get(NG1_COMPILE) },
-            this.providers
-        ], platformRef.injector)
-            .get(ApplicationRef);
-        var injector = applicationRef.injector;
-        var ngZone = injector.get(NgZone);
-        var compiler = injector.get(ComponentResolver);
+        var moduleRef = null;
         var delayApplyExps = [];
@@ -309,18 +337,20 @@ var original$applyFn;
         var ng1Module = angular.module(this.idPrefix, modules);
-        var ng1BootstrapPromise = null;
-        var ng1compilePromise = null;
-        ng1Module.value(NG2_INJECTOR, injector)
+        var ng1BootstrapPromise;
+        var ng1compilePromise;
+        ng1Module.factory(NG2_INJECTOR, () => moduleRef.injector.get(Injector))
             .value(NG2_ZONE, ngZone)
-            .value(NG2_COMPILER, compiler)
+            .factory(NG2_COMPILER, () => moduleRef.injector.get(Compiler))
             .value(NG2_COMPONENT_FACTORY_REF_MAP, componentFactoryRefMap)
             .config([
             '$provide', '$injector',
-                (provide /** TODO #???? */, ng1Injector /** TODO #???? */) => {
+                (provide /** TODO #???? */, ng1Injector) => {
                 provide.decorator(NG1_ROOT_SCOPE, [
                     '$delegate',
                     function (rootScopeDelegate) {
+                        // Capture the root apply so that we can delay first call to $apply until we
+                        // bootstrap Angular 2 and then we replay and restore the $apply.
                         rootScopePrototype = rootScopeDelegate.constructor.prototype;
                         if (rootScopePrototype.hasOwnProperty('$apply')) {
                             original$applyFn = rootScopePrototype.$apply;
-                            rootScopePrototype.$apply = (exp /** TODO #???? */) => delayApplyExps.push(exp);
+                            rootScopePrototype.$apply = (exp) => delayApplyExps.push(exp);
                         }
@@ -337,7 +367,7 @@ else {
                         function (testabilityDelegate) {
-                            var ng2Testability = injector.get(Testability);
-                            var origonalWhenStable = testabilityDelegate.whenStable;
+                            var originalWhenStable = testabilityDelegate.whenStable;
                             var newWhenStable = (callback) => {
                                 var whenStableContext = this;
-                                origonalWhenStable.call(this, function () {
+                                originalWhenStable.call(this, function () {
+                                    var ng2Testability = moduleRef.injector.get(Testability);
                                     if (ng2Testability.isStable()) {
@@ -363,7 +393,25 @@ callback.apply(this, arguments);
                     ng1Injector = injector;
-                    ngZone.onMicrotaskEmpty.subscribe({
-                        next: (_ /** TODO #???? */) => ngZone.runOutsideAngular(() => rootScope.$evalAsync())
+                    UpgradeNg1ComponentAdapterBuilder.resolve(this.ng1ComponentsToBeUpgraded, injector)
+                        .then(() => {
+                        // At this point we have ng1 injector and we have lifted ng1 components into ng2, we
+                        // now can bootstrap ng2.
+                        var DynamicNgUpgradeModule = NgModule({
+                            providers: [
+                                { provide: NG1_INJECTOR, useFactory: () => ng1Injector },
+                                { provide: NG1_COMPILE, useFactory: () => ng1Injector.get(NG1_COMPILE) },
+                                this.providers
+                            ],
+                            imports: this.ng2AppModule ? [this.ng2AppModule] : [BrowserModule]
+                        }).Class({ constructor: function () { }, ngDoBootstrap: function () { } });
+                        platformBrowserDynamic()
+                            ._bootstrapModuleWithZone(DynamicNgUpgradeModule, undefined, ngZone)
+                            .then((ref) => {
+                            moduleRef = ref;
+                            angular.element(element).data(controllerKey(NG2_INJECTOR), moduleRef.injector);
+                            ngZone.onMicrotaskEmpty.subscribe({
+                                next: (_) => ngZone.runOutsideAngular(() => rootScope.$evalAsync())
+                            });
+                        })
+                            .then(resolve, reject);
                     });
-                    UpgradeNg1ComponentAdapterBuilder.resolve(this.downgradedComponents, injector)
-                        .then(resolve, reject);
                 }
@@ -375,3 +423,2 @@ ]);
         windowAngular.resumeBootstrap = undefined;
-        angular.element(element).data(controllerKey(NG2_INJECTOR), injector);
         ngZone.run(() => { angular.bootstrap(element, [this.idPrefix], config); });
@@ -391,9 +438,8 @@ ng1BootstrapPromise = new Promise((resolve, reject) => {
         });
-        Promise
-            .all([
-            this.compileNg2Components(compiler, componentFactoryRefMap), ng1BootstrapPromise,
-            ng1compilePromise
-        ])
+        Promise.all([ng1BootstrapPromise, ng1compilePromise])
             .then(() => {
-            ngZone.run(() => {
+            return this.compileNg2Components(moduleRef.injector.get(Compiler), componentFactoryRefMap);
+        })
+            .then(() => {
+            moduleRef.injector.get(NgZone).run(() => {
                 if (rootScopePrototype) {
@@ -404,3 +450,3 @@ rootScopePrototype.$apply = original$applyFn; // restore original $apply
                     }
-                    upgrade._bootstrapDone(applicationRef, ng1Injector);
+                    upgrade._bootstrapDone(moduleRef, ng1Injector);
                     rootScopePrototype = null;
@@ -447,2 +493,5 @@ }
      *```
+     *
+     * @deprecated Use NgModules and `new UpgradeAdapter(ng2AppModule)` to configure top-level
+     *providers
      */
@@ -522,3 +571,3 @@ addProvider(provider) { this.providers.push(provider); }
         for (var i = 0; i < types.length; i++) {
-            promises.push(compiler.resolveComponent(types[i]));
+            promises.push(compiler.compileComponentAsync(types[i], this.ng2AppModule));
         }
@@ -546,3 +595,2 @@ return Promise.all(promises).then((componentFactories) => {
                         throw new Error('Expecting ComponentFactory for: ' + info.selector);
-                    var domElement = element[0];
                     if (parentInjector === null) {
@@ -564,3 +612,3 @@ parentInjector = ng1Injector.get(NG2_INJECTOR);
 /**
- * Use `UgradeAdapterRef` to control a hybrid AngularJS v1 / Angular v2 application.
+ * Use `UpgradeAdapterRef` to control a hybrid AngularJS v1 / Angular v2 application.
  *
@@ -575,9 +623,9 @@ * @experimental
         this.ng1Injector = null;
-        this.ng2ApplicationRef = null;
+        this.ng2ModuleRef = null;
         this.ng2Injector = null;
     }
     /* @internal */
-    _bootstrapDone(applicationRef, ng1Injector) {
-        this.ng2ApplicationRef = applicationRef;
-        this.ng2Injector = applicationRef.injector;
+    _bootstrapDone(ngModuleRef, ng1Injector) {
+        this.ng2ModuleRef = ngModuleRef;
+        this.ng2Injector = ngModuleRef.injector;
         this.ng1Injector = ng1Injector;
@@ -600,5 +648,5 @@ this.ng1RootScope = ng1Injector.get(NG1_ROOT_SCOPE);
         this.ng1Injector.get(NG1_ROOT_SCOPE).$destroy();
-        this.ng2ApplicationRef.dispose();
+        this.ng2ModuleRef.destroy();
     }
 }
 //# sourceMappingURL=upgrade_adapter.js.map

esm/src/upgrade_ng1_adapter.d.ts

@@ -29,6 +29,9 @@ /**
     extractBindings(): void;
-    compileTemplate(compile: angular.ICompileService, templateCache: angular.ITemplateCacheService, httpBackend: angular.IHttpBackendService): Promise<any>;
+    compileTemplate(compile: angular.ICompileService, templateCache: angular.ITemplateCacheService, httpBackend: angular.IHttpBackendService): Promise<angular.ILinkFn>;
+    /**
+     * Upgrade ng1 components into Angular 2.
+     */
     static resolve(exportedComponents: {
         [name: string]: UpgradeNg1ComponentAdapterBuilder;
-    }, injector: angular.IInjectorService): Promise<any>;
+    }, injector: angular.IInjectorService): Promise<angular.ILinkFn[]>;
 }

esm/src/upgrade_ng1_adapter.js

@@ -149,2 +149,5 @@ /**
     }
+    /**
+     * Upgrade ng1 components into Angular 2.
+     */
     static resolve(exportedComponents, injector) {
@@ -151,0 +154,0 @@ var promises = [];

package.json

 {
   "name": "@angular/upgrade",
-  "version": "2.0.0-rc.4",
+  "version": "2.0.0-rc.5",
   "description": "",
@@ -10,6 +10,6 @@ "main": "upgrade.js",
   "peerDependencies": {
-    "@angular/core": "^2.0.0-rc.4",
-    "@angular/compiler": "^2.0.0-rc.4",
-    "@angular/platform-browser": "^2.0.0-rc.4",
-    "@angular/platform-browser-dynamic": "^2.0.0-rc.4"
+    "@angular/core": "^2.0.0-rc.5",
+    "@angular/compiler": "^2.0.0-rc.5",
+    "@angular/platform-browser": "^2.0.0-rc.5",
+    "@angular/platform-browser-dynamic": "^2.0.0-rc.5"
   },
@@ -16,0 +16,0 @@ "repository": {

src/angular_js.d.ts

@@ -123,2 +123,3 @@ /**
     get(key: string): any;
+    has(key: string): boolean;
 }
@@ -125,0 +126,0 @@ export interface ITestabilityService {

src/angular_js.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"bootstrap":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"angular"},"member":"bootstrap"},"module":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"angular"},"member":"module"},"element":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"angular"},"member":"element"},"version":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"angular"},"member":"version"},"resumeBootstrap":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"angular"},"member":"resumeBootstrap"},"getTestability":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"angular"},"member":"getTestability"}}}
+{"__symbolic":"module","version":1,"metadata":{"bootstrap":{"__symbolic":"error","message":"Reference to a local symbol","line":134,"character":3,"context":{"name":"angular"}},"module":{"__symbolic":"error","message":"Reference to a local symbol","line":134,"character":3,"context":{"name":"angular"}},"element":{"__symbolic":"error","message":"Reference to a local symbol","line":134,"character":3,"context":{"name":"angular"}},"version":{"__symbolic":"error","message":"Reference to a local symbol","line":134,"character":3,"context":{"name":"angular"}},"resumeBootstrap":{"__symbolic":"error","message":"Reference to a local symbol","line":134,"character":3,"context":{"name":"angular"}},"getTestability":{"__symbolic":"error","message":"Reference to a local symbol","line":134,"character":3,"context":{"name":"angular"}}}}

src/metadata.js

@@ -19,3 +19,3 @@ /**
     }
-    var selector = selector.replace(SKEWER_CASE, function (all /** TODO #9100 */, letter) { return letter.toUpperCase(); });
+    selector = selector.replace(SKEWER_CASE, function (all /** TODO #9100 */, letter) { return letter.toUpperCase(); });
     return {
@@ -22,0 +22,0 @@ type: type,

src/upgrade_adapter.d.ts

@@ -8,3 +8,3 @@ /**
  */
-import { ApplicationRef, Injector, Provider, Type } from '@angular/core';
+import { Injector, NgModuleRef, Provider, Type } from '@angular/core';
 import * as angular from './angular_js';
@@ -51,7 +51,7 @@ /**
  * ```
- * var adapter = new UpgradeAdapter();
+ * var adapter = new UpgradeAdapter(forwardRef(() => MyNg2Module));
  * var module = angular.module('myExample', []);
- * module.directive('ng2', adapter.downgradeNg2Component(Ng2));
+ * module.directive('ng2Comp', adapter.downgradeNg2Component(Ng2));
  *
- * module.directive('ng1', function() {
+ * module.directive('ng1Hello', function() {
  *   return {
@@ -65,12 +65,19 @@ *      scope: { title: '=' },
  * @Component({
- *   selector: 'ng2',
+ *   selector: 'ng2-comp',
  *   inputs: ['name'],
- *   template: 'ng2[<ng1 [title]="name">transclude</ng1>](<ng-content></ng-content>)',
- *   directives: [adapter.upgradeNg1Component('ng1')]
+ *   template: 'ng2[<ng1-hello [title]="name">transclude</ng1-hello>](<ng-content></ng-content>)',
+ *   directives:
  * })
- * class Ng2 {
+ * class Ng2Component {
  * }
  *
- * document.body.innerHTML = '<ng2 name="World">project</ng2>';
+ * @NgModule({
+ *   declarations: [Ng2Component, adapter.upgradeNg1Component('ng1Hello')],
+ *   imports: [BrowserModule]
+ * })
+ * class MyNg2Module {}
  *
+ *
+ * document.body.innerHTML = '<ng2-comp name="World">project</ng2-comp>';
+ *
  * adapter.bootstrap(document.body, ['myExample']).ready(function() {
@@ -80,2 +87,3 @@ *   expect(document.body.textContent).toEqual(
  * });
+ *
  * ```
@@ -86,2 +94,4 @@ *
 export declare class UpgradeAdapter {
+    private ng2AppModule;
+    constructor(ng2AppModule?: Type);
     /**
@@ -115,3 +125,3 @@ * Allows Angular v2 Component to be used from AngularJS v1.
      * ```
-     * var adapter = new UpgradeAdapter();
+     * var adapter = new UpgradeAdapter(forwardRef(() => MyNg2Module));
      * var module = angular.module('myExample', []);
@@ -129,2 +139,8 @@ * module.directive('greet', adapter.downgradeNg2Component(Greeter));
      *
+     * @NgModule({
+     *   declarations: [Greeter],
+     *   imports: [BrowserModule]
+     * })
+     * class MyNg2Module {}
+     *
      * document.body.innerHTML =
@@ -184,3 +200,3 @@ *   'ng1 template: <greet salutation="Hello" [name]="world">text</greet>';
      * ```
-     * var adapter = new UpgradeAdapter();
+     * var adapter = new UpgradeAdapter(forwardRef(() => MyNg2Module));
      * var module = angular.module('myExample', []);
@@ -200,3 +216,2 @@ *
      *   template: 'ng2 template: <greet salutation="Hello" [name]="world">text</greet>'
-     *   directives: [adapter.upgradeNg1Component('greet')]
      * })
@@ -206,2 +221,8 @@ * class Ng2 {
      *
+     * @NgModule({
+     *   declarations: [Ng2, adapter.upgradeNg1Component('greet')],
+     *   imports: [BrowserModule]
+     * })
+     * class MyNg2Module {}
+     *
      * document.body.innerHTML = '<ng2></ng2>';
@@ -240,4 +261,3 @@ *
      *   inputs: ['name'],
-     *   template: 'ng2[<ng1 [title]="name">transclude</ng1>](<ng-content></ng-content>)',
-     *   directives: [adapter.upgradeNg1Component('ng1')]
+     *   template: 'ng2[<ng1 [title]="name">transclude</ng1>](<ng-content></ng-content>)'
      * })
@@ -247,2 +267,8 @@ * class Ng2 {
      *
+     * @NgModule({
+     *   declarations: [Ng2, adapter.upgradeNg1Component('ng1')],
+     *   imports: [BrowserModule]
+     * })
+     * class MyNg2Module {}
+     *
      * document.body.innerHTML = '<ng2 name="World">project</ng2>';
@@ -292,2 +318,5 @@ *
      *```
+     *
+     * @deprecated Use NgModules and `new UpgradeAdapter(ng2AppModule)` to configure top-level
+     *providers
      */
@@ -355,3 +384,3 @@ addProvider(provider: Type | Provider | any[] | any): void;
 /**
- * Use `UgradeAdapterRef` to control a hybrid AngularJS v1 / Angular v2 application.
+ * Use `UpgradeAdapterRef` to control a hybrid AngularJS v1 / Angular v2 application.
  *
@@ -363,3 +392,3 @@ * @experimental
     ng1Injector: angular.IInjectorService;
-    ng2ApplicationRef: ApplicationRef;
+    ng2ModuleRef: NgModuleRef<any>;
     ng2Injector: Injector;
@@ -366,0 +395,0 @@ /**

src/upgrade_adapter.js

@@ -59,7 +59,7 @@ /**
  * ```
- * var adapter = new UpgradeAdapter();
+ * var adapter = new UpgradeAdapter(forwardRef(() => MyNg2Module));
  * var module = angular.module('myExample', []);
- * module.directive('ng2', adapter.downgradeNg2Component(Ng2));
+ * module.directive('ng2Comp', adapter.downgradeNg2Component(Ng2));
  *
- * module.directive('ng1', function() {
+ * module.directive('ng1Hello', function() {
  *   return {
@@ -73,12 +73,19 @@ *      scope: { title: '=' },
  * @Component({
- *   selector: 'ng2',
+ *   selector: 'ng2-comp',
  *   inputs: ['name'],
- *   template: 'ng2[<ng1 [title]="name">transclude</ng1>](<ng-content></ng-content>)',
- *   directives: [adapter.upgradeNg1Component('ng1')]
+ *   template: 'ng2[<ng1-hello [title]="name">transclude</ng1-hello>](<ng-content></ng-content>)',
+ *   directives:
  * })
- * class Ng2 {
+ * class Ng2Component {
  * }
  *
- * document.body.innerHTML = '<ng2 name="World">project</ng2>';
+ * @NgModule({
+ *   declarations: [Ng2Component, adapter.upgradeNg1Component('ng1Hello')],
+ *   imports: [BrowserModule]
+ * })
+ * class MyNg2Module {}
  *
+ *
+ * document.body.innerHTML = '<ng2-comp name="World">project</ng2-comp>';
+ *
  * adapter.bootstrap(document.body, ['myExample']).ready(function() {
@@ -88,2 +95,3 @@ *   expect(document.body.textContent).toEqual(
  * });
+ *
  * ```
@@ -94,3 +102,6 @@ *
 var UpgradeAdapter = (function () {
-    function UpgradeAdapter() {
+    // the ng2AppModule param should be required once the deprecated @Component.directives prop is
+    // removed
+    function UpgradeAdapter(ng2AppModule) {
+        this.ng2AppModule = ng2AppModule;
         /* @internal */
@@ -100,6 +111,16 @@ this.idPrefix = "NG2_UPGRADE_" + upgradeCount++ + "_";
         this.upgradedComponents = [];
+        /**
+         * An internal map of ng1 components which need to up upgraded to ng2.
+         *
+         * We can't upgrade until injector is instantiated and we can retrieve the component metadata.
+         * For this reason we keep a list of components to upgrade until ng1 injector is bootstrapped.
+         *
+         * @internal
+         */
+        this.ng1ComponentsToBeUpgraded = {};
         /* @internal */
-        this.downgradedComponents = {};
-        /* @internal */
         this.providers = [];
+        if (arguments.length && !ng2AppModule) {
+            throw new core_1.BaseException('UpgradeAdapter constructor called with undefined instead of a ng module type');
+        }
     }
@@ -134,3 +155,3 @@ /**
      * ```
-     * var adapter = new UpgradeAdapter();
+     * var adapter = new UpgradeAdapter(forwardRef(() => MyNg2Module));
      * var module = angular.module('myExample', []);
@@ -148,2 +169,8 @@ * module.directive('greet', adapter.downgradeNg2Component(Greeter));
      *
+     * @NgModule({
+     *   declarations: [Greeter],
+     *   imports: [BrowserModule]
+     * })
+     * class MyNg2Module {}
+     *
      * document.body.innerHTML =
@@ -207,3 +234,3 @@ *   'ng1 template: <greet salutation="Hello" [name]="world">text</greet>';
      * ```
-     * var adapter = new UpgradeAdapter();
+     * var adapter = new UpgradeAdapter(forwardRef(() => MyNg2Module));
      * var module = angular.module('myExample', []);
@@ -223,3 +250,2 @@ *
      *   template: 'ng2 template: <greet salutation="Hello" [name]="world">text</greet>'
-     *   directives: [adapter.upgradeNg1Component('greet')]
      * })
@@ -229,2 +255,8 @@ * class Ng2 {
      *
+     * @NgModule({
+     *   declarations: [Ng2, adapter.upgradeNg1Component('greet')],
+     *   imports: [BrowserModule]
+     * })
+     * class MyNg2Module {}
+     *
      * document.body.innerHTML = '<ng2></ng2>';
@@ -238,7 +270,8 @@ *
     UpgradeAdapter.prototype.upgradeNg1Component = function (name) {
-        if (this.downgradedComponents.hasOwnProperty(name)) {
-            return this.downgradedComponents[name].type;
+        if (this.ng1ComponentsToBeUpgraded.hasOwnProperty(name)) {
+            return this.ng1ComponentsToBeUpgraded[name].type;
         }
         else {
-            return (this.downgradedComponents[name] = new upgrade_ng1_adapter_1.UpgradeNg1ComponentAdapterBuilder(name)).type;
+            return (this.ng1ComponentsToBeUpgraded[name] = new upgrade_ng1_adapter_1.UpgradeNg1ComponentAdapterBuilder(name))
+                .type;
         }
@@ -271,4 +304,3 @@ };
      *   inputs: ['name'],
-     *   template: 'ng2[<ng1 [title]="name">transclude</ng1>](<ng-content></ng-content>)',
-     *   directives: [adapter.upgradeNg1Component('ng1')]
+     *   template: 'ng2[<ng1 [title]="name">transclude</ng1>](<ng-content></ng-content>)'
      * })
@@ -278,2 +310,8 @@ * class Ng2 {
      *
+     * @NgModule({
+     *   declarations: [Ng2, adapter.upgradeNg1Component('ng1')],
+     *   imports: [BrowserModule]
+     * })
+     * class MyNg2Module {}
+     *
      * document.body.innerHTML = '<ng2 name="World">project</ng2>';
@@ -289,16 +327,6 @@ *
         var _this = this;
+        var ngZone = new core_1.NgZone({ enableLongStackTrace: Zone.hasOwnProperty('longStackTraceZoneSpec') });
         var upgrade = new UpgradeAdapterRef();
         var ng1Injector = null;
-        var platformRef = platform_browser_1.browserPlatform();
-        var applicationRef = core_1.ReflectiveInjector
-            .resolveAndCreate([
-            platform_browser_1.BROWSER_APP_PROVIDERS, platform_browser_dynamic_1.BROWSER_APP_COMPILER_PROVIDERS,
-            { provide: constants_1.NG1_INJECTOR, useFactory: function () { return ng1Injector; } },
-            { provide: constants_1.NG1_COMPILE, useFactory: function () { return ng1Injector.get(constants_1.NG1_COMPILE); } },
-            this.providers
-        ], platformRef.injector)
-            .get(core_1.ApplicationRef);
-        var injector = applicationRef.injector;
-        var ngZone = injector.get(core_1.NgZone);
-        var compiler = injector.get(core_1.ComponentResolver);
+        var moduleRef = null;
         var delayApplyExps = [];
@@ -310,20 +338,20 @@ var original$applyFn;
         var ng1Module = angular.module(this.idPrefix, modules);
-        var ng1BootstrapPromise = null;
-        var ng1compilePromise = null;
-        ng1Module.value(constants_1.NG2_INJECTOR, injector)
+        var ng1BootstrapPromise;
+        var ng1compilePromise;
+        ng1Module.factory(constants_1.NG2_INJECTOR, function () { return moduleRef.injector.get(core_1.Injector); })
             .value(constants_1.NG2_ZONE, ngZone)
-            .value(constants_1.NG2_COMPILER, compiler)
+            .factory(constants_1.NG2_COMPILER, function () { return moduleRef.injector.get(core_1.Compiler); })
             .value(constants_1.NG2_COMPONENT_FACTORY_REF_MAP, componentFactoryRefMap)
             .config([
             '$provide', '$injector',
-            function (provide /** TODO #???? */, ng1Injector /** TODO #???? */) {
+            function (provide /** TODO #???? */, ng1Injector) {
                 provide.decorator(constants_1.NG1_ROOT_SCOPE, [
                     '$delegate',
                     function (rootScopeDelegate) {
+                        // Capture the root apply so that we can delay first call to $apply until we
+                        // bootstrap Angular 2 and then we replay and restore the $apply.
                         rootScopePrototype = rootScopeDelegate.constructor.prototype;
                         if (rootScopePrototype.hasOwnProperty('$apply')) {
                             original$applyFn = rootScopePrototype.$apply;
-                            rootScopePrototype.$apply = function (exp /** TODO #???? */) {
-                                return delayApplyExps.push(exp);
-                            };
+                            rootScopePrototype.$apply = function (exp) { return delayApplyExps.push(exp); };
                         }
@@ -341,7 +369,7 @@ else {
                             var _this = this;
-                            var ng2Testability = injector.get(core_1.Testability);
-                            var origonalWhenStable = testabilityDelegate.whenStable;
+                            var originalWhenStable = testabilityDelegate.whenStable;
                             var newWhenStable = function (callback) {
                                 var whenStableContext = _this;
-                                origonalWhenStable.call(_this, function () {
+                                originalWhenStable.call(_this, function () {
+                                    var ng2Testability = moduleRef.injector.get(core_1.Testability);
                                     if (ng2Testability.isStable()) {
@@ -367,9 +395,25 @@ callback.apply(this, arguments);
                     ng1Injector = injector;
-                    ngZone.onMicrotaskEmpty.subscribe({
-                        next: function (_ /** TODO #???? */) {
-                            return ngZone.runOutsideAngular(function () { return rootScope.$evalAsync(); });
-                        }
+                    upgrade_ng1_adapter_1.UpgradeNg1ComponentAdapterBuilder.resolve(_this.ng1ComponentsToBeUpgraded, injector)
+                        .then(function () {
+                        // At this point we have ng1 injector and we have lifted ng1 components into ng2, we
+                        // now can bootstrap ng2.
+                        var DynamicNgUpgradeModule = core_1.NgModule({
+                            providers: [
+                                { provide: constants_1.NG1_INJECTOR, useFactory: function () { return ng1Injector; } },
+                                { provide: constants_1.NG1_COMPILE, useFactory: function () { return ng1Injector.get(constants_1.NG1_COMPILE); } },
+                                _this.providers
+                            ],
+                            imports: _this.ng2AppModule ? [_this.ng2AppModule] : [platform_browser_1.BrowserModule]
+                        }).Class({ constructor: function () { }, ngDoBootstrap: function () { } });
+                        platform_browser_dynamic_1.platformBrowserDynamic()
+                            ._bootstrapModuleWithZone(DynamicNgUpgradeModule, undefined, ngZone)
+                            .then(function (ref) {
+                            moduleRef = ref;
+                            angular.element(element).data(util_1.controllerKey(constants_1.NG2_INJECTOR), moduleRef.injector);
+                            ngZone.onMicrotaskEmpty.subscribe({
+                                next: function (_) { return ngZone.runOutsideAngular(function () { return rootScope.$evalAsync(); }); }
+                            });
+                        })
+                            .then(resolve, reject);
                     });
-                    upgrade_ng1_adapter_1.UpgradeNg1ComponentAdapterBuilder.resolve(_this.downgradedComponents, injector)
-                        .then(resolve, reject);
                 }
@@ -381,3 +425,2 @@ ]);
         windowAngular.resumeBootstrap = undefined;
-        angular.element(element).data(util_1.controllerKey(constants_1.NG2_INJECTOR), injector);
         ngZone.run(function () { angular.bootstrap(element, [_this.idPrefix], config); });
@@ -397,9 +440,8 @@ ng1BootstrapPromise = new Promise(function (resolve, reject) {
         });
-        Promise
-            .all([
-            this.compileNg2Components(compiler, componentFactoryRefMap), ng1BootstrapPromise,
-            ng1compilePromise
-        ])
+        Promise.all([ng1BootstrapPromise, ng1compilePromise])
             .then(function () {
-            ngZone.run(function () {
+            return _this.compileNg2Components(moduleRef.injector.get(core_1.Compiler), componentFactoryRefMap);
+        })
+            .then(function () {
+            moduleRef.injector.get(core_1.NgZone).run(function () {
                 if (rootScopePrototype) {
@@ -410,3 +452,3 @@ rootScopePrototype.$apply = original$applyFn; // restore original $apply
                     }
-                    upgrade._bootstrapDone(applicationRef, ng1Injector);
+                    upgrade._bootstrapDone(moduleRef, ng1Injector);
                     rootScopePrototype = null;
@@ -453,2 +495,5 @@ }
      *```
+     *
+     * @deprecated Use NgModules and `new UpgradeAdapter(ng2AppModule)` to configure top-level
+     *providers
      */
@@ -529,3 +574,3 @@ UpgradeAdapter.prototype.addProvider = function (provider) { this.providers.push(provider); };
         for (var i = 0; i < types.length; i++) {
-            promises.push(compiler.resolveComponent(types[i]));
+            promises.push(compiler.compileComponentAsync(types[i], this.ng2AppModule));
         }
@@ -555,3 +600,2 @@ return Promise.all(promises).then(function (componentFactories) {
                         throw new Error('Expecting ComponentFactory for: ' + info.selector);
-                    var domElement = element[0];
                     if (parentInjector === null) {
@@ -573,3 +617,3 @@ parentInjector = ng1Injector.get(constants_1.NG2_INJECTOR);
 /**
- * Use `UgradeAdapterRef` to control a hybrid AngularJS v1 / Angular v2 application.
+ * Use `UpgradeAdapterRef` to control a hybrid AngularJS v1 / Angular v2 application.
  *
@@ -584,9 +628,9 @@ * @experimental
         this.ng1Injector = null;
-        this.ng2ApplicationRef = null;
+        this.ng2ModuleRef = null;
         this.ng2Injector = null;
     }
     /* @internal */
-    UpgradeAdapterRef.prototype._bootstrapDone = function (applicationRef, ng1Injector) {
-        this.ng2ApplicationRef = applicationRef;
-        this.ng2Injector = applicationRef.injector;
+    UpgradeAdapterRef.prototype._bootstrapDone = function (ngModuleRef, ng1Injector) {
+        this.ng2ModuleRef = ngModuleRef;
+        this.ng2Injector = ngModuleRef.injector;
         this.ng1Injector = ng1Injector;
@@ -609,3 +653,3 @@ this.ng1RootScope = ng1Injector.get(constants_1.NG1_ROOT_SCOPE);
         this.ng1Injector.get(constants_1.NG1_ROOT_SCOPE).$destroy();
-        this.ng2ApplicationRef.dispose();
+        this.ng2ModuleRef.destroy();
     };
@@ -612,0 +656,0 @@ return UpgradeAdapterRef;

src/upgrade_ng1_adapter.d.ts

@@ -29,6 +29,9 @@ /**
     extractBindings(): void;
-    compileTemplate(compile: angular.ICompileService, templateCache: angular.ITemplateCacheService, httpBackend: angular.IHttpBackendService): Promise<any>;
+    compileTemplate(compile: angular.ICompileService, templateCache: angular.ITemplateCacheService, httpBackend: angular.IHttpBackendService): Promise<angular.ILinkFn>;
+    /**
+     * Upgrade ng1 components into Angular 2.
+     */
     static resolve(exportedComponents: {
         [name: string]: UpgradeNg1ComponentAdapterBuilder;
-    }, injector: angular.IInjectorService): Promise<any>;
+    }, injector: angular.IInjectorService): Promise<angular.ILinkFn[]>;
 }

src/upgrade_ng1_adapter.js

@@ -151,2 +151,5 @@ /**
     };
+    /**
+     * Upgrade ng1 components into Angular 2.
+     */
     UpgradeNg1ComponentAdapterBuilder.resolve = function (exportedComponents, injector) {
@@ -153,0 +156,0 @@ var promises = [];

No alert changes

Improved metrics

Total package byte prevSize

411416

increased by4.03%

Number of package files

67

increased by6.35%

Lines of code

5148

increased by6.36%

Worsened metrics

Published versions last months

8

decreased by-27.27%

Published versions last year

105

decreased by-0.94%

No dependency changes