docs: update CLI quickstart to rc.0 (#3295)

All shown boilerplate is copy paste of a new CLI generated project using the rc.0 blueprints.

Formatting might be a bit different from the norm in the angular.io repo but it should be left as is, since the shown files should match a generated project.

public/docs/_examples/_boilerplate/package.json

@@ -38,7 +38,7 @@
   "license": "MIT",
   "dependencies": {},
   "devDependencies": {
-    "angular-cli": "^1.0.0-beta.26"
+    "angular-cli": "^1.0.0-rc.0"
   },
   "repository": {}
 }

public/docs/_examples/cli-quickstart/ts/.angular-cli.json

@@ -1,7 +1,7 @@
 {
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "project": {
-    "version": "1.0.0-beta.25.5",
+    "name": "master-project"
-    "name": "my-app"
   },
   "apps": [
     {
@@ -13,28 +13,38 @@
       ],
       "index": "index.html",
       "main": "main.ts",
+      "polyfills": "polyfills.ts",
       "test": "test.ts",
-      "tsconfig": "tsconfig.json",
+      "tsconfig": "tsconfig.app.json",
+      "testTsconfig": "tsconfig.spec.json",
       "prefix": "app",
-      "mobile": false,
       "styles": [
         "styles.css"
       ],
       "scripts": [],
+      "environmentSource": "environments/environment.ts",
       "environments": {
-        "source": "environments/environment.ts",
         "dev": "environments/environment.ts",
         "prod": "environments/environment.prod.ts"
       }
     }
   ],
-  "addons": [],
-  "packages": [],
   "e2e": {
     "protractor": {
       "config": "./protractor.conf.js"
     }
   },
+  "lint": [
+    {
+      "project": "src/tsconfig.app.json"
+    },
+    {
+      "project": "src/tsconfig.spec.json"
+    },
+    {
+      "project": "e2e/tsconfig.e2e.json"
+    }
+  ],
   "test": {
     "karma": {
       "config": "./karma.conf.js"
@@ -42,18 +52,6 @@
   },
   "defaults": {
     "styleExt": "css",
-    "prefixInterfaces": false,
+    "component": {}
-    "inline": {
-      "style": false,
-      "template": false
-    },
-    "spec": {
-      "class": false,
-      "component": true,
-      "directive": true,
-      "module": false,
-      "pipe": true,
-      "service": true
-    }
   }
 }

public/docs/_examples/cli-quickstart/ts/.editorconfig

@@ -0,0 +1,13 @@
+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

public/docs/_examples/cli-quickstart/ts/.gitignore

@@ -14,9 +14,10 @@
 .c9/
 *.launch
 .settings/
+*.sublime-workspace
 
 # IDE - VSCode
-.vscode/
+.vscode/*
 !.vscode/settings.json
 !.vscode/tasks.json
 !.vscode/launch.json
@@ -40,3 +41,5 @@ testem.log
 Thumbs.db
 
 !src/styles.css
+!karma.conf.js
+!protractor.conf.js

public/docs/_examples/cli-quickstart/ts/README.md

@@ -1,6 +1,6 @@
-# MyApp
+# MasterProject
 
-This project was generated with [angular-cli](https://github.com/angular/angular-cli) version 1.0.0-beta.25.5.
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.0.0-rc.0.
 
 ## Development server
 Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
@@ -22,10 +22,6 @@ Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.
 Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
 Before running the tests make sure you are serving the app via `ng serve`.
 
-## Deploying to GitHub Pages
-
-Run `ng github-pages:deploy` to deploy to GitHub Pages.
-
 ## Further help
 
-To get more help on the `angular-cli` use `ng help` or go check out the [Angular-CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).

public/docs/_examples/cli-quickstart/ts/e2e/tsconfig.e2e.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "sourceMap": true,
+    "declaration": false,
+    "moduleResolution": "node",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "lib": [
+      "es2016"
+    ],
+    "outDir": "../dist/out-tsc-e2e",
+    "module": "commonjs",
+    "target": "es6",
+    "types":[
+      "jasmine",
+      "node"
+    ]
+  }
+}

public/docs/_examples/cli-quickstart/ts/karma.conf.js

@@ -0,0 +1,44 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/0.13/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular/cli'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular/cli/plugins/karma')
+    ],
+    client:{
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    files: [
+      { pattern: './src/test.ts', watched: false }
+    ],
+    preprocessors: {
+      './src/test.ts': ['@angular/cli']
+    },
+    mime: {
+      'text/x-typescript': ['ts','tsx']
+    },
+    coverageIstanbulReporter: {
+      reports: [ 'html', 'lcovonly' ],
+      fixWebpackSourcePaths: true
+    },
+    angularCli: {
+      environment: 'dev'
+    },
+    reporters: config.angularCli && config.angularCli.codeCoverage
+              ? ['progress', 'coverage-istanbul']
+              : ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false
+  });
+};

public/docs/_examples/cli-quickstart/ts/protractor.conf.js

@@ -0,0 +1,31 @@
+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/lib/config.ts
+
+/*global jasmine */
+const { SpecReporter } = require('jasmine-spec-reporter');
+
+exports.config = {
+  allScriptsTimeout: 11000,
+  specs: [
+    './e2e/**/*.e2e-spec.ts'
+  ],
+  capabilities: {
+    'browserName': 'chrome'
+  },
+  directConnect: true,
+  baseUrl: 'http://localhost:4200/',
+  framework: 'jasmine',
+  jasmineNodeOpts: {
+    showColors: true,
+    defaultTimeoutInterval: 30000,
+    print: function() {}
+  },
+  beforeLaunch: function() {
+    require('ts-node').register({
+      project: 'e2e/tsconfig.e2e.json'
+    });
+  },
+  onPrepare() {
+    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
+  }
+};

public/docs/_examples/cli-quickstart/ts/src/app/app.component.spec.ts

@@ -1,18 +1,15 @@
-/* tslint:disable:no-unused-variable */
-
 import { TestBed, async } from '@angular/core/testing';
 
 import { AppComponent } from './app.component';
 
 describe('AppComponent', () => {
-  beforeEach(() => {
+  beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [
         AppComponent
       ],
-    });
+    }).compileComponents();
-    TestBed.compileComponents();
+  }));
-  });
 
   it('should create the app', async(() => {
     const fixture = TestBed.createComponent(AppComponent);

public/docs/_examples/cli-quickstart/ts/src/app/app.module.ts

@@ -1,7 +1,7 @@
 import { BrowserModule } from '@angular/platform-browser';
-import { NgModule }      from '@angular/core';
+import { NgModule } from '@angular/core';
-import { FormsModule }   from '@angular/forms';
+import { FormsModule } from '@angular/forms';
-import { HttpModule }    from '@angular/http';
+import { HttpModule } from '@angular/http';
 
 import { AppComponent } from './app.component';
 

public/docs/_examples/cli-quickstart/ts/src/environments/environment.ts

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

public/docs/_examples/cli-quickstart/ts/src/main.ts

@@ -1,9 +1,8 @@
-import './polyfills.ts';
-
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { enableProdMode } from '@angular/core';
-import { environment } from './environments/environment';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
 import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
 
 if (environment.production) {
   enableProdMode();

public/docs/_examples/cli-quickstart/ts/src/polyfills.ts

@@ -1,19 +1,68 @@
-// This file includes polyfills needed by Angular and is loaded before
+/**
-// the app. You can add your own extra polyfills to this file.
+ * This file includes polyfills needed by Angular and is loaded before the app.
-import 'core-js/es6/symbol';
+ * You can add your own extra polyfills to this file.
-import 'core-js/es6/object';
+ *
-import 'core-js/es6/function';
+ * This file is divided into 2 sections:
-import 'core-js/es6/parse-int';
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
-import 'core-js/es6/parse-float';
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
-import 'core-js/es6/number';
+ *      file.
-import 'core-js/es6/math';
+ *
-import 'core-js/es6/string';
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
-import 'core-js/es6/date';
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
-import 'core-js/es6/array';
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
-import 'core-js/es6/regexp';
+ *
-import 'core-js/es6/map';
+ * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
-import 'core-js/es6/set';
+ */
-import 'core-js/es6/reflect';
 
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/** IE9, IE10 and IE11 requires all of the following polyfills. **/
+// import 'core-js/es6/symbol';
+// import 'core-js/es6/object';
+// import 'core-js/es6/function';
+// import 'core-js/es6/parse-int';
+// import 'core-js/es6/parse-float';
+// import 'core-js/es6/number';
+// import 'core-js/es6/math';
+// import 'core-js/es6/string';
+// import 'core-js/es6/date';
+// import 'core-js/es6/array';
+// import 'core-js/es6/regexp';
+// import 'core-js/es6/map';
+// import 'core-js/es6/set';
+
+/** IE10 and IE11 requires the following for NgClass support on SVG elements */
+// import 'classlist.js';  // Run `npm install --save classlist.js`.
+
+/** IE10 and IE11 requires the following to support `@angular/animation`. */
+// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+
+
+/** Evergreen browsers require these. **/
+import 'core-js/es6/reflect';
 import 'core-js/es7/reflect';
-import 'zone.js/dist/zone';
+
+
+/** ALL Firefox browsers require the following to support `@angular/animation`. **/
+// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+
+
+
+/***************************************************************************************************
+ * Zone JS is required by Angular itself.
+ */
+import 'zone.js/dist/zone';  // Included with Angular CLI.
+
+
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */
+
+/**
+ * Date, currency, decimal and percent pipes.
+ * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
+ */
+// import 'intl';  // Run `npm install --save intl`.

public/docs/_examples/cli-quickstart/ts/src/test.ts

@@ -1,4 +1,4 @@
-import './polyfills.ts';
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
 
 import 'zone.js/dist/long-stack-trace-zone';
 import 'zone.js/dist/proxy.js';

public/docs/_examples/cli-quickstart/ts/src/tsconfig.app.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "sourceMap": true,
+    "declaration": false,
+    "moduleResolution": "node",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "lib": [
+      "es2016",
+      "dom"
+    ],
+    "outDir": "../out-tsc/app",
+    "target": "es5",
+    "module": "es2015",
+    "baseUrl": "",
+    "types": []
+  },
+  "exclude": [
+    "test.ts",
+    "**/*.spec.ts"
+  ]
+}

public/docs/_examples/cli-quickstart/ts/src/tsconfig.json

@@ -1,21 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es5",
-    "module": "commonjs",
-    "moduleResolution": "node",
-    "sourceMap": true,
-    "emitDecoratorMetadata": true,
-    "experimentalDecorators": true,
-    "lib": [ "es2015", "dom" ],
-    "noImplicitAny": true,
-    "suppressImplicitAnyIndexErrors": true,
-    "typeRoots": [
-      "../../../node_modules/@types/"
-    ]
-  },
-  "compileOnSave": true,
-  "exclude": [
-    "node_modules/*",
-    "**/*-aot.ts"
-  ]
-}

public/docs/_examples/cli-quickstart/ts/src/tsconfig.spec.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "sourceMap": true,
+    "declaration": false,
+    "moduleResolution": "node",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "lib": [
+      "es2016"
+    ],
+    "outDir": "../out-tsc/spec",
+    "module": "commonjs",
+    "target": "es6",
+    "baseUrl": "",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts"
+  ]
+}

public/docs/_examples/cli-quickstart/ts/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "outDir": "./dist/out-tsc",
+    "sourceMap": true,
+    "declaration": false,
+    "moduleResolution": "node",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "lib": [
+      "es2016"
+    ]
+  }
+}

public/docs/_examples/package.json

@@ -31,6 +31,7 @@
     "zone.js": "^0.7.4"
   },
   "devDependencies": {
+    "@angular/cli": "^1.0.0-rc.0",
     "@types/angular": "^1.5.16",
     "@types/angular-animate": "^1.5.5",
     "@types/angular-cookies": "^1.4.2",
@@ -40,7 +41,6 @@
     "@types/angular-sanitize": "^1.3.3",
     "@types/jasmine": "2.5.36",
     "@types/node": "^6.0.45",
-    "angular-cli": "^1.0.0-beta.26",
     "angular2-template-loader": "^0.6.0",
     "awesome-typescript-loader": "^3.0.4",
     "babel-cli": "^6.16.0",

public/docs/ts/latest/cli-quickstart.jade

@@ -4,12 +4,12 @@ include _util-fns
   Good tools make application development quicker and easier to maintain than
   if you did everything by hand.
   
-  The [**Angular-CLI**](https://cli.angular.io/) is a **_command line interface_** tool
+  The [**Angular CLI**](https://cli.angular.io/) is a **_command line interface_** tool
   that can create a project, add files, and perform a variety of on-going development tasks such 
   as testing, bundling, and deployment.
   
   The goal in this CLI QuickStart chapter is to build and run a super-simple Angular 
-  application in TypeScript, using Angular-CLI 
+  application in TypeScript, using Angular CLI 
   while adhering to the [Style Guide](./guide/style-guide.html) recommendations that
   benefit _every_ Angular project.
   
@@ -33,11 +33,11 @@ h2#devenv Step 1. Set up the Development Environment
   if they are not already on your machine.
 .l-sub-section
   :marked
-    **Verify that you are running at least node `4.x.x` and npm `3.x.x`**
+    **Verify that you are running at least node `6.9.x` and npm `3.x.x`**
     by running `node -v` and `npm -v` in a terminal/console window.
     Older versions produce errors, but newer versions are fine.
 :marked
-  Then **install the [Angular-CLI](https://github.com/angular/angular-cli)** globally.
+  Then **install the [Angular CLI](https://github.com/angular/angular-cli)** globally.
   
 code-example(language="sh" class="code-shell").
   npm install -g @angular/cli
@@ -65,13 +65,16 @@ h2#serve Step 3: Serve the application
 
 code-example(language="sh" class="code-shell").
   cd my-app
-  ng serve
+  ng serve --open
   
 :marked
   The `ng serve` command launches the server, watches your files, 
   and rebuilds the app as you make changes to those files.
 
-  Open a browser on `http://localhost:4200/`; the app greets you with a message:
+  Using the `--open` (or just `-o`) option will automatically open your browser 
+  on `http://localhost:4200/`. 
+  
+  Your app greets you with a message:
   
 figure.image-display
   img(src='/resources/images/devguide/cli-quickstart/app-works.png' alt="The app works!")
@@ -115,12 +118,12 @@ figure.image-display
 :marked
   ## Project file review
 
-  An Angular-CLI project is the foundation for both quick experiments and enterprise solutions.
+  An Angular CLI project is the foundation for both quick experiments and enterprise solutions.
 
   The first file you should check out is `README.md`.
   It has some basic information on how to use CLI commands.
-  Whenever you want to know more about how Angular-CLI works make sure to visit 
+  Whenever you want to know more about how Angular CLI works make sure to visit 
-  [the Angular-CLI repository](https://github.com/angular/angular-cli) and 
+  [the Angular CLI repository](https://github.com/angular/angular-cli) and 
   [Wiki](https://github.com/angular/angular-cli/wiki).
 
   Some of the generated files might be unfamiliar to you. 
@@ -155,7 +158,8 @@ block src-files
     .file polyfills.ts
     .file styles.css
     .file test.ts
-    .file tsconfig.json
+    .file tsconfig.app.json
+    .file tsconfig.spec.json
 
 style td, th {vertical-align: top}
 table(width="100%")
@@ -241,10 +245,11 @@ table(width="100%")
         It has some custom configuration that might be unfamiliar, but it's not something you'll
         need to edit.
   tr
-    td <code>tsconfig.json</code>
+    td <code>tsconfig.{app|spec}.json</code>
     td
       :marked
-        Configuration for the TypeScript compiler.
+        TypeScript compiler configuration for the Angular app (`tsconfig.app.json`) 
+        and for the unit tests (`tsconfig.spec.json`).
 
 
 block root-files
@@ -261,16 +266,17 @@ block root-files
     .children
       .file app.e2e-spec.ts
       .file app.po.ts
-      .file tsconfig.json
+      .file tsconfig.e2e.json
     .file node_modules/...
     .file src/...
+    .file .angular-cli.json
     .file .editorconfig
     .file .gitignore
-    .file angular-cli.json
     .file karma.conf.js
     .file package.json
     .file protractor.conf.js
     .file README.md
+    .file tsconfig.json        
     .file tslint.json        
 
 style td, th {vertical-align: top}
@@ -287,13 +293,21 @@ table(width="100%")
         Inside `e2e/` live the End-to-End tests. 
         They shouldn't be inside `src/` because e2e tests are really a separate app that
         just so happens to test your main app. 
-        That's why they even have their own `tsconfig.json`.
+        That's also why they have their own `tsconfig.e2e.json`.
   tr
     td <code>node_modules/...</code>
     td
       :marked
         `Node.js` creates this folder and puts all third party modules listed in 
         `package.json` inside of it.
+  tr
+    td <code>angular-cli.json</code>
+    td
+      :marked
+        Configuration for Angular CLI.
+        In this file you can set several defaults and also configure what files are included
+        when your project is build.
+        Check out the official documentation if you want to know more.
   tr
     td <code>.editorconfig</code>
     td
@@ -307,14 +321,6 @@ table(width="100%")
     td
       :marked
         Git configuration to make sure autogenerated files are not commited to source control.
-  tr
-    td <code>angular-cli.json</code>
-    td
-      :marked
-        Configuration for Angular-CLI.
-        In this file you can set several defaults and also configure what files are included
-        when your project is build.
-        Check out the official documentation if you want to know more.
   tr
     td <code>karma.conf.js</code>
     td
@@ -340,6 +346,11 @@ table(width="100%")
         Basic documentation for your project, pre-filled with CLI command information.
         Make sure to enhance it with project documentation so that anyone
         checking out the repo can build your app!
+  tr
+    td <code>tsconfig.json</code>
+    td
+      :marked
+        TypeScript compiler configuration for your IDE to pick up and give you helpful tooling.
   tr
     td <code>tslint.json</code>
     td
@@ -354,4 +365,4 @@ table(width="100%")
 
     If you're new to Angular, we recommend staying on the 
     [learning path](guide/learning-angular.html "Angular learning path").        
-    You can skip the "Setup" chapter since you're already using the Angular-CLI setup.
+    You can skip the "Setup" chapter since you're already using the Angular CLI setup.