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

Author: Foxandxss

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: `