robwormald

//hacked up view engine parts
import {ComponentFactory, ComponentRef} from './core/linker/component_factory';
import {ErrorHandler} from './core/error_handler';
import {Injector} from './core/di/injector';
import {NgModuleRef} from './core/linker/ng_module_factory';
import {RendererFactory2} from './core/render/api';
import {Sanitizer} from './core/security';
import {initServicesIfNeeded} from './core/view/index';
import {SimpleRendererFactory} from './core/renderer';

robwormald

import {NgModule, Component} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'demo-app',
  template: `
    <h1>hello {{name}}</h1>
  `
})
export class DemoApp {

robwormald

{
	"summaries": [
		{
			"symbol": {
				"__symbol": 0,
				"members": []
			},
			"metadata": {
				"__symbolic": "class"
			},

robwormald

• install CLI npm install -g @angular/cli
• create a new app ng new sw-demo-app && cd sw-demo-app
• install service worker npm install @angular/service-worker --save
• enable service worker ng set apps.0.serviceWorker=true
• build with AoT compilation + optimizations ng build --aot --prod

robwormald

@Component({
  selector: 'tree',
  inputs: ['data'],
  template: `
    <span [style.backgroundColor]="bgColor"> {{data.value}} </span>
    <tree *ngIf='data.left != null' [data]='data.left'></tree>
    <tree *ngIf='data.right != null' [data]='data.right'></tree>
`
})
export class TreeComponent {

robwormald

/*
 AngularJS v1.5.11-local+sha.f73a65146
 (c) 2010-2017 Google, Inc. http://angularjs.org
 License: MIT
*/
(function(H) {
    'use strict';

    function N(a) {
        return function() {

robwormald

import {mock, module} from 'angular';

import {NG1_MODULE, NG1Service} from './ng1.service';

// One option is to mock out the downgraded services when testing in AngularJS
const mockModule = module('mockNg2Module', [])
  .service('ng2service', class MockNg2Service {
    getMessage() { return 'Always look on the bright side of life.'; }
  });

robwormald

test foo bar

<foo>
  ```md
    foobar

```

robwormald

const NgCompilerPlugin = require('@ngtools/webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpack = require('webpack');
const path = require('path');
module.exports = {
	entry: {
		'admin-app': './src/admin/main.ts',
	},
	resolve: {
		extensions: ['.ts', '.js'],

robwormald

import {Observable} from 'rxjs' //the entire package, 300+KB

import {Observable} from 'rxjs/Observable' //just Observable, no operators, ~8KB
import {Subject} from 'rxjs/Subject' //just Subject, no operators
import 'rxjs/add/operator/map' //patch Observable proto with map operator