chore(AppShell): migrate to rc6 and use ngc (#99)

1. Use ngc:
  - Generate metadata files.
  - Emit ESM modules in order in order to align with the core and provide easier tree-shaking.
2. Migrate to RC.6:
  - Migrate from deprecated APIs.
  - Update SystemJS config to use the Angular ES5 bundles.

Since the current build emits ESM there's a problem with the App Shell Runtime Parser which uses CommonJS internally in order to monkey-patch APIs of parse5 (which uses CommonJS as well).

As cleanest solution I'd suggest to move the Runtime Parse to a separate module once the SW plugin architecture is completed.

Author: mgechev

app-shell/angular-cli-build.js

@@ -10,9 +10,13 @@ module.exports = function(defaults) {
       'zone.js/dist/*.js',
       'es6-shim/es6-shim.js',
       'reflect-metadata/*.js',
+      'reflect-metadata/*.map',
       'rxjs/**/*.js',
+      'rxjs/**/*.map',
       '@angular/**/*.js',
-      'parse5/**/*.js'
+      '@angular/**/*.map',
+      'parse5/**/*.js',
+      'traceur/**/*.js'
     ]
   });
 };

app-shell/config/karma-test-shim.js

@@ -35,11 +35,12 @@ System.import('system-config.js').then(function() {
     System.import('@angular/core/testing'),
     System.import('@angular/platform-browser-dynamic/testing')
   ]).then(function (providers) {
-    var testing = providers[0];
+    var TestBed = providers[0].TestBed;
     var testingBrowser = providers[1];
-
-    testing.setBaseTestProviders(testingBrowser.TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS,
-      testingBrowser.TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS);
+    TestBed.initTestEnvironment(
+      testingBrowser.BrowserDynamicTestingModule,
+      testingBrowser.platformBrowserDynamicTesting()
+    );
   });
 }).then(function() {
   // Finally, load all spec files.

app-shell/config/karma.conf.js

@@ -15,11 +15,17 @@ module.exports = function (config) {
     },
     files: [
       { pattern: 'dist/vendor/es6-shim/es6-shim.js', included: true, watched: false },
+
       { pattern: 'dist/vendor/zone.js/dist/zone.js', included: true, watched: false },
+      { pattern: 'dist/vendor/zone.js/dist/proxy.js', included: true, watched: false },
+      { pattern: 'dist/vendor/zone.js/dist/sync-test.js', included: true, watched: false },
+      { pattern: 'dist/vendor/zone.js/dist/jasmine-patch.js', included: true, watched: false },
+      { pattern: 'dist/vendor/zone.js/dist/async-test.js', included: true, watched: false },
+      { pattern: 'dist/vendor/zone.js/dist/fake-async-test.js', included: true, watched: false },
+
       { pattern: 'dist/vendor/reflect-metadata/Reflect.js', included: true, watched: false },
       { pattern: 'dist/vendor/systemjs/dist/system-polyfills.js', included: true, watched: false },
       { pattern: 'dist/vendor/systemjs/dist/system.src.js', included: true, watched: false },
-      { pattern: 'dist/vendor/zone.js/dist/async-test.js', included: true, watched: false },
 
       { pattern: 'config/karma-test-shim.js', included: true, watched: true },
 

app-shell/package.json

@@ -11,23 +11,26 @@
     "pree2e": "webdriver-manager update",
     "e2e": "protractor",
     "clean": "rm -rf dist",
-    "build": "ng build && tsc -p src/tsconfig.publish.es5.json && tsc -p src/tsconfig.publish.es6.json && cp src/package.json dist/app/package.json && echo '' > dist/vendor/parse5/lib/tokenizer/named_entity_trie.js && browserify dist/app/shell-parser/index.js -s shellParserFactory > dist/app/shell-parser.js && rm -rf dist/app/shell-parser && rm -rf dist/app/vendor",
+    "build": "mkdir -p dist/app && ngc -p src/tsconfig.publish.json && cp src/package.json dist/app/package.json",
+    "build_parser": "echo '' > dist/vendor/parse5/lib/tokenizer/named_entity_trie.js && browserify dist/app/shell-parser/index.js -s shellParserFactory > dist/app/shell-parser.js && rm -rf dist/app/shell-parser && rm -rf dist/app/vendor",
     "build_publish": "npm run clean && npm run build"
   },
   "private": true,
   "dependencies": {
-    "@angular/common": "~2.0.0-rc.5",
-    "@angular/compiler": "~2.0.0-rc.5",
-    "@angular/core": "~2.0.0-rc.5",
-    "@angular/platform-browser": "~2.0.0-rc.5",
-    "@angular/platform-browser-dynamic": "~2.0.0-rc.5",
+    "@angular/common": "^2.0.0-rc.6",
+    "@angular/compiler": "^2.0.0-rc.6",
+    "@angular/core": "^2.0.0-rc.6",
+    "@angular/platform-browser": "^2.0.0-rc.6",
+    "@angular/platform-browser-dynamic": "^2.0.0-rc.6",
     "es6-shim": "^0.35.0",
     "reflect-metadata": "0.1.3",
-    "rxjs": "5.0.0-beta.6",
+    "rxjs": "5.0.0-beta.11",
     "systemjs": "0.19.26",
-    "zone.js": "^0.6.12"
+    "zone.js": "^0.6.17"
   },
   "devDependencies": {
+    "@angular/compiler-cli": "^0.6.0",
+    "@angular/platform-server": "^2.0.0-rc.6",
     "angular-cli": "0.0.*",
     "browserify": "^13.0.1",
     "clang-format": "^1.0.35",
@@ -42,7 +45,7 @@
     "protractor": "^3.3.0",
     "ts-node": "^0.5.5",
     "tslint": "^3.6.0",
-    "typescript": "^1.8.10",
+    "typescript": "^2.0.2",
     "typings": "^1.0.4"
   }
 }

app-shell/src/app/index.ts

@@ -1,12 +1,14 @@
 import { Type, NgModule, ModuleWithProviders } from '@angular/core';
 import { ShellRender } from './shell-render.directive';
 import { ShellNoRender } from './shell-no-render.directive';
+import { IS_PRERENDER } from './is-prerender.service';
 import { APP_SHELL_RUNTIME_PROVIDERS, APP_SHELL_BUILD_PROVIDERS } from './is-prerender.service';
 
 export * from './is-prerender.service';
-export * from './shell-parser';
+export * from './shell-no-render.directive';
+export * from './shell-render.directive';
 
-export const APP_SHELL_DIRECTIVES: Type[] = [
+const APP_SHELL_DIRECTIVES: Type<any>[] = [
   ShellRender,
   ShellNoRender
 ];

app-shell/src/app/is-prerender.service.spec.ts

@@ -1,15 +1,17 @@
-import { OpaqueToken, provide, Provider } from '@angular/core';
+import { OpaqueToken, Provider } from '@angular/core';
 
 export const IS_PRERENDER = new OpaqueToken('IsPrerender');
 
 export const APP_SHELL_RUNTIME_PROVIDERS: Provider[] = [
-  provide(IS_PRERENDER, {
+  {
+    provide: IS_PRERENDER,
     useValue: false
-  })
+  }
 ];
 
 export const APP_SHELL_BUILD_PROVIDERS: Provider[] = [
-  provide(IS_PRERENDER, {
+  {
+    provide: IS_PRERENDER,
     useValue: true
-  })
-];
+  }
+];

app-shell/src/app/is-prerender.service.ts

@@ -1,55 +1,62 @@
 import {
   ComponentFixture,
-  TestComponentBuilder
-} from '@angular/core/testing';
-
-import {
   async,
   inject,
-  addProviders
+  TestBed
 } from '@angular/core/testing';
-import { provide, Component } from '@angular/core';
+import { Component } from '@angular/core';
+
 import { ShellNoRender } from './shell-no-render.directive';
+import { APP_SHELL_RUNTIME_PROVIDERS, APP_SHELL_BUILD_PROVIDERS } from './is-prerender.service';
 import {
-  APP_SHELL_BUILD_PROVIDERS,
-  APP_SHELL_RUNTIME_PROVIDERS
-} from './is-prerender.service';
+  AppShellModule
+} from './index';
 
 @Component({
   selector: 'test-component',
-  template: `<div *shellNoRender>Rendered</div>`,
-  directives: [ShellNoRender]
+  template: `<div *shellNoRender>Rendered</div>`
 })
 class TestComponent {}
 
 describe('ShellNoRender Directive', () => {
+
   describe('prerender', () => {
+
     beforeEach(() => {
-      addProviders([APP_SHELL_BUILD_PROVIDERS]);
+      TestBed.configureTestingModule({
+	imports: [AppShellModule],
+	providers: [APP_SHELL_BUILD_PROVIDERS],
+	declarations: [TestComponent]
+      });
+      TestBed.compileComponents();
     });
 
-    it('should NOT render the element', async(inject([TestComponentBuilder], (tcb:TestComponentBuilder) => {
-      return tcb.createAsync(TestComponent).then((fixture: ComponentFixture<TestComponent>) => {
-        fixture.detectChanges();
-        expect(fixture.debugElement.childNodes.length).toBe(1);
-        expect(fixture.debugElement.childNodes[0].nativeNode.textContent).toBe('template bindings={}');
-      });
-    })));
+    it('should NOT render the element', () => {
+      const fixture = TestBed.createComponent(TestComponent);
+      fixture.detectChanges();
+      expect(fixture.debugElement.childNodes.length).toBe(1);
+      expect(fixture.debugElement.childNodes[0].nativeNode.textContent).toBe('template bindings={}');
+    });
   });
 
 
   describe('runtime', () => {
+
     beforeEach(() => {
-      addProviders([APP_SHELL_RUNTIME_PROVIDERS]);
+      TestBed.configureTestingModule({
+	imports: [AppShellModule],
+	providers: [APP_SHELL_RUNTIME_PROVIDERS],
+	declarations: [TestComponent]
+      });
+      TestBed.compileComponents();
     });
 
-    it('should render the element', async(inject([TestComponentBuilder], (tcb:TestComponentBuilder) => {
-      return tcb.createAsync(TestComponent).then((fixture: ComponentFixture<TestComponent>) => {
-        fixture.detectChanges();
-        expect(fixture.debugElement.childNodes.length).toBe(2);
-        expect(fixture.debugElement.childNodes[0].nativeNode.textContent).toBe('template bindings={}');
-        expect(fixture.debugElement.childNodes[1].nativeNode.textContent).toBe('Rendered');
-      });
-    })));
+    it('should render the element', () => {
+      const fixture = TestBed.createComponent(TestComponent);
+      fixture.detectChanges();
+      expect(fixture.debugElement.childNodes.length).toBe(2);
+      expect(fixture.debugElement.childNodes[0].nativeNode.textContent).toBe('template bindings={}');
+      expect(fixture.debugElement.childNodes[1].nativeNode.textContent).toBe('Rendered');
+    });
   });
 });

app-shell/src/app/shell-no-render.directive.spec.ts

@@ -1,54 +1,63 @@
 import {
   async,
-  addProviders,
   inject,
   ComponentFixture,
-  TestComponentBuilder
+  TestBed
 } from '@angular/core/testing';
-import { provide, Component } from '@angular/core';
+import { Component } from '@angular/core';
 
 import { ShellRender } from './shell-render.directive';
+import { APP_SHELL_RUNTIME_PROVIDERS, APP_SHELL_BUILD_PROVIDERS } from './is-prerender.service';
 import {
-  APP_SHELL_BUILD_PROVIDERS,
-  APP_SHELL_RUNTIME_PROVIDERS
-} from './is-prerender.service';
+  AppShellModule
+} from './index';
 
 @Component({
   selector: 'test-component',
-  template: `<div *shellRender>Rendered</div>`,
-  directives: [ShellRender]
+  template: `<div *shellRender>Rendered</div>`
 })
 class TestComponent {}
 
 describe('ShellRender Directive', () => {
+
   describe('prerender', () => {
+
     beforeEach(() => {
-      addProviders([APP_SHELL_BUILD_PROVIDERS]);
+      TestBed.configureTestingModule({
+	imports: [AppShellModule],
+	providers: [APP_SHELL_BUILD_PROVIDERS],
+	declarations: [TestComponent]
+      });
+      TestBed.compileComponents();
     });
 
-    it('should render the element', async(inject([TestComponentBuilder], (tcb:TestComponentBuilder) => {
-      return tcb.createAsync(TestComponent).then((fixture: ComponentFixture<TestComponent>) => {
-        fixture.detectChanges();
-        expect(fixture.debugElement.childNodes.length).toBe(2);
-        expect(fixture.debugElement.childNodes[0].nativeNode.textContent).toBe('template bindings={}');
-        expect(fixture.debugElement.childNodes[1].nativeNode.textContent).toBe('Rendered');
-      });
-    })));
+    it('should render the element', () => {
+      const fixture = TestBed.createComponent(TestComponent);
+      fixture.detectChanges();
+      expect(fixture.debugElement.childNodes.length).toBe(2);
+      expect(fixture.debugElement.childNodes[0].nativeNode.textContent).toBe('template bindings={}');
+      expect(fixture.debugElement.childNodes[1].nativeNode.textContent).toBe('Rendered');
+    });
   });
 
 
   describe('runtime', () => {
+
     beforeEach(() => {
-      addProviders([APP_SHELL_RUNTIME_PROVIDERS]);
+      TestBed.configureTestingModule({
+	imports: [AppShellModule],
+	providers: [APP_SHELL_RUNTIME_PROVIDERS],
+	declarations: [TestComponent]
+      });
+      TestBed.compileComponents();
     });
 
-    it('should NOT render the element', async(inject([TestComponentBuilder], (tcb:TestComponentBuilder) => {
-      return tcb.createAsync(TestComponent).then((fixture: ComponentFixture<TestComponent>) => {
-        fixture.detectChanges();
-        expect(fixture.debugElement.childNodes.length).toBe(1);
-        expect(fixture.debugElement.childNodes[0].nativeNode.textContent).toBe('template bindings={}');
-      });
-    })));
+    it('should NOT render the element', () => {
+      const fixture = TestBed.createComponent(TestComponent);
+      fixture.detectChanges();
+      expect(fixture.debugElement.childNodes.length).toBe(1);
+      expect(fixture.debugElement.childNodes[0].nativeNode.textContent).toBe('template bindings={}');
+    });
   });
 });
 

app-shell/src/app/shell-render.directive.spec.ts

@@ -2,15 +2,6 @@
 declare var System: any;
 
 const barrels: string[] = [
-  // Angular specific barrels.
-  '@angular/core',
-  '@angular/common',
-  '@angular/compiler',
-  '@angular/http',
-  '@angular/router',
-  '@angular/platform-browser',
-  '@angular/platform-browser-dynamic',
-
   // Parse5 barrels
   'parse5',
   'parse5/parser',
@@ -39,11 +30,25 @@ const barrels: string[] = [
 // Angular CLI SystemJS configuration.
 System.config({
   map: {
-    '@angular': 'vendor/@angular',
     'parse5': 'vendor/parse5/lib',
     'rxjs': 'vendor/rxjs',
+    'traceur': 'vendor/traceur/bin/traceur.js',
     'main': 'main.js'
   },
+  paths: {
+    '@angular/common': 'vendor/@angular/common/bundles/common.umd.js',
+    '@angular/compiler': 'vendor/@angular/compiler/bundles/compiler.umd.js',
+    '@angular/core': 'vendor/@angular/core/bundles/core.umd.js',
+    '@angular/platform-browser': 'vendor/@angular/platform-browser/bundles/platform-browser.umd.js',
+    '@angular/platform-browser-dynamic': 'vendor/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
+
+    '@angular/common/testing': 'vendor/@angular/common/bundles/common-testing.umd.js',
+    '@angular/compiler/testing': 'vendor/@angular/compiler/bundles/compiler-testing.umd.js',
+    '@angular/core/testing': 'vendor/@angular/core/bundles/core-testing.umd.js',
+    '@angular/platform-browser/testing': 'vendor/@angular/platform-browser/bundles/platform-browser-testing.umd.js',
+    '@angular/platform-browser-dynamic/testing': 'vendor/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
+
+  },
   packages: barrels.reduce((barrelConfig: any, barrelName: string) => {
     barrelConfig[barrelName] = {
       main: 'index'