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]},
|
||||
];
|
||||
|
||||
/**
|
||||
* @experimental
|
||||
*/
|
||||
export class JitCompilerFactory implements CompilerFactory {
|
||||
private _defaultOptions: CompilerOptions[];
|
||||
|
||||
/* @internal */
|
||||
constructor(defaultOptions: CompilerOptions[]) {
|
||||
const compilerOptions: CompilerOptions = {
|
||||
useJit: true,
|
||||
|
|
|
@ -15,6 +15,7 @@ import {CachedResourceLoader} from './resource_loader/resource_loader_cache';
|
|||
|
||||
export * from './private_export';
|
||||
export {VERSION} from './version';
|
||||
export {JitCompilerFactory} from './compiler_factory';
|
||||
|
||||
/**
|
||||
* @experimental
|
||||
|
|
|
@ -1,3 +1,8 @@
|
|||
/** @experimental */
|
||||
export declare class JitCompilerFactory implements CompilerFactory {
|
||||
createCompiler(options?: CompilerOptions[]): Compiler;
|
||||
}
|
||||
|
||||
/** @stable */
|
||||
export declare const platformBrowserDynamic: (extraProviders?: StaticProvider[] | undefined) => PlatformRef;
|
||||
|
||||
|
|
Loading…
Reference in New Issue