Skip to content

Instantly share code, notes, and snippets.

@park-brian
Last active November 28, 2019 02:59
Show Gist options
  • Save park-brian/f286442350b47e25a53aa437f0c0872c to your computer and use it in GitHub Desktop.
Save park-brian/f286442350b47e25a53aa437f0c0872c to your computer and use it in GitHub Desktop.
importScripts(
"https://unpkg.com/babel-polyfill@6.26.0/dist/polyfill.min.js",
"https://unpkg.com/rxjs@6.3.3/bundles/rxjs.umd.min.js",
"https://unpkg.com/zone.js@0.8.26/dist/zone.min.js",
"https://unpkg.com/@angular/core@7.0.3/bundles/core.umd.min.js",
"https://unpkg.com/@angular/common@7.0.3/bundles/common.umd.min.js",
"https://unpkg.com/@angular/compiler@7.0.3/bundles/compiler.umd.min.js",
"https://unpkg.com/@angular/platform-browser@7.0.3/bundles/platform-browser.umd.min.js",
"https://unpkg.com/@angular/platform-webworker@7.0.3/bundles/platform-webworker.umd.min.js",
"https://unpkg.com/@angular/platform-browser-dynamic@7.0.3/bundles/platform-browser-dynamic.umd.min.js",
"https://unpkg.com/@angular/platform-webworker-dynamic@7.0.3/bundles/platform-webworker-dynamic.umd.min.js"
);
// Create HelloComponent
HelloComponent.annotations = [
new ng.core.Component({
selector: 'hello-root',
templateUrl: 'hello-component.html'
})
];
function HelloComponent() {
this.title = 'Hello Angular!';
this.message = 'Click Me!';
this.updateMessage = function () {
this.message = 'Oh no, my bundle size!';
}
}
// Create HelloModule
HelloModule.annotations = [
new ng.core.NgModule({
declarations: [HelloComponent],
imports: [ng.platformWebworker.WorkerAppModule],
bootstrap: [HelloComponent]
})
];
function HelloModule() {}
// Bootstrap Module
ng.core.enableProdMode();
ng.platformWebworkerDynamic
.platformWorkerAppDynamic()
.bootstrapModule(HelloModule);
<h1>{{ title }}</h1>
<button (click)="updateMessage()">
{{ message }}
</button>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Angular 6 (ES5)</title>
</head>
<body>
<hello-root>
Loading...
</hello-root>
<script src="https://unpkg.com/babel-polyfill@6.26.0/dist/polyfill.min.js"></script>
<script src="https://unpkg.com/rxjs@6.3.3/bundles/rxjs.umd.min.js"></script>
<script src="https://unpkg.com/zone.js@0.8.26/dist/zone.min.js"></script>
<script src="https://unpkg.com/@angular/core@7.0.3/bundles/core.umd.min.js"></script>
<script src="https://unpkg.com/@angular/common@7.0.3/bundles/common.umd.min.js"></script>
<script src="https://unpkg.com/@angular/platform-browser@7.0.3/bundles/platform-browser.umd.min.js"></script>
<script src="https://unpkg.com/@angular/platform-webworker@7.0.3/bundles/platform-webworker.umd.min.js"></script>
<script>
ng.core.enableProdMode();
ng.platformWebworker.bootstrapWorkerUi('app.js');
</script>
</body>
</html>
@park-brian
Copy link
Author

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment