build(aio): migrate plunker to stackblitz (#20165)

PR Close #20165

aio/tools/examples/README.md

@@ -28,15 +28,15 @@ in any Angular application using System.js. This is the boilerplate that will be
 Among these files, there are a few special ones:
 
 * **src/systemjs.config.js** - This is the configuration of System.js used to run the example locally.
-* **src/systemjs.config.web.js** - This configuration replaces the previous one on Plunkers.
+* **src/systemjs.config.web.js** - This configuration replaces the previous one on Stackblitz.
 * **src/systemjs.config.web.build.js** - Same as the previous one but for using angular's `-builds`
   versions.
 * **src/systemjs-angular-loader.js** - It is a System.js plugin that removes the need of `moduleId`.
 * **package.json** - This package.json only contains scripts, no dependencies. It contains the
   different tasks needed to run any example. Doesn't matter if CLI, System.js or Webpack.
-* **plnkr.json** - This file is used by the Plunker tool to generate a plunker for an example. This
+* **stackblitz.json** - This file is used by the Stackblitz tool to generate a stackblitz for an example. This
   concrete file is just a placeholder. Authors needs to tweak it for each guide. More at the
-  [plunker docs](../plunker-builder/README.md).
+  [stackblitz docs](../stackblitz-builder/README.md).
 * **example-config.json** - This file serves as a flag to indicate that the current folder is an
   example. This concrete file is just a placeholder. More on this later in this readme.
 
@@ -88,7 +88,7 @@ as shown earlier.
 
 This script installs all the dependencies that are shared among all the examples, creates the
 `node_modules` symlinks and copy all the boilerplate files where needed. It won't do anything
-about plunkers nor e2e tests.
+about stackblitz nor e2e tests.
 
 It also contains a function to remove all the boilerplate. It uses a `git clean -xdf` to do
 the job. It will remove all files that don't exist in the git repository, **including any

aio/tools/examples/example-boilerplate.js

@@ -60,6 +60,11 @@ BOILERPLATE_PATHS.universal = [
   'package.json'
 ];
 
+BOILERPLATE_PATHS.testing = [
+  ...cliRelativePath,
+  '.angular-cli.json'
+];
+
 const EXAMPLE_CONFIG_FILENAME = 'example-config.json';
 
 class ExampleBoilerPlate {

aio/tools/examples/shared/boilerplate/cli/package.json

@@ -21,6 +21,7 @@
     "@angular/platform-browser": "^5.0.0",
     "@angular/platform-browser-dynamic": "^5.0.0",
     "@angular/router": "^5.0.0",
+    "angular-in-memory-web-api": "~0.5.0",
     "core-js": "^2.4.1",
     "rxjs": "^5.5.2",
     "zone.js": "^0.8.14"

aio/tools/examples/shared/boilerplate/cli/src/polyfills.ts

@@ -50,7 +50,7 @@ import 'core-js/es7/reflect';
  * Required to support Web Animations `@angular/platform-browser/animations`.
  * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
  **/
-import 'web-animations-js';
+// import 'web-animations-js';
 
 
 

aio/tools/examples/shared/boilerplate/testing/.angular-cli.json

@@ -0,0 +1,61 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "project": {
+    "name": "angular.io-example"
+  },
+  "apps": [
+    {
+      "root": "src",
+      "outDir": "dist",
+      "assets": [
+        "assets",
+        "favicon.ico"
+      ],
+      "index": "index.html",
+      "main": "main.ts",
+      "polyfills": "polyfills.ts",
+      "test": "test.ts",
+      "tsconfig": "tsconfig.app.json",
+      "testTsconfig": "tsconfig.spec.json",
+      "prefix": "app",
+      "styles": [
+        "test.css",
+        "styles.css"
+      ],
+      "scripts": [],
+      "environmentSource": "environments/environment.ts",
+      "environments": {
+        "dev": "environments/environment.ts",
+        "prod": "environments/environment.prod.ts"
+      }
+    }
+  ],
+  "e2e": {
+    "protractor": {
+      "config": "./protractor.conf.js"
+    }
+  },
+  "lint": [
+    {
+      "project": "src/tsconfig.app.json",
+      "exclude": "**/node_modules/**"
+    },
+    {
+      "project": "src/tsconfig.spec.json",
+      "exclude": "**/node_modules/**"
+    },
+    {
+      "project": "e2e/tsconfig.e2e.json",
+      "exclude": "**/node_modules/**"
+    }
+  ],
+  "test": {
+    "karma": {
+      "config": "./karma.conf.js"
+    }
+  },
+  "defaults": {
+    "styleExt": "css",
+    "component": {}
+  }
+}