forked from angular/angular
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(upgrade): support downgrading multiple modules
Currently, calling `downgradeModule()` more than once is not supported. If one wants to downgrade multiple Angular modules, they can create a "super-module" that imports all the rest and downgrade that. This commit adds support for downgrading multiple Angular modules. If multiple modules are downgraded, then one must explicitly specify the downgraded module that each downgraded component or injectable belongs to, when calling `downgradeComponent()` and `downgradeInjectable()` respectively. No modification is needed (i.e. there is no need to specify a module for downgraded components and injectables), if an app is not using `downgradeModule()` or if there is only one downgraded Angular module. Fixes angular#26062
- Loading branch information
Showing
10 changed files
with
274 additions
and
19 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
28 changes: 28 additions & 0 deletions
28
packages/examples/upgrade/static/ts/lite-multi/e2e_test/static_lite_multi_spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,28 @@ | ||
/** | ||
* @license | ||
* Copyright Google Inc. All Rights Reserved. | ||
* | ||
* Use of this source code is governed by an MIT-style license that can be | ||
* found in the LICENSE file at https://angular.io/license | ||
*/ | ||
|
||
import {browser, by, element} from 'protractor'; | ||
|
||
import {verifyNoBrowserErrors} from '../../../../../_common/e2e_util'; | ||
|
||
|
||
describe('upgrade/static (lite with multiple downgraded modules)', () => { | ||
const navButtons = element.all(by.css('nav button')); | ||
const mainContent = element(by.css('main')); | ||
|
||
beforeEach(() => browser.get('/upgrade/static/ts/lite-multi/')); | ||
afterEach(verifyNoBrowserErrors); | ||
|
||
it('should correctly bootstrap multiple downgraded modules', () => { | ||
navButtons.get(1).click(); | ||
expect(mainContent.getText()).toBe('Component B'); | ||
|
||
navButtons.get(0).click(); | ||
expect(mainContent.getText()).toBe('Component A | ng1(ng2)'); | ||
}); | ||
}); |
118 changes: 118 additions & 0 deletions
118
packages/examples/upgrade/static/ts/lite-multi/module.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,118 @@ | ||
/** | ||
* @license | ||
* Copyright Google Inc. All Rights Reserved. | ||
* | ||
* Use of this source code is governed by an MIT-style license that can be | ||
* found in the LICENSE file at https://angular.io/license | ||
*/ | ||
|
||
// #docplaster | ||
import {Component, Directive, ElementRef, Injectable, Injector, NgModule, StaticProvider, getPlatform} from '@angular/core'; | ||
import {BrowserModule} from '@angular/platform-browser'; | ||
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; | ||
import {UpgradeComponent, downgradeComponent, downgradeInjectable, downgradeModule} from '@angular/upgrade/static'; | ||
|
||
|
||
declare var angular: ng.IAngularStatic; | ||
|
||
// An Angular module that declares an Angular service and a component, | ||
// which in turn uses an upgraded AngularJS component. | ||
@Component({ | ||
selector: 'ng2A', | ||
template: 'Component A | <ng1A></ng1A>', | ||
}) | ||
export class Ng2AComponent { | ||
} | ||
|
||
@Directive({ | ||
selector: 'ng1A', | ||
}) | ||
export class Ng1AComponentFacade extends UpgradeComponent { | ||
constructor(elementRef: ElementRef, injector: Injector) { super('ng1A', elementRef, injector); } | ||
} | ||
|
||
@Injectable() | ||
export class Ng2AService { | ||
getValue() { return 'ng2'; } | ||
} | ||
|
||
@NgModule({ | ||
imports: [BrowserModule], | ||
providers: [Ng2AService], | ||
declarations: [Ng1AComponentFacade, Ng2AComponent], | ||
entryComponents: [Ng2AComponent], | ||
}) | ||
export class Ng2AModule { | ||
ngDoBootstrap() {} | ||
} | ||
|
||
|
||
// Another Angular module that declares an Angular component. | ||
@Component({ | ||
selector: 'ng2B', | ||
template: 'Component B', | ||
}) | ||
export class Ng2BComponent { | ||
} | ||
|
||
@NgModule({ | ||
imports: [BrowserModule], | ||
declarations: [Ng2BComponent], | ||
entryComponents: [Ng2BComponent], | ||
}) | ||
export class Ng2BModule { | ||
ngDoBootstrap() {} | ||
} | ||
|
||
|
||
// The downgraded Angular modules. | ||
const downgradedNg2AModule = downgradeModule( | ||
(extraProviders: StaticProvider[]) => | ||
(getPlatform() || platformBrowserDynamic(extraProviders)).bootstrapModule(Ng2AModule)); | ||
|
||
const downgradedNg2BModule = downgradeModule( | ||
(extraProviders: StaticProvider[]) => | ||
(getPlatform() || platformBrowserDynamic(extraProviders)).bootstrapModule(Ng2BModule)); | ||
|
||
|
||
// The AngularJS app including downgraded modules, components and injectables. | ||
const appModule = | ||
angular.module('exampleAppModule', [downgradedNg2AModule, downgradedNg2BModule]) | ||
.component('exampleApp', { | ||
template: ` | ||
<nav> | ||
<button ng-click="$ctrl.page = page" ng-repeat="page in ['A', 'B']"> | ||
Page {{ page }} | ||
</button> | ||
</nav> | ||
<hr /> | ||
<main ng-switch="$ctrl.page"> | ||
<ng2-a ng-switch-when="A"></ng2-a> | ||
<ng2-b ng-switch-when="B"></ng2-b> | ||
</main> | ||
`, | ||
controller: class ExampleAppController{page = 'A';}, | ||
}) | ||
.component('ng1A', { | ||
template: 'ng1({{ $ctrl.value }})', | ||
controller: [ | ||
'ng2AService', class Ng1AController{ | ||
value = this.ng2AService.getValue(); constructor(private ng2AService: Ng2AService) {} | ||
} | ||
], | ||
}) | ||
.directive('ng2A', downgradeComponent({ | ||
component: Ng2AComponent, | ||
downgradedModule: downgradedNg2AModule, | ||
propagateDigest: false, | ||
})) | ||
.directive('ng2B', downgradeComponent({ | ||
component: Ng2BComponent, | ||
downgradedModule: downgradedNg2BModule, | ||
propagateDigest: false, | ||
})) | ||
.factory('ng2AService', downgradeInjectable(Ng2AService, downgradedNg2AModule)); | ||
|
||
|
||
// Bootstrap the AngularJS app. | ||
angular.bootstrap(document.body, [appModule.name]); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.