/** * @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 {COMMON_DIRECTIVES, COMMON_PIPES} from '@angular/common'; import {COMPILER_PROVIDERS, CompilerConfig, XHR} from '@angular/compiler'; import {AppModule, AppModuleRef, ApplicationRef, Compiler, ComponentRef, ComponentResolver, ExceptionHandler, PLATFORM_DIRECTIVES, PLATFORM_PIPES, ReflectiveInjector, Type, coreLoadAndBootstrap, isDevMode, lockRunMode} from '@angular/core'; import {BROWSER_APP_PROVIDERS, BrowserModule, WORKER_APP_APPLICATION_PROVIDERS, WORKER_SCRIPT, WORKER_UI_APPLICATION_PROVIDERS, bootstrapModuleFactory, browserPlatform, workerAppPlatform, workerUiPlatform} from '@angular/platform-browser'; import {ReflectionCapabilities, reflector} from './core_private'; import {getDOM, initDomAdapter} from './platform_browser_private'; import {PromiseWrapper} from './src/facade/async'; import {ConcreteType, isPresent, stringify} from './src/facade/lang'; import {CachedXHR} from './src/xhr/xhr_cache'; import {XHRImpl} from './src/xhr/xhr_impl'; /** * @experimental */ export const BROWSER_APP_COMPILER_PROVIDERS: Array = [ COMPILER_PROVIDERS, { provide: CompilerConfig, useFactory: (platformDirectives: any[], platformPipes: any[]) => { return new CompilerConfig({platformDirectives, platformPipes}); }, deps: [PLATFORM_DIRECTIVES, PLATFORM_PIPES] }, {provide: XHR, useClass: XHRImpl}, {provide: PLATFORM_DIRECTIVES, useValue: COMMON_DIRECTIVES, multi: true}, {provide: PLATFORM_PIPES, useValue: COMMON_PIPES, multi: true} ]; /** * @experimental */ export const CACHED_TEMPLATE_PROVIDER: Array = [{provide: XHR, useClass: CachedXHR}]; function _initGlobals() { lockRunMode(); initDomAdapter(); reflector.reflectionCapabilities = new ReflectionCapabilities(); } /** * Creates the runtime compiler for the browser. * * @stable */ export function browserCompiler({useDebug, useJit = true, providers = []}: { useDebug?: boolean, useJit?: boolean, providers?: Array } = {}): Compiler { _initGlobals(); if (useDebug === undefined) { useDebug = isDevMode(); } const injector = ReflectiveInjector.resolveAndCreate([ COMPILER_PROVIDERS, { provide: CompilerConfig, useValue: new CompilerConfig({genDebugInfo: useDebug, useJit: useJit}) }, {provide: XHR, useClass: XHRImpl}, providers ? providers : [] ]); return injector.get(Compiler); } /** * Creates an instance of an `@AppModule` for the browser platform. * * ## Simple Example * * ```typescript * @AppModule({ * modules: [BrowserModule] * }) * class MyModule {} * * let moduleRef = bootstrapModule(MyModule); * ``` * @stable */ export function bootstrapModule( moduleType: ConcreteType, compiler: Compiler = browserCompiler()): Promise> { return compiler.compileAppModuleAsync(moduleType).then(bootstrapModuleFactory); } /** * Bootstrapping for Angular applications. * * You instantiate an Angular application by explicitly specifying a component to use * as the root component for your application via the `bootstrap()` method. * * ## Simple Example * * Assuming this `index.html`: * * ```html * * * * loading... * * * ``` * * An application is bootstrapped inside an existing browser DOM, typically `index.html`. * Unlike Angular 1, Angular 2 does not compile/process providers in `index.html`. This is * mainly for security reasons, as well as architectural changes in Angular 2. This means * that `index.html` can safely be processed using server-side technologies such as * providers. Bindings can thus use double-curly `{{ syntax }}` without collision from * Angular 2 component double-curly `{{ syntax }}`. * * We can use this script code: * * {@example core/ts/bootstrap/bootstrap.ts region='bootstrap'} * * When the app developer invokes `bootstrap()` with the root component `MyApp` as its * argument, Angular performs the following tasks: * * 1. It uses the component's `selector` property to locate the DOM element which needs * to be upgraded into the angular component. * 2. It creates a new child injector (from the platform injector). Optionally, you can * also override the injector configuration for an app by invoking `bootstrap` with the * `componentInjectableBindings` argument. * 3. It creates a new `Zone` and connects it to the angular application's change detection * domain instance. * 4. It creates an emulated or shadow DOM on the selected component's host element and loads the * template into it. * 5. It instantiates the specified component. * 6. Finally, Angular performs change detection to apply the initial data providers for the * application. * * * ## Bootstrapping Multiple Applications * * When working within a browser window, there are many singleton resources: cookies, title, * location, and others. Angular services that represent these resources must likewise be * shared across all Angular applications that occupy the same browser window. For this * reason, Angular creates exactly one global platform object which stores all shared * services, and each angular application injector has the platform injector as its parent. * * Each application has its own private injector as well. When there are multiple * applications on a page, Angular treats each application injector's services as private * to that application. * * ## API (version 1) * * - `appComponentType`: The root component which should act as the application. This is * a reference to a `Type` which is annotated with `@Component(...)`. * - `customProviders`: An additional set of providers that can be added to the * app injector to override default injection behavior. * * ## API (version 2) * - `appComponentType`: The root component which should act as the application. This is * a reference to a `Type` which is annotated with `@Component(...)`. * - `providers`, `directives`, `pipes`, `modules`, `precompile`: Defines the properties * of the dynamically created module that is used to bootstrap the module. * * Returns a `Promise` of {@link ComponentRef}. * * @experimental This api cannot be used with the offline compiler and thus is still subject to * change. */ // Note: We are using typescript overloads here to have 2 function signatures! export function bootstrap( appComponentType: ConcreteType, customProviders?: Array): Promise>; export function bootstrap( appComponentType: ConcreteType, {providers, directives, pipes, modules, precompile, compiler}?: { providers?: Array, directives?: any[], pipes?: any[], modules?: any[], precompile?: any[], compiler?: Compiler }): Promise>; export function bootstrap( appComponentType: ConcreteType, customProvidersOrDynamicModule?: Array| { providers: Array, directives: any[], pipes: any[], modules: any[], precompile: any[], compiler: Compiler }): Promise> { _initGlobals(); let compiler: Compiler; let compilerProviders: any = []; let providers: any[] = []; let directives: any[] = []; let pipes: any[] = []; let modules: any[] = []; let precompile: any[] = []; if (customProvidersOrDynamicModule instanceof Array) { providers = customProvidersOrDynamicModule; } else if (customProvidersOrDynamicModule) { providers = normalizeArray(customProvidersOrDynamicModule.providers); directives = normalizeArray(customProvidersOrDynamicModule.directives); pipes = normalizeArray(customProvidersOrDynamicModule.pipes); modules = normalizeArray(customProvidersOrDynamicModule.modules); precompile = normalizeArray(customProvidersOrDynamicModule.precompile); compiler = customProvidersOrDynamicModule.compiler; } if (providers && providers.length > 0) { // Note: This is a hack to still support the old way // of configuring platform directives / pipes and the compiler xhr. // This will soon be deprecated! let inj = ReflectiveInjector.resolveAndCreate(providers); let compilerConfig: CompilerConfig = inj.get(CompilerConfig, null); if (compilerConfig) { // Note: forms read the platform directives / pipes, modify them // and provide a CompilerConfig out of it directives = directives.concat(compilerConfig.platformDirectives); pipes = pipes.concat(compilerConfig.platformPipes); } else { // If nobody provided a CompilerConfig, use the // PLATFORM_DIRECTIVES / PLATFORM_PIPES values directly. directives = directives.concat(inj.get(PLATFORM_DIRECTIVES, [])); pipes = pipes.concat(inj.get(PLATFORM_PIPES, [])); } let xhr = inj.get(XHR, null); if (xhr) { compilerProviders.push([{provide: XHR, useValue: xhr}]); } } if (!compiler) { compiler = browserCompiler({providers: compilerProviders}); } @AppModule({ providers: providers, modules: modules.concat([BrowserModule]), directives: directives, pipes: pipes, precompile: precompile.concat([appComponentType]) }) class DynamicModule { constructor(public appRef: ApplicationRef) {} } return bootstrapModule(DynamicModule, compiler) .then( (moduleRef) => moduleRef.instance.appRef.waitForAsyncInitializers().then( () => moduleRef.instance.appRef.bootstrap(appComponentType))); } /** * @experimental */ export function bootstrapWorkerUi( workerScriptUri: string, customProviders?: Array): Promise { var app = ReflectiveInjector.resolveAndCreate( [ WORKER_UI_APPLICATION_PROVIDERS, BROWSER_APP_COMPILER_PROVIDERS, {provide: WORKER_SCRIPT, useValue: workerScriptUri}, isPresent(customProviders) ? customProviders : [] ], workerUiPlatform().injector); // Return a promise so that we keep the same semantics as Dart, // and we might want to wait for the app side to come up // in the future... return PromiseWrapper.resolve(app.get(ApplicationRef)); } /** * @experimental */ const WORKER_APP_COMPILER_PROVIDERS: Array = [ COMPILER_PROVIDERS, { provide: CompilerConfig, useFactory: (platformDirectives: any[], platformPipes: any[]) => { return new CompilerConfig({platformDirectives, platformPipes}); }, deps: [PLATFORM_DIRECTIVES, PLATFORM_PIPES] }, {provide: XHR, useClass: XHRImpl}, {provide: PLATFORM_DIRECTIVES, useValue: COMMON_DIRECTIVES, multi: true}, {provide: PLATFORM_PIPES, useValue: COMMON_PIPES, multi: true} ]; /** * @experimental */ export function bootstrapWorkerApp( appComponentType: Type, customProviders?: Array): Promise> { var appInjector = ReflectiveInjector.resolveAndCreate( [ WORKER_APP_APPLICATION_PROVIDERS, WORKER_APP_COMPILER_PROVIDERS, isPresent(customProviders) ? customProviders : [] ], workerAppPlatform().injector); return coreLoadAndBootstrap(appComponentType, appInjector); } function normalizeArray(arr: any[]): any[] { return arr ? arr : []; }