build: create sample router app (#38714)
This commit creates a sample router test application to introduce the symbol tests. It serves as a guard to ensure that any future work on the router package does not unintentionally increase the payload size. PR Close #38714
This commit is contained in:
Sonu Kapoor
Andrew Kushnir
parent
15207e3c9c
commit
f667e374a9
|
|
@ -0,0 +1,118 @@
|
||||||
|
package(default_visibility = ["//visibility:public"])
|
||||||
|
|
||||||
|
load("//tools:defaults.bzl", "jasmine_node_test", "ng_module", "ng_rollup_bundle", "ts_devserver", "ts_library")
|
||||||
|
load("//tools/symbol-extractor:index.bzl", "js_expected_symbol_test")
|
||||||
|
load("@npm//http-server:index.bzl", "http_server")
|
||||||
|
|
||||||
|
ng_module(
|
||||||
|
name = "router",
|
||||||
|
srcs = [
|
||||||
|
"index.ts",
|
||||||
|
],
|
||||||
|
tags = [
|
||||||
|
"ivy-only",
|
||||||
|
],
|
||||||
|
deps = [
|
||||||
|
"//packages/core",
|
||||||
|
"//packages/platform-browser",
|
||||||
|
"//packages/router",
|
||||||
|
],
|
||||||
|
)
|
||||||
|
|
||||||
|
ng_rollup_bundle(
|
||||||
|
name = "bundle",
|
||||||
|
entry_point = ":index.ts",
|
||||||
|
tags = [
|
||||||
|
"ivy-only",
|
||||||
|
],
|
||||||
|
deps = [
|
||||||
|
":router",
|
||||||
|
"//packages/core",
|
||||||
|
"//packages/platform-browser",
|
||||||
|
"//packages/router",
|
||||||
|
"@npm//rxjs",
|
||||||
|
],
|
||||||
|
)
|
||||||
|
|
||||||
|
ts_library(
|
||||||
|
name = "test_lib",
|
||||||
|
testonly = True,
|
||||||
|
srcs = glob(["*_spec.ts"]),
|
||||||
|
tags = [
|
||||||
|
"ivy-only",
|
||||||
|
],
|
||||||
|
deps = [
|
||||||
|
"//packages:types",
|
||||||
|
"//packages/compiler",
|
||||||
|
"//packages/core",
|
||||||
|
"//packages/core/testing",
|
||||||
|
"//packages/private/testing",
|
||||||
|
],
|
||||||
|
)
|
||||||
|
|
||||||
|
jasmine_node_test(
|
||||||
|
name = "test",
|
||||||
|
data = [
|
||||||
|
":bundle",
|
||||||
|
":bundle.js",
|
||||||
|
":bundle.min.js",
|
||||||
|
":bundle.min_debug.js",
|
||||||
|
],
|
||||||
|
tags = [
|
||||||
|
"ivy-only",
|
||||||
|
],
|
||||||
|
deps = [":test_lib"],
|
||||||
|
)
|
||||||
|
|
||||||
|
js_expected_symbol_test(
|
||||||
|
name = "symbol_test",
|
||||||
|
src = ":bundle.min_debug.js",
|
||||||
|
golden = ":bundle.golden_symbols.json",
|
||||||
|
tags = [
|
||||||
|
"ivy-aot",
|
||||||
|
"ivy-only",
|
||||||
|
],
|
||||||
|
)
|
||||||
|
|
||||||
|
genrule(
|
||||||
|
name = "tslib",
|
||||||
|
srcs = [
|
||||||
|
"@npm//:node_modules/tslib/tslib.js",
|
||||||
|
],
|
||||||
|
outs = [
|
||||||
|
"tslib.js",
|
||||||
|
],
|
||||||
|
cmd = "cp $< $@",
|
||||||
|
tags = [
|
||||||
|
"ivy-only",
|
||||||
|
],
|
||||||
|
)
|
||||||
|
|
||||||
|
ts_devserver(
|
||||||
|
name = "devserver",
|
||||||
|
entry_module = "@angular/core/test/bundling/router",
|
||||||
|
scripts = [
|
||||||
|
"//tools/rxjs:rxjs_umd_modules",
|
||||||
|
],
|
||||||
|
serving_path = "/bundle.min.js",
|
||||||
|
static_files = [
|
||||||
|
"index.html",
|
||||||
|
":tslib",
|
||||||
|
],
|
||||||
|
tags = [
|
||||||
|
"ivy-only",
|
||||||
|
],
|
||||||
|
deps = [":router"],
|
||||||
|
)
|
||||||
|
|
||||||
|
http_server(
|
||||||
|
name = "prodserver",
|
||||||
|
data = [
|
||||||
|
"index.html",
|
||||||
|
":bundle.min.js",
|
||||||
|
":bundle.min_debug.js",
|
||||||
|
],
|
||||||
|
tags = [
|
||||||
|
"ivy-only",
|
||||||
|
],
|
||||||
|
)
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,32 @@
|
||||||
|
<!doctype html>
|
||||||
|
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Angular Routing Example</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- The Angular application will be bootstrapped into this element. -->
|
||||||
|
|
||||||
|
<app-root></app-root>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
Script tag which bootstraps the application. Use `?debug` in URL to select
|
||||||
|
the debug version of the script.
|
||||||
|
|
||||||
|
There are two scripts sources: `bundle.min.js` and `bundle.min_debug.js` You can
|
||||||
|
switch between which bundle the browser loads to experiment with the application.
|
||||||
|
|
||||||
|
- `bundle.min.js`: Is what the site would serve to their users. It has gone
|
||||||
|
through rollup, build-optimizer, and uglify with tree shaking.
|
||||||
|
- `bundle.min_debug.js`: Is what the developer would like to see when debugging
|
||||||
|
the application. It has also done through full pipeline of rollup, build-optimizer,
|
||||||
|
and uglify, however special flags were passed to uglify to prevent inlining and
|
||||||
|
property renaming.
|
||||||
|
-->
|
||||||
|
<script>
|
||||||
|
document.write('<script src="' +
|
||||||
|
(document.location.search.endsWith('debug') ? '/bundle.min_debug.js' : '/bundle.min.js') +
|
||||||
|
'"></' + 'script>');
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,72 @@
|
||||||
|
/**
|
||||||
|
* @license
|
||||||
|
* Copyright Google LLC 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 {APP_BASE_HREF} from '@angular/common';
|
||||||
|
import {Component, NgModule, OnInit, ɵNgModuleFactory as NgModuleFactory} from '@angular/core';
|
||||||
|
import {BrowserModule, platformBrowser} from '@angular/platform-browser';
|
||||||
|
import {ActivatedRoute, Router, RouterModule, Routes} from '@angular/router';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-list',
|
||||||
|
template: `
|
||||||
|
<ul>
|
||||||
|
<li><a routerLink="/item/1" routerLinkActive="active">List Item 1</a></li>
|
||||||
|
<li><a routerLink="/item/2" routerLinkActive="active">List Item 2</a></li>
|
||||||
|
<li><a routerLink="/item/3" routerLinkActive="active">List Item 3</a></li>
|
||||||
|
</ul>
|
||||||
|
`,
|
||||||
|
})
|
||||||
|
class ListComponent {
|
||||||
|
}
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-item',
|
||||||
|
template: `
|
||||||
|
Item {{id}}
|
||||||
|
<p><button (click)="viewList()">Back to List</button></p>`,
|
||||||
|
})
|
||||||
|
class ItemComponent implements OnInit {
|
||||||
|
id = -1;
|
||||||
|
constructor(private activatedRoute: ActivatedRoute, private router: Router) {}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
this.activatedRoute.paramMap.subscribe(paramsMap => {
|
||||||
|
this.id = +paramsMap.get('id')!;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
viewList() {
|
||||||
|
this.router.navigate(['/list']);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-root',
|
||||||
|
template: `<router-outlet></router-outlet>`,
|
||||||
|
})
|
||||||
|
class RootComponent {
|
||||||
|
constructor() {}
|
||||||
|
}
|
||||||
|
|
||||||
|
const ROUTES: Routes = [
|
||||||
|
{path: '', redirectTo: '/list', pathMatch: 'full'}, {path: 'list', component: ListComponent},
|
||||||
|
{path: 'item/:id', component: ItemComponent}
|
||||||
|
];
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
declarations: [RootComponent, ListComponent, ItemComponent],
|
||||||
|
imports: [BrowserModule, RouterModule.forRoot(ROUTES)],
|
||||||
|
providers: [{provide: APP_BASE_HREF, useValue: ''}]
|
||||||
|
})
|
||||||
|
class RouteExampleModule {
|
||||||
|
ngDoBootstrap(app: any) {
|
||||||
|
app.bootstrap(RootComponent);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
(window as any).waitForApp = platformBrowser().bootstrapModuleFactory(
|
||||||
|
new NgModuleFactory(RouteExampleModule), {ngZone: 'noop'});
|
||||||
|
|
@ -0,0 +1,35 @@
|
||||||
|
/**
|
||||||
|
* @license
|
||||||
|
* Copyright Google LLC 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 '@angular/compiler';
|
||||||
|
import * as fs from 'fs';
|
||||||
|
import * as path from 'path';
|
||||||
|
|
||||||
|
const UTF8 = {
|
||||||
|
encoding: 'utf-8'
|
||||||
|
};
|
||||||
|
const PACKAGE = 'angular/packages/core/test/bundling/router';
|
||||||
|
|
||||||
|
describe('treeshaking with uglify', () => {
|
||||||
|
let content: string;
|
||||||
|
// We use the debug version as otherwise symbols/identifiers would be mangled (and the test would
|
||||||
|
// always pass)
|
||||||
|
const contentPath = require.resolve(path.join(PACKAGE, 'bundle.min_debug.js'));
|
||||||
|
beforeAll(() => {
|
||||||
|
content = fs.readFileSync(contentPath, UTF8);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should drop unused TypeScript helpers', () => {
|
||||||
|
expect(content).not.toContain('__asyncGenerator');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should not contain rxjs from commonjs distro', () => {
|
||||||
|
expect(content).not.toContain('commonjsGlobal');
|
||||||
|
expect(content).not.toContain('createCommonjsModule');
|
||||||
|
});
|
||||||
|
});
|
||||||
Loading…
Reference in New Issue