feat(platform-browser-dynamic): export `JitCompilerFactory` (#20478)
Fixes #20125 PR Close #20478
This commit is contained in:
parent
437a0446e2
commit
d7a727cc07
|
@ -0,0 +1,19 @@
|
||||||
|
import { AppPage } from './app.po';
|
||||||
|
|
||||||
|
describe('dynamic-compiler App', () => {
|
||||||
|
let page: AppPage;
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
page = new AppPage();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should display welcome message', () => {
|
||||||
|
page.navigateTo();
|
||||||
|
expect(page.getParagraphText()).toEqual('Hello world!');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should display lazy-loaded component', () => {
|
||||||
|
page.navigateTo();
|
||||||
|
expect(page.getLazyLoadedText()).toEqual('Lazy-loaded component!');
|
||||||
|
});
|
||||||
|
});
|
|
@ -0,0 +1,16 @@
|
||||||
|
import {browser, by, element, protractor} from 'protractor';
|
||||||
|
|
||||||
|
export class AppPage {
|
||||||
|
navigateTo() {
|
||||||
|
return browser.get('/');
|
||||||
|
}
|
||||||
|
|
||||||
|
getParagraphText() {
|
||||||
|
return element(by.css('app-root h1')).getText();
|
||||||
|
}
|
||||||
|
|
||||||
|
getLazyLoadedText() {
|
||||||
|
const el = element(by.css('app-root lazy-component'));
|
||||||
|
return browser.wait(protractor.ExpectedConditions.presenceOf(el)).then(() => el.getText(), err => el.getText());
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,15 @@
|
||||||
|
{
|
||||||
|
"open": false,
|
||||||
|
"logLevel": "silent",
|
||||||
|
"port": 8080,
|
||||||
|
"server": {
|
||||||
|
"baseDir": ".",
|
||||||
|
"routes": {
|
||||||
|
"/dist": "dist",
|
||||||
|
"/node_modules": "node_modules"
|
||||||
|
},
|
||||||
|
"middleware": {
|
||||||
|
"0": null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,16 @@
|
||||||
|
exports.config = {
|
||||||
|
specs: [
|
||||||
|
'../dist/e2e/*.e2e-spec.js'
|
||||||
|
],
|
||||||
|
capabilities: {
|
||||||
|
browserName: 'chrome',
|
||||||
|
chromeOptions: {
|
||||||
|
args: ['--no-sandbox'],
|
||||||
|
binary: process.env.CHROME_BIN,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
directConnect: true,
|
||||||
|
baseUrl: 'http://localhost:8080/',
|
||||||
|
framework: 'jasmine',
|
||||||
|
useAllAngular2AppRoots: true
|
||||||
|
};
|
|
@ -0,0 +1,7 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"outDir": "../dist/e2e",
|
||||||
|
"types": ["jasmine"],
|
||||||
|
"skipLibCheck": true
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,14 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title></title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<app-root></app-root>
|
||||||
|
<script src="/node_modules/zone.js/dist/zone.js"></script>
|
||||||
|
<script src="/node_modules/reflect-metadata/Reflect.js"></script>
|
||||||
|
<script src="/node_modules/systemjs/dist/system.js"></script>
|
||||||
|
<script src="/dist/bundle.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
|
@ -0,0 +1,44 @@
|
||||||
|
{
|
||||||
|
"name": "dynamic-compiler",
|
||||||
|
"version": "0.0.0",
|
||||||
|
"main": "index.js",
|
||||||
|
"scripts": {
|
||||||
|
"build": "npm run clean && npm run ngc && npm run rollup && npm run rollup:lazy && npm run es5 && npm run es5:lazy",
|
||||||
|
"clean": "rm -rf dist",
|
||||||
|
"es5": "tsc --target es5 --skipLibCheck --allowJs dist/bundle.es2015.js --out dist/bundle.js",
|
||||||
|
"es5:lazy": "tsc --target es5 --skipLibCheck --allowJs dist/lazy.bundle.es2015.js --out dist/lazy.bundle.js",
|
||||||
|
"ngc": "ngc -p tsconfig.json",
|
||||||
|
"rollup": "rollup -f iife -c rollup.config.js -o dist/bundle.es2015.js",
|
||||||
|
"rollup:lazy": "rollup -f cjs -c rollup.lazy.config.js -o dist/lazy.bundle.es2015.js",
|
||||||
|
"postinstall": "webdriver-manager update --gecko false",
|
||||||
|
"preprotractor": "tsc -p e2e",
|
||||||
|
"protractor": "protractor e2e/protractor.config.js",
|
||||||
|
"serve": "lite-server -c e2e/browser.config.json",
|
||||||
|
"test": "npm run build && concurrently \"yarn run serve\" \"yarn run protractor\" --kill-others --success first"
|
||||||
|
},
|
||||||
|
"license": "MIT",
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/jasmine": "file:../../node_modules/@types/jasmine",
|
||||||
|
"@angular/compiler-cli": "file:../../dist/packages-dist/compiler-cli",
|
||||||
|
"concurrently": "3.4.0",
|
||||||
|
"lite-server": "2.2.2",
|
||||||
|
"protractor": "file:../../node_modules/protractor",
|
||||||
|
"rollup": "file:../../node_modules/rollup",
|
||||||
|
"rollup-plugin-commonjs": "file:../../node_modules/rollup-plugin-commonjs",
|
||||||
|
"rollup-plugin-node-resolve": "file:../../node_modules/rollup-plugin-node-resolve",
|
||||||
|
"typescript": "file:../../node_modules/typescript"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@angular/animations": "file:../../dist/packages-dist/animations",
|
||||||
|
"@angular/common": "file:../../dist/packages-dist/common",
|
||||||
|
"@angular/compiler": "file:../../dist/packages-dist/compiler",
|
||||||
|
"@angular/core": "file:../../dist/packages-dist/core",
|
||||||
|
"@angular/platform-browser": "file:../../dist/packages-dist/platform-browser",
|
||||||
|
"@angular/platform-browser-dynamic": "file:../../dist/packages-dist/platform-browser-dynamic",
|
||||||
|
"@angular/platform-server": "file:../../dist/packages-dist/platform-server",
|
||||||
|
"core-js": "file:../../node_modules/core-js",
|
||||||
|
"rxjs": "file:../../node_modules/rxjs",
|
||||||
|
"systemjs": "file:../../node_modules/systemjs",
|
||||||
|
"zone.js": "file:../../node_modules/zone.js"
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,17 @@
|
||||||
|
import nodeResolve from 'rollup-plugin-node-resolve';
|
||||||
|
import commonjs from 'rollup-plugin-commonjs';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
entry: 'dist/src/main.js',
|
||||||
|
sourceMap: true,
|
||||||
|
treeshake: true,
|
||||||
|
moduleName: 'main',
|
||||||
|
plugins: [
|
||||||
|
commonjs({
|
||||||
|
include: 'node_modules/**'
|
||||||
|
}),
|
||||||
|
nodeResolve({
|
||||||
|
jsnext: true, main: true, module: true
|
||||||
|
})
|
||||||
|
]
|
||||||
|
};
|
|
@ -0,0 +1,19 @@
|
||||||
|
import nodeResolve from 'rollup-plugin-node-resolve';
|
||||||
|
import commonjs from 'rollup-plugin-commonjs';
|
||||||
|
|
||||||
|
// a real app should make a common bundle for libraries instead of bundling them
|
||||||
|
// in both the main module & the lazy module, but we don't care about size here
|
||||||
|
export default {
|
||||||
|
entry: 'dist/src/lazy.module.js',
|
||||||
|
sourceMap: true,
|
||||||
|
treeshake: true,
|
||||||
|
moduleName: 'lazy',
|
||||||
|
plugins: [
|
||||||
|
commonjs({
|
||||||
|
include: 'node_modules/**'
|
||||||
|
}),
|
||||||
|
nodeResolve({
|
||||||
|
jsnext: true, main: true, module: true
|
||||||
|
})
|
||||||
|
]
|
||||||
|
};
|
|
@ -0,0 +1,27 @@
|
||||||
|
import {AfterViewInit, Compiler, Component, ViewChild, ViewContainerRef} from '@angular/core';
|
||||||
|
|
||||||
|
declare var System: any;
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-root',
|
||||||
|
template: `
|
||||||
|
<h1>Hello world!</h1>
|
||||||
|
<div #vc></div>
|
||||||
|
`,
|
||||||
|
})
|
||||||
|
export class AppComponent implements AfterViewInit {
|
||||||
|
@ViewChild('vc', {read: ViewContainerRef}) container: ViewContainerRef;
|
||||||
|
|
||||||
|
constructor(private compiler: Compiler) {
|
||||||
|
}
|
||||||
|
|
||||||
|
ngAfterViewInit() {
|
||||||
|
System.import('./dist/lazy.bundle.js').then((module: any) => {
|
||||||
|
this.compiler.compileModuleAndAllComponentsAsync(module.LazyModule)
|
||||||
|
.then((compiled) => {
|
||||||
|
const factory = compiled.componentFactories[0];
|
||||||
|
this.container.createComponent(factory);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,22 @@
|
||||||
|
import {Compiler, COMPILER_OPTIONS, CompilerFactory, NgModule} from '@angular/core';
|
||||||
|
import { BrowserModule } from '@angular/platform-browser';
|
||||||
|
import {JitCompilerFactory} from '@angular/platform-browser-dynamic';
|
||||||
|
|
||||||
|
import { AppComponent } from './app.component';
|
||||||
|
|
||||||
|
export function createCompiler(compilerFactory: CompilerFactory) {
|
||||||
|
return compilerFactory.createCompiler();
|
||||||
|
}
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
imports: [BrowserModule],
|
||||||
|
bootstrap: [AppComponent],
|
||||||
|
declarations: [AppComponent],
|
||||||
|
providers: [
|
||||||
|
{provide: COMPILER_OPTIONS, useValue: {}, multi: true},
|
||||||
|
{provide: CompilerFactory, useClass: JitCompilerFactory, deps: [COMPILER_OPTIONS]},
|
||||||
|
{provide: Compiler, useFactory: createCompiler, deps: [CompilerFactory]}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
export class AppModule {}
|
||||||
|
|
|
@ -0,0 +1,17 @@
|
||||||
|
import {NgModule} from "@angular/core";
|
||||||
|
import {Component} from '@angular/core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'lazy-component',
|
||||||
|
template: 'Lazy-loaded component!'
|
||||||
|
})
|
||||||
|
export class LazyComponent {
|
||||||
|
constructor() {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
declarations: [LazyComponent]
|
||||||
|
})
|
||||||
|
export class LazyModule {
|
||||||
|
}
|
|
@ -0,0 +1,8 @@
|
||||||
|
import { enableProdMode } from '@angular/core';
|
||||||
|
import { platformBrowser } from '@angular/platform-browser';
|
||||||
|
|
||||||
|
import { AppModuleNgFactory } from './app.module.ngfactory';
|
||||||
|
|
||||||
|
enableProdMode();
|
||||||
|
|
||||||
|
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);
|
|
@ -0,0 +1,28 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "es2015",
|
||||||
|
"module": "es2015",
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"declaration": false,
|
||||||
|
"removeComments": true,
|
||||||
|
"noLib": false,
|
||||||
|
"emitDecoratorMetadata": true,
|
||||||
|
"experimentalDecorators": true,
|
||||||
|
"lib": ["es6", "es2015", "dom"],
|
||||||
|
"sourceMap": true,
|
||||||
|
"pretty": true,
|
||||||
|
"allowUnreachableCode": false,
|
||||||
|
"allowUnusedLabels": false,
|
||||||
|
"noImplicitAny": true,
|
||||||
|
"noImplicitReturns": true,
|
||||||
|
"noImplicitUseStrict": false,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
"outDir": "./dist",
|
||||||
|
"types": [
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"files": [
|
||||||
|
"src/main.ts",
|
||||||
|
"src/lazy.module.ts"
|
||||||
|
]
|
||||||
|
}
|
|
@ -150,8 +150,13 @@ export const COMPILER_PROVIDERS = <StaticProvider[]>[
|
||||||
{ provide: NgModuleResolver, deps: [CompileReflector]},
|
{ provide: NgModuleResolver, deps: [CompileReflector]},
|
||||||
];
|
];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @experimental
|
||||||
|
*/
|
||||||
export class JitCompilerFactory implements CompilerFactory {
|
export class JitCompilerFactory implements CompilerFactory {
|
||||||
private _defaultOptions: CompilerOptions[];
|
private _defaultOptions: CompilerOptions[];
|
||||||
|
|
||||||
|
/* @internal */
|
||||||
constructor(defaultOptions: CompilerOptions[]) {
|
constructor(defaultOptions: CompilerOptions[]) {
|
||||||
const compilerOptions: CompilerOptions = {
|
const compilerOptions: CompilerOptions = {
|
||||||
useJit: true,
|
useJit: true,
|
||||||
|
|
|
@ -15,6 +15,7 @@ import {CachedResourceLoader} from './resource_loader/resource_loader_cache';
|
||||||
|
|
||||||
export * from './private_export';
|
export * from './private_export';
|
||||||
export {VERSION} from './version';
|
export {VERSION} from './version';
|
||||||
|
export {JitCompilerFactory} from './compiler_factory';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @experimental
|
* @experimental
|
||||||
|
|
|
@ -1,3 +1,8 @@
|
||||||
|
/** @experimental */
|
||||||
|
export declare class JitCompilerFactory implements CompilerFactory {
|
||||||
|
createCompiler(options?: CompilerOptions[]): Compiler;
|
||||||
|
}
|
||||||
|
|
||||||
/** @stable */
|
/** @stable */
|
||||||
export declare const platformBrowserDynamic: (extraProviders?: StaticProvider[] | undefined) => PlatformRef;
|
export declare const platformBrowserDynamic: (extraProviders?: StaticProvider[] | undefined) => PlatformRef;
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue