build(aio): align stackblitz files with Angular CLI V6 (#23521)

Also cleans up legacy references to `.angular-cli.json`

PR Close #23521

aio/content/examples/cli-quickstart/zipper.json

@@ -3,7 +3,7 @@
     "!**/*.d.ts",
     "!**/*.js",
     "!**/*.[0-9].*",
-    ".angular-cli.json",
+    "angular.json",
     "protractor.conf.js"
   ]
 }

aio/content/guide/ajs-quick-reference.md

@@ -1256,7 +1256,7 @@ also encapsulate a style sheet within a specific component.
       ### Styles configuration
       <code-example hideCopy path="ajs-quick-reference/.angular-cli.1.json" region="styles" linenums="false"></code-example>
 
-      With the Angular CLI, you can configure your global styles in the `.angular-cli.json` file.
+      With the Angular CLI, you can configure your global styles in the `angular.json` file.
       You can rename the extension to `.scss` to use sass.
 
       ### StyleUrls

aio/content/guide/component-styles.md

@@ -236,7 +236,7 @@ In this case, the URL is relative to the CSS file into which you're importing.
 
 ### External and global style files
 
-When building with the CLI, you must configure the `.angular-cli.json` to include _all external assets_, including external style files.
+When building with the CLI, you must configure the `angular.json` to include _all external assets_, including external style files.
 
 Register **global** style files in the `styles` section which, by default, is pre-configured with the global `styles.css` file.
 

aio/content/guide/deployment.md

@@ -218,7 +218,7 @@ It serves build artifacts from memory instead for a faster development experienc
 <div class="l-sub-section">
 
 The output folder is  `dist/` by default.
-To output to a different folder, change the `outDir` in `.angular-cli.json`.
+To output to a different folder, change the `outputPath` in `angular.json`.
 
 </div>
 

aio/content/guide/testing.md

@@ -57,11 +57,11 @@ The tests run again, the browser refreshes, and the new test results appear.
 
 The CLI takes care of Jasmine and karma configuration for you.
 
-You can fine-tune many options by editing the `karma.conf.js` file in the project root folder and
+You can fine-tune many options by editing the `karma.conf.js` and
-the `test.ts` file in the `src/` folder.
+the `test.ts` files in the `src/` folder.
 
 The `karma.conf.js` file is a partial karma configuration file.
-The CLI constructs the full runtime configuration in memory,based on application structure specified in the `.angular-cli.json` file, supplemented by `karma.conf.js`.
+The CLI constructs the full runtime configuration in memory,based on application structure specified in the `angular.json` file, supplemented by `karma.conf.js`.
 
 Search the web for more details about Jasmine and karma configuration.
 

aio/package.json

@@ -126,6 +126,7 @@
     "ignore": "^3.3.3",
     "image-size": "^0.5.1",
     "jasmine-core": "^2.8.0",
+    "jasmine-marbles": "^0.3.1",
     "jasmine-spec-reporter": "^4.1.0",
     "jasmine-ts": "^0.2.1",
     "jsdom": "^9.12.0",

aio/tools/example-zipper/exampleZipper.js

@@ -86,7 +86,7 @@ class ExampleZipper {
     let alwaysIncludes = [
       'bs-config.json',
       'e2e/protractor.conf.js',
-      '.angular-cli.json',
+      'angular.json',
       '.editorconfig',
       '.gitignore',
       'tslint.json',

aio/tools/examples/shared/boilerplate/UPDATING_CLI.md

@@ -22,21 +22,28 @@ Now you have a fresh application to get our new boilerplate files.
 
 From `dummy` you can replace the following files into `aio/tools/examples/shared/boilerplate/cli`:
 
-* tslint.json
-* tsconfig.json
-* package.json
-* protractor.conf.js
-* karma.conf.js
 * .editorconfig
-* angular-cli.json
+* angular.json
-* src/tsconfig.spec.json
+* package.json
-* src/test.ts
+* tsconfig.json
-* src/polyfills.js
+* tslint.json
-* src/typings.d.ts
+* e2e/src/app.po.ts
+* e2e/protractor.conf.js
+* e2e/tsconfig.e2e.json
 * src/environments/environment.prod.ts
 * src/environments/environment.ts
+* src/browserslist
+* src/favicon.ico
+* src/karma.conf.js
+* src/polyfills.js
+* src/styles.css
+* src/test.ts
+* src/tsconfig.app.json
+* src/tsconfig.spec.json
+* src/tslint.json
+* src/typings.d.ts
 
-### .angular-cli.json
+### angular.json
 
 Update the `project > name` to `angular.io-example`.
 
@@ -44,10 +51,6 @@ Update the `project > name` to `angular.io-example`.
 
 Update the `name` to `angular.io-example`.
 
-### src/polyfills.ts
-
-Uncomment the `import 'web-animations-js';` line to enable `web-animations-js` package.
-
 ### src/tsconfig.app.json
 
 This file is small enough and there are a few new excludes, update by hand.

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

@@ -1,60 +0,0 @@
-{
-  "$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": [
-        "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": {}
-  }
-}

aio/tools/examples/shared/boilerplate/cli/src/environments/environment.ts

@@ -1,7 +1,6 @@
-// The file contents for the current environment will overwrite these during build.
+// This file can be replaced during build by using the `fileReplacements` array.
-// The build system defaults to the dev environment which uses `environment.ts`, but if you do
+// `ng build ---prod` replaces `environment.ts` with `environment.prod.ts`.
-// `ng build --env=prod` then `environment.prod.ts` will be used instead.
+// The list of file replacements can be found in `angular.json`.
-// The list of which env maps to which file can be found in `.angular-cli.json`.
 
 export const environment = {
   production: false

aio/tools/stackblitz-builder/builder.js

@@ -252,7 +252,7 @@ class StackblitzBuilder {
     }
 
     var defaultIncludes = ['**/*.ts', '**/*.js', '**/*.css', '**/*.html', '**/*.md', '**/*.json', '**/*.png'];
-    var boilerplateIncludes = ['src/environments/*.*', '.angular-cli.json', 'src/polyfills.ts'];
+    var boilerplateIncludes = ['src/environments/*.*', 'angular.json', 'src/polyfills.ts'];
     if (config.files) {
       if (config.files.length > 0) {
         if (config.files[0].substr(0, 1) == '!') {

aio/yarn.lock

@@ -5846,6 +5846,12 @@ jasmine-core@^2.8.0, jasmine-core@~2.8.0:
   version "2.8.0"
   resolved "https://registry.yarnpkg.com/jasmine-core/-/jasmine-core-2.8.0.tgz#bcc979ae1f9fd05701e45e52e65d3a5d63f1a24e"
 
+jasmine-marbles@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/jasmine-marbles/-/jasmine-marbles-0.3.1.tgz#ef65edecb41b8dd62fc6bda40448222042e32043"
+  dependencies:
+    lodash "^4.5.0"
+
 jasmine-spec-reporter@^4.1.0:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/jasmine-spec-reporter/-/jasmine-spec-reporter-4.2.1.tgz#1d632aec0341670ad324f92ba84b4b32b35e9e22"