chore: remove moduleId from examples (#3362)

* chore: remove moduleId from examples

* add support for testing and plunkers

* delete component-relative cookbook

* latest touches

* ward teaks and travis fixes

* fix typo in style-guide

gulpfile.js

@@ -86,6 +86,7 @@ var _excludeMatchers = _excludePatterns.map(function(excludePattern){
 var _exampleBoilerplateFiles = [
   'src/styles.css',
   'src/systemjs.config.js',
+  'src/systemjs-angular-loader.js',
   'src/tsconfig.json',
   'bs-config.json',
   'bs-config.e2e.json',

public/docs/_examples/.gitignore

@@ -1,6 +1,7 @@
 # _boilerplate files
 !_boilerplate/*
 */*/src/styles.css
+*/*/src/systemjs-angular-loader.js
 */*/src/systemjs.config.js
 */*/src/tsconfig.json
 */*/bs-config.e2e.json

public/docs/_examples/_boilerplate/src/systemjs-angular-loader.js

@@ -0,0 +1,43 @@
+var templateUrlRegex = /templateUrl\s*:(\s*['"`](.*?)['"`]\s*)/gm;
+var stylesRegex = /styleUrls *:(\s*\[[^\]]*?\])/g;
+var stringRegex = /(['`"])((?:[^\\]\\\1|.)*?)\1/g;
+
+module.exports.translate = function(load){
+
+  var url = new URL(load.address);
+
+  var basePathParts = url.pathname.split('/');
+
+  if (url.href.indexOf('plnkr') != -1) {
+    basePathParts.shift();
+    basePathParts.shift();
+  }
+
+  basePathParts.pop();
+  var basePath = basePathParts.join('/');
+  load.source = load.source
+    .replace(templateUrlRegex, function(match, quote, url){
+      let resolvedUrl = url;
+
+      if (url.startsWith('.')) {
+        resolvedUrl = basePath + url.substr(1);
+      }
+
+      return `templateUrl: '${resolvedUrl}'`;
+    })
+    .replace(stylesRegex, function(match, relativeUrls) {
+      var urls = [];
+
+      while ((match = stringRegex.exec(relativeUrls)) !== null) {
+        if (match[2].startsWith('.')) {
+          urls.push(`'${basePath.substr(1)}${match[2].substr(1)}'`);
+        } else {
+          urls.push(`'${match[2]}'`);
+        }
+      }
+
+      return "styleUrls: [" + urls.join(', ') + "]";
+    });
+
+  return load;
+};

public/docs/_examples/_boilerplate/src/systemjs.config.js

@@ -11,7 +11,7 @@
     // map tells the System loader where to look for things
     map: {
       // our app is within the app folder
-      app: 'app',
+      'app': 'app',
 
       // angular bundles
       '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
@@ -32,7 +32,12 @@
     packages: {
       app: {
         main: './main.js',
-        defaultExtension: 'js'
+        defaultExtension: 'js',
+        meta: {
+          './*.js': {
+            loader: 'systemjs-angular-loader.js'
+          }
+        }
       },
       rxjs: {
         defaultExtension: 'js'

public/docs/_examples/_boilerplate/src/systemjs.config.web.build.js

@@ -34,8 +34,9 @@
     },
     // map tells the System loader where to look for things
     map: {
+      'ng-loader': './systemjs-angular-loader.js',
       // our app is within the app folder
-      app: 'app',
+      'app': 'app',
 
       // angular bundles
       '@angular/core': 'ng:core-builds/master/bundles/core.umd.js',
@@ -71,7 +72,12 @@
     packages: {
       app: {
         main: './main.ts',
-        defaultExtension: 'ts'
+        defaultExtension: 'ts',
+        meta: {
+          './*.ts': {
+            loader: 'ng-loader'
+          }
+        }
       },
       rxjs: {
         defaultExtension: 'js'

public/docs/_examples/_boilerplate/src/systemjs.config.web.js

@@ -31,8 +31,9 @@
     },
     // map tells the System loader where to look for things
     map: {
+      'ng-loader': './systemjs-angular-loader.js',
       // our app is within the app folder
-      app: 'app',
+      'app': 'app',
 
       // angular bundles
       '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
@@ -58,7 +59,12 @@
     packages: {
       app: {
         main: './main.ts',
-        defaultExtension: 'ts'
+        defaultExtension: 'ts',
+        meta: {
+          './*.ts': {
+            loader: 'ng-loader'
+          }
+        }
       },
       rxjs: {
         defaultExtension: 'js'

public/docs/_examples/animations/ts/src/app/hero-list-auto.component.ts

@@ -11,7 +11,6 @@ import {
 import { Heroes } from './hero.service';
 
 @Component({
-  moduleId: module.id,
   selector: 'hero-list-auto',
   // #docregion template
   template: `

public/docs/_examples/animations/ts/src/app/hero-list-basic.component.ts

@@ -15,7 +15,6 @@ import {
 import { Heroes } from './hero.service';
 
 @Component({
-  moduleId: module.id,
   selector: 'hero-list-basic',
   // #enddocregion
   /* The click event calls hero.toggleState(), which

public/docs/_examples/animations/ts/src/app/hero-list-combined-transitions.component.ts

@@ -14,7 +14,6 @@ import {
 import { Heroes } from './hero.service';
 
 @Component({
- moduleId: module.id,
  selector: 'hero-list-combined-transitions',
  // #docregion template
  template: `

public/docs/_examples/animations/ts/src/app/hero-list-enter-leave-states.component.ts

@@ -11,7 +11,6 @@ import {
 import { Heroes } from './hero.service';
 
 @Component({
-  moduleId: module.id,
   selector: 'hero-list-enter-leave-states',
   // #docregion template
   template: `

public/docs/_examples/animations/ts/src/app/hero-list-enter-leave.component.ts

@@ -11,7 +11,6 @@ import {
 import { Heroes } from './hero.service';
 
 @Component({
-  moduleId: module.id,
   selector: 'hero-list-enter-leave',
   // #docregion template
   template: `

public/docs/_examples/animations/ts/src/app/hero-list-groups.component.ts

@@ -12,7 +12,6 @@ import {
 import { Heroes } from './hero.service';
 
 @Component({
-  moduleId: module.id,
   selector: 'hero-list-groups',
   template: `
     <ul>

public/docs/_examples/animations/ts/src/app/hero-list-inline-styles.component.ts

@@ -13,7 +13,6 @@ import {
 import { Heroes } from './hero.service';
 
 @Component({
- moduleId: module.id,
  selector: 'hero-list-inline-styles',
  // #docregion template
  template: `

public/docs/_examples/animations/ts/src/app/hero-list-multistep.component.ts

@@ -13,7 +13,6 @@ import {
 import { Heroes } from './hero.service';
 
 @Component({
-  moduleId: module.id,
   selector: 'hero-list-multistep',
   // #docregion template
   template: `

public/docs/_examples/animations/ts/src/app/hero-list-timings.component.ts

@@ -11,7 +11,6 @@ import {
 import { Heroes } from './hero.service';
 
 @Component({
-  moduleId: module.id,
   selector: 'hero-list-timings',
   template: `
     <ul>

public/docs/_examples/animations/ts/src/app/hero-list-twoway.component.ts

@@ -14,7 +14,6 @@ import {
 import { Heroes } from './hero.service';
 
 @Component({
- moduleId: module.id,
  selector: 'hero-list-twoway',
  // #docregion template
  template: `

public/docs/_examples/architecture/ts/src/app/hero-detail.component.ts

@@ -3,7 +3,6 @@ import { Component, Input } from '@angular/core';
 import { Hero } from './hero';
 
 @Component({
-  moduleId: module.id,
   selector: 'hero-detail',
   templateUrl: './hero-detail.component.html'
 })

public/docs/_examples/architecture/ts/src/app/hero-list.component.ts

@@ -5,7 +5,6 @@ import { HeroService }         from './hero.service';
 
 // #docregion metadata, providers
 @Component({
-  moduleId: module.id,
   selector:    'hero-list',
   templateUrl: './hero-list.component.html',
   providers:  [ HeroService ]

public/docs/_examples/attribute-directives/ts/src/app/app.component.1.ts

@@ -1,7 +1,6 @@
 import { Component } from '@angular/core';
 
 @Component({
-  moduleId: module.id,
   selector: 'my-app',
   templateUrl: './app.component.1.html'
 })

public/docs/_examples/attribute-directives/ts/src/app/app.component.ts

@@ -2,7 +2,6 @@
 import { Component } from '@angular/core';
 
 @Component({
-  moduleId: module.id,
   selector: 'my-app',
   templateUrl: './app.component.html'
 })

public/docs/_examples/cb-ajs-quick-reference/ts/src/app/app.component.ts

@@ -4,7 +4,6 @@ import { MovieService } from './movie.service';
 import { IMovie } from './movie';
 
 @Component({
-  moduleId: module.id,
   selector: 'my-app',
   templateUrl: './app.component.html',
   styleUrls: [ './app.component.css' ],

public/docs/_examples/cb-ajs-quick-reference/ts/src/app/movie-list.component.ts

@@ -8,7 +8,6 @@ import { MovieService } from './movie.service';
 
 // #docregion component
 @Component({
-  moduleId: module.id,
   selector: 'movie-list',
   templateUrl: './movie-list.component.html',
 // #docregion style-url

public/docs/_examples/cb-aot-compiler/ts/src/app/app.component.ts

@@ -2,7 +2,6 @@
 import { Component } from '@angular/core';
 
 @Component({
-  moduleId: module.id,
   selector: 'my-app',
   templateUrl: './app.component.html'
 })

public/docs/_examples/cb-aot-compiler/ts/src/index.html

@@ -10,9 +10,6 @@
 
     <script src="node_modules/core-js/client/shim.min.js"></script>
     <script src="node_modules/zone.js/dist/zone.js"></script>
-    <!-- #docregion moduleId -->
-    <script>window.module = 'aot';</script>
-    <!-- #enddocregion moduleId -->
   </head>
   <body>
     <my-app>Loading...</my-app>

public/docs/_examples/cb-component-communication/ts/src/app/app.component.ts

@@ -1,7 +1,6 @@
 import { Component } from '@angular/core';
 
 @Component({
-  moduleId: module.id,
   selector: 'my-app',
   templateUrl: './app.component.html'
 })

public/docs/_examples/cb-component-relative-paths/e2e-spec.ts

@@ -1,42 +0,0 @@
-'use strict'; // necessary for es6 output in node 
-
-import { browser, element, by, ElementFinder } from 'protractor';
-
-describe('Cookbook: component-relative paths', function () {
-
-  interface Page {
-    title: ElementFinder;
-    absComp: ElementFinder;
-    relComp: ElementFinder;
-
-  }
-  function getPageStruct() {
-    return {
-      title: element( by.tagName( 'h1' )),
-      absComp: element( by.css( 'absolute-path div' ) ),
-      relComp: element( by.css( 'relative-path div' ) )
-    };
-  }
-
-  let page: Page;
-  beforeAll(function () {
-      browser.get('');
-      page = getPageStruct();
-  });
-
-  it('should display title of the sample', function () {
-    expect(element(by.tagName('h1')).getText()).toContain('Paths');
-  });
-
-  it('should have absolute-path element', function () {
-    expect(page.absComp.isPresent()).toBe(true, 'no <absolute-path> element');
-  });
-
-  it('should display the absolute path text', function () {
-    expect(page.absComp.getText()).toContain('Absolute');
-  });
-
-  it('should display the component-relative path text', function () {
-    expect(page.relComp.getText()).toContain('Component-relative');
-  });
-});

public/docs/_examples/cb-component-relative-paths/ts/plnkr.json

@@ -1,9 +0,0 @@
-{
-	"description": "Module-relative Paths",
-  "basePath": "src/",
-	"files": [
-		"!**/*.d.ts",
-		"!**/*.js"
-	],
-	"tags": [ "cookbook" ]
-}

public/docs/_examples/cb-component-relative-paths/ts/src/app/app.component.ts

@@ -1,12 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-
-@Component({
-selector: 'my-app',
-template:
-  `<h1>Absolute & <i>Component-Relative</i> Paths</h1>
-  <absolute-path></absolute-path>
-  <relative-path></relative-path>
-  `
-})
-export class AppComponent {}

public/docs/_examples/cb-component-relative-paths/ts/src/app/app.module.ts

@@ -1,18 +0,0 @@
-import { NgModule } from '@angular/core';
-import { BrowserModule }  from '@angular/platform-browser';
-
-import { AppComponent } from './app.component';
-import { SomeAbsoluteComponent, SomeRelativeComponent } from './some.component';
-
-@NgModule({
-  imports: [
-    BrowserModule
-  ],
-  declarations: [
-    AppComponent,
-    SomeAbsoluteComponent,
-    SomeRelativeComponent
-  ],
-  bootstrap: [ AppComponent ]
-})
-export class AppModule { }