153 lines
		
	
	
		
			5.1 KiB
		
	
	
	
		
			TypeScript
		
	
	
	
	
	
			
		
		
	
	
			153 lines
		
	
	
		
			5.1 KiB
		
	
	
	
		
			TypeScript
		
	
	
	
	
	
| /**
 | |
|  * @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 {Compiler, Component, Injectable, Injector, NgModule, StaticProvider, getPlatform} from '@angular/core';
 | |
| import {BrowserModule} from '@angular/platform-browser';
 | |
| import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 | |
| import {downgradeComponent, downgradeModule} from '@angular/upgrade/static';
 | |
| 
 | |
| 
 | |
| declare var angular: ng.IAngularStatic;
 | |
| 
 | |
| // An Angular service provided in root. Each instance of the service will get a new ID.
 | |
| @Injectable({providedIn: 'root'})
 | |
| export class Ng2Service {
 | |
|   static nextId = 1;
 | |
|   id = Ng2Service.nextId++;
 | |
| }
 | |
| 
 | |
| 
 | |
| // An Angular module that will act as "root" for all downgraded modules, so that injectables
 | |
| // provided in root will be available to all.
 | |
| @NgModule({
 | |
|   imports: [BrowserModule],
 | |
| })
 | |
| export class Ng2RootModule {
 | |
|   ngDoBootstrap() {}
 | |
| }
 | |
| 
 | |
| 
 | |
| // An Angular module that declares an Angular component,
 | |
| // which in turn uses an Angular service from the root module.
 | |
| @Component({
 | |
|   selector: 'ng2A',
 | |
|   template: 'Component A (Service ID: {{ service.id }})',
 | |
| })
 | |
| export class Ng2AComponent {
 | |
|   constructor(public service: Ng2Service) {}
 | |
| }
 | |
| 
 | |
| @NgModule({
 | |
|   declarations: [Ng2AComponent],
 | |
|   entryComponents: [Ng2AComponent],
 | |
| })
 | |
| export class Ng2AModule {
 | |
|   ngDoBootstrap() {}
 | |
| }
 | |
| 
 | |
| 
 | |
| // Another Angular module that declares an Angular component, which uses the same service.
 | |
| @Component({
 | |
|   selector: 'ng2B',
 | |
|   template: 'Component B (Service ID: {{ service.id }})',
 | |
| })
 | |
| export class Ng2BComponent {
 | |
|   constructor(public service: Ng2Service) {}
 | |
| }
 | |
| 
 | |
| @NgModule({
 | |
|   declarations: [Ng2BComponent],
 | |
|   entryComponents: [Ng2BComponent],
 | |
| })
 | |
| export class Ng2BModule {
 | |
|   ngDoBootstrap() {}
 | |
| }
 | |
| 
 | |
| 
 | |
| // A third Angular module that declares an Angular component, which uses the same service.
 | |
| @Component({
 | |
|   selector: 'ng2C',
 | |
|   template: 'Component C (Service ID: {{ service.id }})',
 | |
| })
 | |
| export class Ng2CComponent {
 | |
|   constructor(public service: Ng2Service) {}
 | |
| }
 | |
| 
 | |
| @NgModule({
 | |
|   imports: [BrowserModule],
 | |
|   declarations: [Ng2CComponent],
 | |
|   entryComponents: [Ng2CComponent],
 | |
| })
 | |
| export class Ng2CModule {
 | |
|   ngDoBootstrap() {}
 | |
| }
 | |
| 
 | |
| 
 | |
| // The downgraded Angular modules. Modules A and B share a common root module. Module C does not.
 | |
| // #docregion shared-root-module
 | |
| let rootInjectorPromise: Promise<Injector>|null = null;
 | |
| const getRootInjector = (extraProviders: StaticProvider[]) => {
 | |
|   if (!rootInjectorPromise) {
 | |
|     rootInjectorPromise = platformBrowserDynamic(extraProviders)
 | |
|                               .bootstrapModule(Ng2RootModule)
 | |
|                               .then(moduleRef => moduleRef.injector);
 | |
|   }
 | |
|   return rootInjectorPromise;
 | |
| };
 | |
| 
 | |
| const downgradedNg2AModule = downgradeModule(async(extraProviders: StaticProvider[]) => {
 | |
|   const rootInjector = await getRootInjector(extraProviders);
 | |
|   const moduleAFactory = await rootInjector.get(Compiler).compileModuleAsync(Ng2AModule);
 | |
|   return moduleAFactory.create(rootInjector);
 | |
| });
 | |
| const downgradedNg2BModule = downgradeModule(async(extraProviders: StaticProvider[]) => {
 | |
|   const rootInjector = await getRootInjector(extraProviders);
 | |
|   const moduleBFactory = await rootInjector.get(Compiler).compileModuleAsync(Ng2BModule);
 | |
|   return moduleBFactory.create(rootInjector);
 | |
| });
 | |
| // #enddocregion shared-root-module
 | |
| 
 | |
| const downgradedNg2CModule = downgradeModule(
 | |
|     (extraProviders: StaticProvider[]) =>
 | |
|         (getPlatform() || platformBrowserDynamic(extraProviders)).bootstrapModule(Ng2CModule));
 | |
| 
 | |
| 
 | |
| // The AngularJS app including downgraded modules and components.
 | |
| // #docregion shared-root-module
 | |
| const appModule =
 | |
|     angular
 | |
|         .module(
 | |
|             'exampleAppModule', [downgradedNg2AModule, downgradedNg2BModule, downgradedNg2CModule])
 | |
|         // #enddocregion shared-root-module
 | |
|         .component('exampleApp', {template: '<ng2-a></ng2-a> | <ng2-b></ng2-b> | <ng2-c></ng2-c>'})
 | |
|         .directive('ng2A', downgradeComponent({
 | |
|                      component: Ng2AComponent,
 | |
|                      // Since there is more than one downgraded Angular module,
 | |
|                      // specify which module this component belongs to.
 | |
|                      downgradedModule: downgradedNg2AModule,
 | |
|                      propagateDigest: false,
 | |
|                    }))
 | |
|         .directive('ng2B', downgradeComponent({
 | |
|                      component: Ng2BComponent,
 | |
|                      // Since there is more than one downgraded Angular module,
 | |
|                      // specify which module this component belongs to.
 | |
|                      downgradedModule: downgradedNg2BModule,
 | |
|                      propagateDigest: false,
 | |
|                    }))
 | |
|         .directive('ng2C', downgradeComponent({
 | |
|                      component: Ng2CComponent,
 | |
|                      // Since there is more than one downgraded Angular module,
 | |
|                      // specify which module this component belongs to.
 | |
|                      downgradedModule: downgradedNg2CModule,
 | |
|                      propagateDigest: false,
 | |
|                    }));
 | |
| 
 | |
| 
 | |
| // Bootstrap the AngularJS app.
 | |
| angular.bootstrap(document.body, [appModule.name]);
 |