docs: move old quick start content into new local setup guide (#29651)

PR Close #29651

aio/content/examples/cli-quickstart/bs-config.cli.json

@@ -1,11 +0,0 @@
-{
-  "open": false,
-  "logLevel": "silent",
-  "port": 8080,
-  "server": {
-    "baseDir": "dist",
-    "middleware": {
-      "0": null
-    }
-  }
-}

aio/content/examples/cli-quickstart/e2e/src/app.e2e-spec.ts

@@ -1,14 +0,0 @@
-'use strict'; // necessary for es6 output in node
-
-import { browser, element, by } from 'protractor';
-
-describe('cli-quickstart App', () => {
-  beforeEach(() => {
-    return browser.get('/');
-  });
-
-  it('should display message saying app works', () => {
-    let pageTitle = element(by.css('app-root h1')).getText();
-    expect(pageTitle).toEqual('Welcome to My First Angular App!!');
-  });
-});

aio/content/examples/cli-quickstart/example-config.json

@@ -1,4 +0,0 @@
-{
-  "build": "build:cli",
-  "run": "serve:cli"
-}

aio/content/examples/cli-quickstart/src/app/app.component.css

@@ -1,6 +0,0 @@
-/* #docregion */
-h1 {
-  color: #369;
-  font-family: Arial, Helvetica, sans-serif;
-  font-size: 250%;
-}

aio/content/examples/cli-quickstart/src/app/app.component.html

@@ -1,19 +0,0 @@
-<!--The content below is only a placeholder and can be replaced.-->
-<div style="text-align:center">
-  <h1>
-    Welcome to {{ title }}!
-  </h1>
-  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
-</div>
-<h2>Here are some links to help you start: </h2>
-<ul>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
-  </li>
-</ul>

aio/content/examples/cli-quickstart/src/app/app.component.spec.ts

@@ -1,30 +0,0 @@
-import { TestBed, async } from '@angular/core/testing';
-import { AppComponent } from './app.component';
-describe('AppComponent', () => {
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [
-        AppComponent
-      ],
-    }).compileComponents();
-  }));
-
-  it('should create the app', async(() => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
-    expect(app).toBeTruthy();
-  }));
-
-  it(`should have as title 'app'`, async(() => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
-    expect(app.title).toMatch(/app/i);
-  }));
-
-  it('should render title in a h1 tag', async(() => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.debugElement.nativeElement;
-    expect(compiled.querySelector('h1').textContent).toMatch(/app/i);
-  }));
-});

aio/content/examples/cli-quickstart/src/app/app.component.ts

@@ -1,16 +0,0 @@
-// #docregion import
-import { Component } from '@angular/core';
-// #enddocregion import
-
-// #docregion metadata, component
-@Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
-})
-// #enddocregion metadata
-// #docregion title, class
-export class AppComponent {
-  title = 'My First Angular App!';
-}
-// #enddocregion title, class, component

aio/content/examples/cli-quickstart/src/app/app.module.ts

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

aio/content/examples/cli-quickstart/src/index.html

@@ -1,14 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>MyApp</title>
-  <base href="/">
-
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
-</head>
-<body>
-  <app-root></app-root>
-</body>
-</html>

aio/content/examples/cli-quickstart/src/main.ts

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

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

@@ -1,9 +0,0 @@
-{
-  "files":[
-    "!**/*.d.ts",
-    "!**/*.js",
-    "!**/*.[0-9].*",
-    "angular.json",
-    "protractor.conf.js"
-  ]
-}

aio/content/guide/attribute-directives.md

@@ -15,7 +15,7 @@ There are three kinds of directives in Angular:
 1. Attribute directives—change the appearance or behavior of an element, component, or another directive.
 
 *Components* are the most common of the three directives.
-You saw a component for the first time in the [Getting Started](guide/quickstart).
+You saw a component for the first time in the [Getting Started](start "Getting Started with Angular") tutorial.
 
 *Structural Directives* change the structure of the view.
 Two examples are [NgFor](guide/template-syntax#ngFor) and [NgIf](guide/template-syntax#ngIf).

aio/content/guide/deployment.md

@@ -338,10 +338,10 @@ The following example displays the graph for the _main_ bundle.
 The `source-map-explorer` analyzes the source map generated with the bundle and draws a map of all dependencies,
 showing exactly which classes are included in the bundle.
 
-Here's the output for the _main_ bundle of the QuickStart.
+Here's the output for the _main_ bundle of an example app called `cli-quickstart`.
 
 <figure>
-  <img src="generated/images/guide/cli-quickstart/quickstart-sourcemap-explorer.png" alt="quickstart sourcemap explorer">
+  <img src="generated/images/guide/deployment/quickstart-sourcemap-explorer.png" alt="quickstart sourcemap explorer">
 </figure>
 
 {@a base-tag}

aio/content/guide/displaying-data.md

@@ -31,8 +31,7 @@ The easiest way to display a component property
 is to bind the property name through interpolation.
 With interpolation, you put the property name in the view template, enclosed in double curly braces: `{{myHero}}`.
 
-Follow the [Getting Started](guide/quickstart) instructions for creating a new project
-named <code>displaying-data</code>.
+Use the CLI command [`ng new displaying-data`](cli/new) to create a workspace and app named `displaying-data`. 
 
 Delete the <code>app.component.html</code> file. It is not needed for this example.
 

aio/content/guide/glossary.md

@@ -176,7 +176,7 @@ In Angular, a set of related [schematics](#schematic) collected in an [npm packa
 
 The [Angular CLI](cli) is a command-line tool for managing the Angular development cycle. Use it to create the initial filesystem scaffolding for a [workspace](#workspace) or [project](#project), and to run [schematics](#schematic) that add and modify code for initial generic versions of various elements. The CLI supports all stages of the development cycle, including building, testing, bundling, and deployment.
 
-* To begin using the CLI for a new project, see [Getting Started](guide/quickstart).
+* To begin using the CLI for a new project, see [Local Environment Setup](guide/setup-local "Setting up for Local Development").
 * To learn more about the full capabilities of the CLI, see the [CLI command reference](cli).
 
 See also [Schematics CLI](#schematics-cli).

aio/content/guide/npm-packages.md

@@ -9,7 +9,7 @@ Alternatively, you can use the [yarn client](https://yarnpkg.com/) for downloadi
 
 <div class="alert is-helpful">
 
-See [Getting Started](guide/quickstart#prerequisites) for information about the required versions and installation of Node.js and npm.
+See [Local Environment Setup](guide/setup-local "Setting up for Local Development") for information about the required versions and installation of `Node.js` and `npm`.
 
 If you already have projects running on your machine that use other versions of Node.js and npm, consider using [nvm](https://github.com/creationix/nvm) to manage the multiple versions of Node.js and npm. 
 

aio/content/guide/prerequisites-setup.md

@@ -1,148 +0,0 @@
-# Prerequisites and Setup / Creating a workspace / Local development / Local environment 
-
-This guide describes how to get started with local development. 
-
-It includes: 
-* Prerequisites
-* How to install the Angular CLI
-* How to create a workspace and initial app project
-* How to serve an app project locally
-* Additional resources
-
-{@a devenv}
-{@a prerequisites}
-## Prerequisites 
-
-
-{@a nodejs}
-### Node.js
-
-Angular requires `Node.js` version 8.x or 10.x.
-
-* To check your version, run `node -v` in a terminal/console window.
-
-* To get `Node.js`, go to [nodejs.org](https://nodejs.org "Nodejs.org").
-
-{@a npm}
-### npm package manager: npm or yarn
-
-Angular, the Angular CLI, and Angular apps depend on features and functionality provided by libraries that are available as [npm packages](https://docs.npmjs.com/getting-started/what-is-npm). To download and install npm packages, you must have an npm package manager. 
-
-The following package managers have been verified with Angular: 
-
-* The [npm client](https://docs.npmjs.com/cli/npm) command line interface, which is installed with `Node.js` by default. To check if you have the npm client installed, run `npm -v` in a terminal/console window. Most of the documentation for Angular assumes the npm client.
-
-* The [yarn client](https://yarnpkg.com/) command line interface. 
-
-{@a install-cli}
-
-## Step 1: Install the Angular CLI
-
-You use the Angular CLI 
-to create projects, generate application and library code, and perform a variety of ongoing development tasks such as testing, bundling, and deployment.
-
-Install the Angular CLI globally. 
-
-To install the CLI using `npm`, open a terminal/console window and enter the following command:
-
-
-<code-example language="sh" class="code-shell">
-  npm install -g @angular/cli
-
-</code-example>
-
-
-
-{@a create-proj}
-
-## Step 2: Create a workspace and initial application
-
-You develop apps in the context of an Angular [**workspace**](guide/glossary#workspace). A workspace contains the files for one or more [**projects**](guide/glossary/#project). A project is the set of files that comprise an app, a library, or end-to-end (e2e) tests. 
-
-To create a new workspace and initial app project: 
-
-1. Run the CLI command `ng new` and provide the name `my-app`, as shown here: 
-
-    <code-example language="sh" class="code-shell">
-      ng new my-app
-
-    </code-example>
-
-2. The `ng new` command prompts you for information about features to include in the initial app project. Accept the defaults by pressing the Enter or Return key. 
-
-The Angular CLI installs the necessary Angular npm packages and other dependencies. This can take a few minutes. 
-
-It also creates the following workspace and starter project files: 
-
-* A new workspace, with a root folder named `my-app`
-* An initial skeleton app project, also called `my-app` (in the `src` subfolder)
-* An end-to-end test project (in the `e2e` subfolder)
-* Related configuration files
-
-The initial app project contains a simple Welcome app, ready to run. 
-
-{@a serve}
-
-## Step 3: Serve the application
-
-Angular includes a server, so that you can easily build and serve your app locally.
-
-1. Go to the workspace folder (`my-app`).
-
-1. Launch the server by using the CLI command `ng serve`, with the `--open` option.
-
-<code-example language="sh" class="code-shell">
-  cd my-app
-  ng serve --open
-</code-example>
-
-The `ng serve` command launches the server, watches your files,
-and rebuilds the app as you make changes to those files.
-
-The `--open` (or just `-o`) option automatically opens your browser
-to `http://localhost:4200/`.
-
-Your app greets you with a message:
-
-
-<figure>
-  <img src='generated/images/guide/cli-quickstart/app-works.png' alt="Welcome to my-app!">
-</figure>
-
-
-
-
-## Additional resources
-
-If you're new to Angular: 
-
-* The [Getting Started](tutorial/) provides hands-on learning. It walks you through the steps to build your first app in an online environment and then deploy that app to your local system. While building a basic catalog and shopping cart app, you'll be introduced to components (the building blocks of Angular), Angular's HTML template syntax, basic display and navigation between views, using services and external data, and scaling and tuning your app. 
-
-* The [Tour of Heroes tutorial](tutorial "Tour of Heroes tutorial") provides additional hands-on learning. It walks you through the steps to build an app that helps a staffing agency manage a group of superhero employees. All of the steps are done locally. 
- 
-
-* The [Architecture guide](guide/architecture "Architecture guide") describes key concepts such as modules, components, services, and dependency injection (DI). It provides a foundation for more in-depth guides about specific Angular concepts and features.  
-
-After the Tutorial and Architecture guide, you'll be ready to continue exploring Angular on your own through the other guides and references in this documentation set, focusing on the features most important for your apps. 
-
-
-
-
-## Related technologies and tools
-
-Angular assumes specific versions of many related technologies and tools, such as TypeScript, Karma, Protractor, tsickle, zone.js.
-
-The `package.json` is organized into two groups of packages:
-
-* [Dependencies](guide/npm-packages#dependencies) are essential to *running* applications.
-* [DevDependencies](guide/npm-packages#dev-dependencies) are only necessary to *develop* applications.
-
-These packages are described in more detail in [Workspace dependencies](guide/npm-packages).
-
-
-
-{@a others}
-## Managing different development environments
-
-If you already have projects running on your machine that use other versions of Node.js and npm, consider using [nvm](https://github.com/creationix/nvm) on Mac or Linux, or [nvm-windows](https://github.com/coreybutler/nvm-windows) on Windows, to manage the multiple versions of Node.js and npm. 
-

aio/content/guide/quickstart.md

@@ -1,192 +0,0 @@
-# QuickStart to Local Environment Setup and Development 
-
-Welcome to Angular! Angular helps you build modern applications for the web, mobile, or desktop.  
-
-
-<div class="callout is-helpful">
-<header>Getting Started - Stackblitz</header>
-
-
-We recently introduced a [**new Getting Started**](getting-started) that leverages the [StackBlitz](https://stackblitz.com/) online development environment. 
-We recommend the new Getting Started for anyone who wants to quickly learn the essentials of Angular, in the context of building a basic online store app. 
-
-
-</div> 
-
-
-This guide shows you how to build and run a simple Angular app in your local development environment using the [Angular CLI tool](cli "CLI command reference"). 
-At the end of this guide&mdash;as part of final code review&mdash;there is a link to download a copy of the final application code, so that you can compare your work, validate your local setup, or just explore a simple Angular app. 
-This guide takes less than 30 minutes to complete. 
-
-
-{@a devenv}
-{@a prerequisites}
-## Prerequisites 
-
-Before you begin, make sure your development environment includes `Node.js®` and an npm package manager. 
-
-{@a nodejs}
-### Node.js
-
-Angular requires `Node.js` version 8.x or 10.x.
-
-* To check your version, run `node -v` in a terminal/console window.
-
-* To get `Node.js`, go to [nodejs.org](https://nodejs.org "Nodejs.org").
-
-{@a npm}
-### npm package manager
-
-Angular, the Angular CLI, and Angular apps depend on features and functionality provided by libraries that are available as [npm packages](https://docs.npmjs.com/getting-started/what-is-npm). To download and install npm packages, you must have an npm package manager. 
-
-This Quick Start uses the [npm client](https://docs.npmjs.com/cli/install) command line interface, which is installed with `Node.js` by default. 
-
-To check that you have the npm client installed, run `npm -v` in a terminal/console window.
-
-
-{@a install-cli}
-
-## Step 1: Install the Angular CLI
-
-You use the Angular CLI 
-to create projects, generate application and library code, and perform a variety of ongoing development tasks such as testing, bundling, and deployment.
-
-Install the Angular CLI globally. 
-
-To install the CLI using `npm`, open a terminal/console window and enter the following command:
-
-
-<code-example language="sh" class="code-shell">
-  npm install -g @angular/cli
-
-</code-example>
-
-
-
-{@a create-proj}
-
-## Step 2: Create a workspace and initial application
-
-You develop apps in the context of an Angular [**workspace**](guide/glossary#workspace). A workspace contains the files for one or more [**projects**](guide/glossary/#project). A project is the set of files that comprise an app, a library, or end-to-end (e2e) tests. 
-
-To create a new workspace and initial app project: 
-
-1. Run the CLI command `ng new` and provide the name `my-app`, as shown here: 
-
-    <code-example language="sh" class="code-shell">
-      ng new my-app
-
-    </code-example>
-
-2. The `ng new` command prompts you for information about features to include in the initial app project. Accept the defaults by pressing the Enter or Return key. 
-
-The Angular CLI installs the necessary Angular npm packages and other dependencies. This can take a few minutes. 
-
-It also creates the following workspace and starter project files: 
-
-* A new workspace, with a root folder named `my-app`
-* An initial skeleton app project, also called `my-app` (in the `src` subfolder)
-* An end-to-end test project (in the `e2e` subfolder)
-* Related configuration files
-
-The initial app project contains a simple Welcome app, ready to run. 
-
-{@a serve}
-
-## Step 3: Serve the application
-
-Angular includes a server, so that you can easily build and serve your app locally.
-
-1. Go to the workspace folder (`my-app`).
-
-1. Launch the server by using the CLI command `ng serve`, with the `--open` option.
-
-<code-example language="sh" class="code-shell">
-  cd my-app
-  ng serve --open
-</code-example>
-
-The `ng serve` command launches the server, watches your files,
-and rebuilds the app as you make changes to those files.
-
-The `--open` (or just `-o`) option automatically opens your browser
-to `http://localhost:4200/`.
-
-Your app greets you with a message:
-
-
-<figure>
-  <img src='generated/images/guide/cli-quickstart/app-works.png' alt="Welcome to my-app!">
-</figure>
-
-
-
-{@a first-component}
-
-## Step 4: Edit your first Angular component
-
-[**_Components_**](guide/glossary#component) are the fundamental building blocks of Angular applications. 
-They display data on the screen, listen for user input, and take action based on that input. 
-
-As part of the initial app, the CLI created the first Angular component for you. It is the _root component_, and it is named `app-root`. 
-
-1. Open `./src/app/app.component.ts`. 
-
-2. Change the `title` property from `'my-app'` to `'My First Angular App'`.
-
-    <code-example path="cli-quickstart/src/app/app.component.ts" region="component" header="src/app/app.component.ts" linenums="false"></code-example>
-
-    The browser reloads automatically with the revised title. That's nice, but it could look better.
-
-3. Open `./src/app/app.component.css` and give the component some style.
-
-    <code-example path="cli-quickstart/src/app/app.component.css" header="src/app/app.component.css" linenums="false"></code-example>
-
-Looking good! 
-
-<figure>
-  <img src='generated/images/guide/cli-quickstart/my-first-app.png' alt="Output of Getting Started app">
-</figure>
-
-
-
-
-{@a project-file-review}
-
-## Final code review
-
-You can <a href="generated/zips/cli-quickstart/cli-quickstart.zip" target="_blank">download an example</a> of the app that you created in this Getting Started guide. 
-
-
-<div class="alert is-helpful">
-
-**Tip:** Most Angular guides include links to download example files and run live examples in [Stackblitz](http://www.stackblitz.com), so that you can see Angular concepts and code in action. 
-
-
-</div>
-
-
-For more information about Angular project files and the file structure, see [Workspace and project file structure](guide/file-structure).
-
-
-
-
-## Next steps
-
-Now that you've seen the essentials of an Angular app and the Angular CLI, continue with these other introductory materials: 
-
-* The [Tour of Heroes tutorial](tutorial "Tour of Heroes tutorial") provides additional hands-on learning. It walks you through the steps to build an app that helps a staffing agency manage a group of superhero employees. 
-It has many of the features you'd expect to find in a data-driven application: 
-
-        - Acquiring and displaying a list of items
-
-        - Editing a selected item's detail
-
-        - Navigating among different views of the data
-
-
-* The [Architecture guide](guide/architecture "Architecture guide") describes key concepts such as modules, components, services, and dependency injection (DI). It provides a foundation for more in-depth guides about specific Angular concepts and features.  
-
-After the Tutorial and Architecture guide, you'll be ready to continue exploring Angular on your own through the other guides and references in this documentation set, focusing on the features most important for your apps. 
-
-

aio/content/guide/setup-local.md

@@ -0,0 +1,129 @@
+# Setting up the Local Environment and Workspace
+
+
+This guide explains how to set up your environment for Angular development using the [Angular CLI tool](cli "CLI command reference"). 
+It includes information about prerequisites, installing the CLI, creating an initial workspace and starter app, and running that app locally to verify your setup. 
+
+
+<div class="callout is-helpful">
+<header>Learning Angular</header>
+
+If you are new to Angular, see [Getting Started](start). Getting Started helps you quickly learn the essentials of Angular, in the context of building a basic online store app. It leverages the [StackBlitz](https://stackblitz.com/) online development environment, so you don't need to set up your local environment until you're ready. 
+
+
+</div> 
+
+
+{@a devenv}
+{@a prerequisites}
+## Prerequisites 
+
+Before you begin, make sure your development environment includes `Node.js®` and an npm package manager. 
+
+{@a nodejs}
+### Node.js
+
+Angular requires `Node.js` version 8.x or 10.x.
+
+* To check your version, run `node -v` in a terminal/console window.
+
+* To get `Node.js`, go to [nodejs.org](https://nodejs.org "Nodejs.org").
+
+{@a npm}
+### npm package manager
+
+Angular, the Angular CLI, and Angular apps depend on features and functionality provided by libraries that are available as [npm packages](https://docs.npmjs.com/getting-started/what-is-npm). To download and install npm packages, you must have an npm package manager. 
+
+This setup guide uses the [npm client](https://docs.npmjs.com/cli/install) command line interface, which is installed with `Node.js` by default. 
+
+To check that you have the npm client installed, run `npm -v` in a terminal/console window.
+
+
+{@a install-cli}
+
+## Step 1: Install the Angular CLI
+
+You use the Angular CLI 
+to create projects, generate application and library code, and perform a variety of ongoing development tasks such as testing, bundling, and deployment.
+
+Install the Angular CLI globally. 
+
+To install the CLI using `npm`, open a terminal/console window and enter the following command:
+
+
+<code-example language="sh" class="code-shell">
+  npm install -g @angular/cli
+
+</code-example>
+
+
+
+{@a create-proj}
+
+## Step 2: Create a workspace and initial application
+
+You develop apps in the context of an Angular [**workspace**](guide/glossary#workspace). 
+
+To create a new workspace and initial starter app: 
+
+1. Run the CLI command `ng new` and provide the name `my-app`, as shown here: 
+
+    <code-example language="sh" class="code-shell">
+      ng new my-app
+
+    </code-example>
+
+2. The `ng new` command prompts you for information about features to include in the initial app. Accept the defaults by pressing the Enter or Return key. 
+
+The Angular CLI installs the necessary Angular npm packages and other dependencies. This can take a few minutes. 
+
+The CLI creates a new workspace and a simple Welcome app, ready to run. 
+
+
+{@a serve}
+
+## Step 3: Run the application
+
+The Angular CLI includes a server, so that you can easily build and serve your app locally.
+
+1. Go to the workspace folder (`my-app`).
+
+1. Launch the server by using the CLI command `ng serve`, with the `--open` option.
+
+<code-example language="sh" class="code-shell">
+  cd my-app
+  ng serve --open
+</code-example>
+
+The `ng serve` command launches the server, watches your files,
+and rebuilds the app as you make changes to those files.
+
+The `--open` (or just `-o`) option automatically opens your browser
+to `http://localhost:4200/`.
+
+Your app greets you with a message:
+
+
+<figure>
+  <img src='generated/images/guide/setup-local/app-works.png' alt="Welcome to my-app!">
+</figure>
+
+
+## Next steps
+
+
+* If you are new to Angular, see the [Getting Started](start) tutorial. Getting Started helps you quickly learn the essentials of Angular, in the context of building a basic online store app. 
+
+  <div class="alert is-helpful">
+  
+  Getting Started assumes the [StackBlitz](https://stackblitz.com/) online development environment. 
+  To learn how to export an app from StackBlitz to your local environment, skip ahead to the [Deployment](start/deployment "Getting Started: Deployment") section. 
+
+  </div>
+
+
+* To learn more about using the Angular CLI, see the [CLI Overview](cli "CLI Overview"). In addition to creating the initial workspace and app scaffolding, you can use the CLI to generate Angular code such as components and services. The CLI supports the full development cycle, including building, testing, bundling, and deployment. 
+
+
+* For more information about the Angular files generated by `ng new`, see [Workspace and Project File Structure](guide/file-structure).
+

aio/content/guide/setup.md

@@ -1,20 +1,32 @@
-# Setup for local development
+# Setup for Upgrading from AngularJS
 
-{@a develop-locally}
+<!-- 
+Question: Can we remove this file and instead direct readers to https://github.com/angular/quickstart/blob/master/README.md
+-->
 
+<div class="alert is-critical">
+
+**Audience:** Use this guide **only** in the context of  [Upgrading from AngularJS](guide/upgrade "Upgrading from AngularJS to Angular") or [Upgrading for Performance](guide/upgrade-performance "Upgrading for Performance"). 
+Those Upgrade guides refer to this Setup guide for information about using the [deprecated QuickStart GitHub repository](https://github.com/angular/quickstart "Deprecated Angular QuickStart GitHub repository"), which was created prior to the current Angular [CLI](cli "CLI Overview"). 
+
+**For all other scenarios,** see the current instructions in [Local Environment Setup](guide/setup-local "Setting up for Local Development").
+
+
+</div>
+
+<!--
 The <live-example name=quickstart>QuickStart live-coding</live-example> example is an Angular _playground_.
-It's not where you'd develop a real application.
-You [should develop locally](guide/setup#why-locally "Why develop locally") on your own machine ... and that's also how we think you should learn Angular.
+There are also some differences from a local app, to simplify that live-coding experience.
+In particular, the QuickStart live-coding example shows just the AppComponent file; it creates the equivalent of app.module.ts and main.ts internally for the playground only.
+-->
 
-Setting up a new project on your machine is quick and easy with the **QuickStart seed**,
-maintained [on github](https://github.com/angular/quickstart "Install the github QuickStart repo").
+This guide describes how to develop locally on your own machine.
+Setting up a new project on your machine is quick and easy with the [QuickStart seed on github](https://github.com/angular/quickstart "Install the github QuickStart repo").
 
+**Prerequisite:** Make sure you have [Node.js® and npm installed](guide/setup-local#prerequisites "Angular prerequisites").
 
-Make sure you have [Node.js® and npm installed](guide/setup#install-prerequisites "What if you don't have Node.js and npm?").
 
 {@a clone}
-
-
 ## Clone
 
 Perform the _clone-to-launch_ steps with these terminal commands.
@@ -122,9 +134,8 @@ Open a terminal window in the project folder and enter the following commands fo
 
 
 
-The **QuickStart seed** contains the same application as the QuickStart playground.
-But its true purpose is to provide a solid foundation for _local_ development.
-Consequently, there are _many more files_ in the project folder on your machine,
+The **QuickStart seed** provides a basic QuickStart playground application and other files necessary for local development.
+Consequently, there are many files in the project folder on your machine,
 most of which you can [learn about later](guide/file-structure).
 
 
@@ -319,47 +330,17 @@ We recommend [nvm](https://github.com/creationix/nvm) for managing multiple vers
 You may need [nvm](https://github.com/creationix/nvm) if you already have projects running on your machine that use other versions of Node.js and npm.
 
 
-{@a why-locally}
 
+## Appendix: Develop locally with IE
 
+If you develop angular locally with `ng serve`, a `websocket` connection is set up automatically between browser and local dev server, so when your code changes, the browser can automatically refresh.
 
-## Appendix: Why develop locally
+In Windows, by default, one application can only have 6 websocket connections, <a href="https://msdn.microsoft.com/library/ee330736%28v=vs.85%29.aspx?f=255&MSPPError=-2147217396#websocket_maxconn" title="MSDN WebSocket settings">MSDN WebSocket Settings</a>.
+So when IE is refreshed (manually or automatically by `ng serve`), sometimes the websocket does not close properly. When websocket connections exceed the limitations, a `SecurityError` will be thrown. This error will not affect the angular application, you can just restart IE to clear this error, or modify the windows registry to update the limitations.
 
-<live-example title="QuickStart Seed in Stackblitz">Live coding</live-example> in the browser is a great way to explore Angular.
+## Appendix: Test using `fakeAsync()/async()`
 
-Links on almost every documentation page open completed samples in the browser.
-You can play with the sample code, share your changes with friends, and download and run the code on your own machine.
-
-The [Getting Started](guide/quickstart "Angular QuickStart Playground") shows just the `AppComponent` file.
-It creates the equivalent of `app.module.ts` and `main.ts` internally _for the playground only_.
-so the reader can discover Angular without distraction.
-The other samples are based on the QuickStart seed.
-
-As much fun as this is ...
-
-* you can't ship your app in Stackblitz
-* you aren't always online when writing code
-* transpiling TypeScript in the browser is slow
-* the type support, refactoring, and code completion only work in your local IDE
-
-Use the <live-example title="QuickStart Seed in Stackblitz">live coding</live-example> environment as a _playground_,
-a place to try the documentation samples and experiment on your own.
-It's the perfect place to reproduce a bug when you want to
-<a href="https://github.com/angular/angular/issues/new" title="File a documentation issue">file a documentation issue</a> or
-<a href="https://github.com/angular/angular/issues/new" title="File an Angular issue">file an issue with Angular itself</a>.
-
-For real development, we strongly recommend [developing locally](guide/setup#develop-locally).
-
-## Appendix: develop locally with IE
-
-If you develop angular locally with `ng serve`, there will be `websocket` connection being setup automatically between browser and local dev server, so when your code change, browser can automatically refresh.
-
-In windows, by default one application can only have 6 websocket connections, <a href="https://msdn.microsoft.com/library/ee330736%28v=vs.85%29.aspx?f=255&MSPPError=-2147217396#websocket_maxconn" title="MSDN WebSocket settings">MSDN WebSocket Settings</a>.
-So if IE was refreshed manunally or automatically by `ng serve`, sometimes, the websocket will not close properly, when websocket connections exceed limitations, `SecurityError` will be thrown, this error will not affect the angular application, you can just restart IE to clear this error, or modify the windows registry to update the limitations.
-
-## Appendix: test using `fakeAsync()/async()`
-
-If you use the `fakeAsync()/async()` helper function to run unit tests (for details, read [testing guide](guide/testing#async-test-with-fakeasync)), you need to import `zone.js/dist/zone-testing` in your test setup file.
+If you use the `fakeAsync()/async()` helper function to run unit tests (for details, read the [Testing guide](guide/testing#async-test-with-fakeasync)), you need to import `zone.js/dist/zone-testing` in your test setup file.
 
 <div class="alert is-important">
 If you create project with `Angular/CLI`, it is already imported in `src/test.ts`.

aio/content/guide/visual-studio-2015.md

@@ -4,15 +4,14 @@
 
 Some developers prefer Visual Studio as their Integrated Development Environment (IDE).
 
-This cookbook describes the steps required to set up and use the
-Angular [Getting Started](guide/quickstart) files in Visual Studio 2015 within an ASP.NET 4.x project.
+This cookbook describes the steps required to set up and use Angular app files in Visual Studio 2015 within an ASP.NET 4.x project.
 
 <div class="alert is-helpful">
 
 
 
 There is no *live example* for this cookbook because it describes Visual Studio, not 
-the Angular Getting Started application itself.
+the Angular application itself. It uses the starter Angular application created by the CLI command [`ng new`](cli/new) as an example. 
 
 
 </div>
@@ -48,7 +47,7 @@ Note that the resulting code does not map to the docs. Adjust accordingly.
 
 Install **[Node.js® and npm](https://nodejs.org/en/download/)**
 if they are not already on your machine.
-See [Getting Started](guide/quickstart) for supported versions and instructions. 
+See [Local Environment Setup](guide/setup-local "Setting up for Local Development") for supported versions and instructions. 
 
 
 
@@ -114,11 +113,13 @@ restart it to make sure everything is clean.
 
 
 <h2 id='download'>
-  Step 1: Download the Angular Getting Started app
+  Step 1: Create a starter Angular app
 </h2>
 
  
-Go to the final code review in [Getting Started](guide/quickstart) and download the solution app project. These files contain a starter Angular app.
+ Follow the instructions in [Local Environment Setup](guide/setup-local "Setting up for Local Development") to create a starter Angular app using the CLI command [`ng new`](cli/new). 
+
+ 
 
 
 
@@ -150,10 +151,10 @@ no authentication, and no hosting. Pick the template and options appropriate for
 
 
 <h2 id='copy'>
-  Step 3: Copy the Angular Getting Started project files into the ASP.NET project folder
+  Step 3: Copy the Angular project files into the ASP.NET project folder
 </h2>
 
-Copy the files you downloaded from [Getting Started](guide/quickstart) into the folder containing the `.csproj` file.
+Copy files from the starter Angular app into the folder containing the `.csproj` file.
 Include the files in the Visual Studio project as follows:
 
 * Click the `Show All Files` button in Solution Explorer to reveal all of the hidden files in the project.

aio/content/marketing/docs.md

@@ -1,50 +1,52 @@
-<h1 class="no-toc">What is Angular?</h1>
+<h1 class="no-toc">Introduction to the Angular Docs</h1>
+
+
+
+These Angular docs help you learn and use the Angular platform and framework, from your first app to optimizing complex enterprise apps. 
+Tutorials and guides include downloadable example to accelerate your projects. 
 
-Angular is a platform that makes it easy to build applications with the web. Angular combines declarative templates, dependency injection, end to end tooling, and integrated best practices to solve development challenges. Angular empowers developers to build applications that live on the web, mobile, or the desktop.
 
 <div class="card-container">
-  <a href="generated/live-examples/toh-pt1/stackblitz.html" target="_blank" class="docs-card"
-    title="Experience Angular in a live coding environment">
-      <section>Get a Glimpse of Angular</section>
-      <p>A quick look at an Angular "hello world" application.</p>
-      <p class="card-footer">Angular in Action</p>
+  <a href="start" class="docs-card" title="Angular Getting Started">
+      <section>Learn</section>
+      <p>Create your first Angular app, without any setup</p>
+      <p class="card-footer">Getting Started</p> 
   </a>
-
-  <a href="guide/quickstart" class="docs-card" title="Angular Getting Started">
-      <section>Get Going with Angular</section>
-      <p>Get going on your own environment with the Getting Started.</p>
-      <p class="card-footer">Quickstart</p>
+  <a href="guide/setup-local" class="docs-card"
+    title="Angular Local Environment Setup">
+      <section>Start Working</section>
+      <p>Set up your local environment with the Angular CLI</p>
+      <p class="card-footer">Local Setup</p>
   </a>
-
   <a href="guide/architecture" class="docs-card" title="Angular Architecture">
-      <section>Fundamentals</section>
-      <p>Learn Angular application fundamentals, starting with an architecture overview.</p>
+      <section>Explore</section>
+      <p>Learn more about Angular apps and framework features</p>
       <p class="card-footer">Architecture</p>
   </a>
 </div>
 
+
 ## Assumptions
-This documentation assumes that you are already familiar with
-[JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript "Learn JavaScript"),
-and some of the tools from the
-[latest standards](https://babeljs.io/learn-es2015/ "Latest JavaScript standards") such as
-[classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes "ES2015 Classes")
-and [modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import "ES2015 Modules").
+
+
+These docs assume that you are already familiar with HTML, CSS, [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript "Learn JavaScript"), 
+and some of the tools from the [latest standards](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Language_Resources "Latest JavaScript standards"), such as [classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes "ES2015 Classes") and [modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import "ES2015 Modules"). 
 The code samples are written using [TypeScript](https://www.typescriptlang.org/ "TypeScript"). 
-Most Angular code can be written with just the latest JavaScript,
-using [types](https://www.typescriptlang.org/docs/handbook/classes.html "TypeScript Types") for dependency injection,
-and using [decorators](https://www.typescriptlang.org/docs/handbook/decorators.html "Decorators") for metadata.
+Most Angular code can be written with just the latest JavaScript, using [types](https://www.typescriptlang.org/docs/handbook/classes.html "TypeScript Types") for dependency injection, and using [decorators](https://www.typescriptlang.org/docs/handbook/decorators.html "Decorators") for metadata.
+
 
 ## Feedback 
 
-You can sit with us!
+<h4>You can sit with us!</h4>
 
-You can file documentation
-[issues](https://github.com/angular/angular/issues "Angular Github issues") and create
+We want to hear from you. [Report problems or submit suggestions for future docs.](https://github.com/angular/angular/issues/new/choose "Angular GitHub repository new issue form")
+
+Contribute to Angular docs by creating
 [pull requests](https://github.com/angular/angular/pulls "Angular Github pull requests")
 on the Angular Github repository.
-The [contributing guide](https://github.com/angular/angular/blob/master/CONTRIBUTING.md "Contributing guide")
-will help you contribute to the community.
+See [Contributing to Angular](https://github.com/angular/angular/blob/master/CONTRIBUTING.md "Contributing guide")
+for information about submission guidelines.  
+
 Our community values respectful, supportive communication.
-Please consult and adhere to the
-[code of conduct](https://github.com/angular/code-of-conduct/blob/master/CODE_OF_CONDUCT.md "contributor code of conduct").
+Please consult and adhere to the [Code of Conduct](https://github.com/angular/code-of-conduct/blob/master/CODE_OF_CONDUCT.md "Contributor code of conduct").
+

aio/content/marketing/features.html

@@ -108,7 +108,7 @@
   </div>
 
   <div class="cta-bar announcement-bar">
-    <a class="button" href="guide/quickstart">Get Started</a>
+    <a class="button" href="start">Get Started</a>
   </div>
 
 </article>

aio/content/marketing/index.html

@@ -15,7 +15,7 @@
     <!-- CONTAINER -->
     <div class="homepage-container">
       <div class="hero-headline no-toc">One framework.<br>Mobile &amp; desktop.</div>
-      <a class="button hero-cta" href="guide/quickstart">Get Started</a>
+      <a class="button hero-cta" href="start">Get Started</a>
     </div>
 
   </section>
@@ -102,12 +102,12 @@
 
     <!-- CTA CARDS -->
     <div layout="row" layout-xs="column" class="home-row">
-      <a href="guide/quickstart">
+      <a href="start">
         <div class="card">
-          <img src="generated/images/marketing/home/code-icon.svg" height="70px" alt="Angular quickstart">
+          <img src="generated/images/marketing/home/code-icon.svg" height="70px" alt="Getting Started with Angular">
           <div class="card-text-container">
             <div class="text-headline">Get Started</div>
-            <p>Start building your Angular application.</p>
+            <p>Start building an Angular application.</p>
           </div>
         </div>
       </a>

aio/content/navigation.json

@@ -47,9 +47,9 @@
   "SideNav": [
     {
       "url": "docs",
-      "title": "Docs",
-      "tooltip": "Angular Documentation",
-      "hidden": true
+      "title": "Introduction",
+      "tooltip": "Introduction to the Angular documentation",
+      "hidden": false
     },
     {
       "url": "guide/docs-style-guide",
@@ -62,40 +62,44 @@
       "tooltip": "Learn the basics by building your first Angular application.",
       "children": [
         {
-          "url": "getting-started",
+          "url": "start",
           "title": "Your First App",
-          "tooltip": "Introduction to Angular's component model, template syntax, and component communication"
+          "tooltip": "Introduction to Angular's component model, template syntax, and component communication."
         },
         {
-          "url": "getting-started/routing",
+          "url": "start/routing",
           "title": "Routing",
-          "tooltip": "Introduction to routing between components using the browser's URL"
+          "tooltip": "Introduction to routing between components using the browser's URL."
         },
         {
-          "url": "getting-started/data",
+          "url": "start/data",
           "title": "Managing Data",
-          "tooltip": "Introduction to services, and accessing external data"
+          "tooltip": "Introduction to services and accessing external data via HTTP."
         },
         {
-          "url": "getting-started/forms",
+          "url": "start/forms",
           "title": "Forms",
-          "tooltip": "Learn about fetching and managing data from users with forms"
+          "tooltip": "Learn about fetching and managing data from users with forms."
         },
         {
-          "url": "getting-started/deployment",
+          "url": "start/deployment",
           "title": "Deployment",
-          "tooltip": "Share your application with the world by hosting it on Firebase or your own server"
+          "tooltip": "Move to local development, or deploy your application to Firebase or your own server."
         }
       ]
     },
     {
-      "url": "guide/quickstart",
-      "title": "Environment Quickstart",
-      "tooltip": "A brief introduction to local development with the Angular CLI."
+      "url": "guide/setup-local",
+      "title": "Setup",
+      "tooltip": "Setting up for local development with the Angular CLI."
     },
     {
-      "title": "Tutorial: Tour of Heroes",
-      "tooltip": "The Tour of Heroes tutorial takes you through the steps of creating an Angular application in TypeScript.",
+      "title": "Fundamentals",
+      "tooltip": "The fundamentals of Angular",
+      "children": [
+        {
+          "title": "Tour of Heroes App",
+          "tooltip": "The Tour of Heroes app is used as a reference point in many Angular examples.",
           "children": [
           {
             "url": "tutorial",
@@ -139,10 +143,6 @@
           }
           ]
         },
-    {
-      "title": "Fundamentals",
-      "tooltip": "The fundamentals of Angular",
-      "children": [
         {
           "title": "Architecture",
           "tooltip": "The basic building blocks of Angular applications.",
@@ -573,35 +573,15 @@
       ]
     },
     {
-      "title": "Setup & Deployment",
-      "tooltip": "Build, testing, and deployment environment, tool, and configuration information.",
+      "title": "Dev Workflow",
+      "tooltip": "Build, testing, and deployment information.",
       "children": [
         {
           "url": "guide/setup",
-          "title": "Setup for local development",
-          "tooltip": "Install the Angular QuickStart seed for faster, more efficient development on your machine.",
+          "title": "Upgrade setup",
+          "tooltip": "How to set up the Angular QuickStart seed in the context of upgrading from AngularJS.",
           "hidden": true
         },
-        {
-          "url": "guide/file-structure",
-          "title": "Project File Structure",
-          "tooltip": "How your Angular workspace looks on your filesystem."
-        },
-        {
-          "url": "guide/workspace-config",
-          "title": "Workspace Configuration",
-          "tooltip": "The \"angular.json\" file contains workspace and project configuration defaults for Angular CLI commands."
-        },
-        {
-          "url": "guide/npm-packages",
-          "title": "npm Dependencies",
-          "tooltip": "Description of npm packages required at development time and at runtime."
-        },
-        {
-          "url": "guide/typescript-configuration",
-          "title": "TypeScript Configuration",
-          "tooltip": "TypeScript configuration for Angular developers."
-        },
         {
           "url": "guide/aot-compiler",
           "title": "Ahead-of-Time Compilation",
@@ -627,11 +607,6 @@
           "title": "Deployment",
           "tooltip": "Learn how to deploy your Angular app."
         },
-        {
-          "url": "guide/browser-support",
-          "title": "Browser Support",
-          "tooltip": "Browser support and polyfills guide."
-        },
         {
           "title": "Dev Tool Integration",
           "tooltip": "Integrate with your development environment and tools.",
@@ -651,6 +626,37 @@
         }
       ]
     },
+    {
+      "title": "Configuration",
+      "tooltip": "Workspace and project structure, configuration files.",
+      "children": [
+        {
+          "url": "guide/file-structure",
+          "title": "Project File Structure",
+          "tooltip": "How your Angular workspace looks on your filesystem."
+        },
+        {
+          "url": "guide/workspace-config",
+          "title": "Workspace Configuration",
+          "tooltip": "The \"angular.json\" file contains workspace and project configuration defaults for Angular CLI commands."
+        },
+        {
+          "url": "guide/npm-packages",
+          "title": "npm Dependencies",
+          "tooltip": "Description of npm packages required at development time and at runtime."
+        },
+        {
+          "url": "guide/typescript-configuration",
+          "title": "TypeScript Configuration",
+          "tooltip": "TypeScript configuration for Angular developers."
+        },
+        {
+          "url": "guide/browser-support",
+          "title": "Browser Support",
+          "tooltip": "Browser support and polyfills guide."
+        }
+      ]
+    },
     {
       "title": "Release Information",
       "tooltip": "Angular release practices, updating, and upgrading.",

aio/content/start/data.md

@@ -1,6 +1,6 @@
 # Managing Data
 
-At the end of [Routing](getting-started/routing "Getting Started: Routing"), the online store application has a product catalog with two views: a product list and product details. 
+At the end of [Routing](start/routing "Getting Started: Routing"), the online store application has a product catalog with two views: a product list and product details. 
 Users can click on a product name from the list to see details in a new view, with a distinct URL (route). 
 
 In this section, you'll create the shopping cart. You'll:
@@ -25,7 +25,7 @@ You'll also set up a cart service to store information about products in the car
 
 <div class="alert is-helpful">
 
-Later, in the [Forms](getting-started/forms "Getting Started: Forms") part of this tutorial, this cart service also will be accessed from the page where the user checks out. 
+Later, in the [Forms](start/forms "Getting Started: Forms") part of this tutorial, this cart service also will be accessed from the page where the user checks out. 
 
 </div>
 
@@ -106,13 +106,13 @@ When the "Buy" button is clicked, you'll use the cart service to add the current
 1. To see the new "Buy" button, refresh the application and click on a product's name to display its details.
 
    <figure>
-     <img src='generated/images/guide/getting-started/product-details-buy.png' alt="Display details for selected product with a Buy button">
+     <img src='generated/images/guide/start/product-details-buy.png' alt="Display details for selected product with a Buy button">
    </figure>
  
  1. Click the "Buy" button. The product is added to the stored list of items in the cart, and a message is displayed. 
 
     <figure>
-      <img src='generated/images/guide/getting-started/buy-alert.png' alt="Display details for selected product with a Buy button">
+      <img src='generated/images/guide/start/buy-alert.png' alt="Display details for selected product with a Buy button">
     </figure>
 
 
@@ -151,7 +151,7 @@ We'll create the cart page in two steps:
     (Note: The "Checkout" button that we provided in the top-bar component was already configured with a `routerLink` for `/cart`.)
 
     <figure>
-      <img src='generated/images/guide/getting-started/cart-works.png' alt="Display cart page before customizing">
+      <img src='generated/images/guide/start/cart-works.png' alt="Display cart page before customizing">
     </figure>
 
 
@@ -205,7 +205,7 @@ Services can be used to share data across components:
     1. To add another product, click "My Store" to return to the product list. Repeat the steps above. 
 
     <figure>
-      <img src='generated/images/guide/getting-started/cart-page-full.png' alt="Cart page with products added">
+      <img src='generated/images/guide/start/cart-page-full.png' alt="Cart page with products added">
     </figure>
 
 
@@ -364,13 +364,13 @@ Now that your app can retrieve shipping data, you'll create a shipping component
     Click on the "Checkout" button to see the updated cart. (Remember that changing the app causes the preview to refresh, which empties the cart.)
 
     <figure>
-      <img src='generated/images/guide/getting-started/cart-empty-with-shipping-prices.png' alt="Cart with link to shipping prices">
+      <img src='generated/images/guide/start/cart-empty-with-shipping-prices.png' alt="Cart with link to shipping prices">
     </figure>
 
     Click on the link to navigate to the shipping prices.
 
     <figure>
-      <img src='generated/images/guide/getting-started/shipping-prices.png' alt="Display shipping prices">
+      <img src='generated/images/guide/start/shipping-prices.png' alt="Display shipping prices">
     </figure>
 
 
@@ -379,7 +379,7 @@ Now that your app can retrieve shipping data, you'll create a shipping component
 Congratulations! You have an online store application with a product catalog and shopping cart. You also have the ability to look up and display shipping prices. 
 
 To continue exploring Angular, choose either of the following options:
-* [Continue to the "Forms" section](getting-started/forms "Getting Started: Forms") to finish the app by adding the shopping cart page and a form-based checkout feature. You'll create a form to collect user information as part of checkout. 
-* [Skip ahead to the "Deployment" section](getting-started/deployment "Getting Started: Deployment") to deploy your app to Firebase or move to local development. 
+* [Continue to the "Forms" section](start/forms "Getting Started: Forms") to finish the app by adding the shopping cart page and a form-based checkout feature. You'll create a form to collect user information as part of checkout. 
+* [Skip ahead to the "Deployment" section](start/deployment "Getting Started: Deployment") to move to local development, or deploy your app to Firebase or your own server. 
 
 

aio/content/start/deployment.md

@@ -6,7 +6,7 @@ To deploy your application, you have to compile it, and then host the JavaScript
 <div class="alert is-helpful">
 
 
-Whether you came here directly from [Your First App](getting-started "Getting Started: Your First App"), or completed the entire online store application through the [Routing](getting-started/routing "Getting Started: Routing"), [Managing Data](getting-started/data "Getting Started: Managing Data"), and [Forms](getting-started/forms "Getting Started: Forms") sections, you have an application that you can deploy by following the instructions in this section. 
+Whether you came here directly from [Your First App](start "Getting Started: Your First App"), or completed the entire online store application through the [Routing](start/routing "Getting Started: Routing"), [Managing Data](start/data "Getting Started: Managing Data"), and [Forms](start/forms "Getting Started: Forms") sections, you have an application that you can deploy by following the instructions in this section. 
 
 
 </div>
@@ -76,7 +76,7 @@ Learn more about development and distribution of your application in the [Buildi
 
 ## Join our community
 
-You are now an Angular developer! [Share this moment](https://twitter.com/intent/tweet?url=https://next.angular.io/getting-started&text=I%20just%20finished%20the%20Angular%20Getting%20Started%20Tutorial "Angular on Twitter"), tell us what you thought of this Getting Started, or submit [suggestions for future editions](https://github.com/angular/angular/issues/new/choose "Angular GitHub repository new issue form"). 
+You are now an Angular developer! [Share this moment](https://twitter.com/intent/tweet?url=https://next.angular.io/start&text=I%20just%20finished%20the%20Angular%20Getting%20Started%20Tutorial "Angular on Twitter"), tell us what you thought of this Getting Started, or submit [suggestions for future editions](https://github.com/angular/angular/issues/new/choose "Angular GitHub repository new issue form"). 
 
 Angular offers many more capabilities, and you now have a foundation that empowers you to build an application and explore those other capabilities:
 

aio/content/start/forms.md

@@ -1,6 +1,6 @@
 # Forms
 
-At the end of [Managing Data](getting-started/data "Getting Started: Managing Data"), the online store application has a product catalog and a shopping cart.
+At the end of [Managing Data](start/data "Getting Started: Managing Data"), the online store application has a product catalog and a shopping cart.
 
 In this section, you'll finish the app by adding a form-based checkout feature. You'll create a form to collect user information as part of checkout. 
 
@@ -75,7 +75,7 @@ Next, you'll add a checkout form at the bottom of the "Cart" page.
 After putting a few items in the cart, users can now review their items, enter name and address, and submit their purchase: 
 
 <figure>
-  <img src='generated/images/guide/getting-started/cart-with-items-and-form.png' alt="Cart page with checkout form">
+  <img src='generated/images/guide/start/cart-with-items-and-form.png' alt="Cart page with checkout form">
 </figure>
 
 
@@ -83,5 +83,5 @@ After putting a few items in the cart, users can now review their items, enter n
 
 Congratulations! You have a complete online store application with a product catalog, a shopping cart, and a checkout function.
 
-[Continue to the "Deployment" section](getting-started/deployment "Getting Started: Deployment") to deploy your app to Firebase or move to local development. 
+[Continue to the "Deployment" section](start/deployment "Getting Started: Deployment") to move to local development, or deploy your app to Firebase or your own server.
 

aio/content/start/index.md

@@ -28,12 +28,9 @@ You'll find many resources to complement the Angular docs. Mozilla's MDN docs in
 StackBlitz creates a starter Angular app. 
 We've seeded this particular app with a top bar—containing the store name and checkout icon—and the title for a product list. 
 
-<!-- 
-<img src="generated/images/guide/getting-started/new-project.png" alt="New Angular project in StackBlitz">
--->
 
 <figure>
-    <img src="generated/images/guide/getting-started/new-app.png" alt="Starter online store app">
+    <img src="generated/images/guide/start/new-app.png" alt="Starter online store app">
 </figure>
 
 
@@ -83,7 +80,7 @@ In this section, you'll learn about template syntax by enhancing the "Products"
       The preview pane immediately updates to display the name of each product in the list. 
 
       <figure>
-        <img src="generated/images/guide/getting-started/template-syntax-product-names.png" alt="Product names added to list">
+        <img src="generated/images/guide/start/template-syntax-product-names.png" alt="Product names added to list">
       </figure>
 
 1. In the final app, each product name will be a link to product details. Add the anchor now, and set the anchor's title to be the product's name by using the property binding [ ] syntax, as shown below: 
@@ -98,7 +95,7 @@ In this section, you'll learn about template syntax by enhancing the "Products"
     In the preview pane, hover over the displayed product name to see the bound name property value. They are the same. Interpolation {{ }} lets you render the property value as text; property binding [ ] lets you use the property value in a template expression. 
 
     <figure>
-      <img src="generated/images/guide/getting-started/template-syntax-product-anchor.png" alt="Product name anchor text is product name property">
+      <img src="generated/images/guide/start/template-syntax-product-anchor.png" alt="Product name anchor text is product name property">
     </figure>
 
   
@@ -110,7 +107,7 @@ In this section, you'll learn about template syntax by enhancing the "Products"
     The app now displays the name and description of each product in the list, as shown below. Notice that the final product does not have a description paragraph at all. Because the product's description property is empty, the paragraph element&mdash;including the word "Description"&mdash;is not created.  
 
     <figure>
-      <img src="generated/images/guide/getting-started/template-syntax-product-description.png" alt="Product descriptions added to list">
+      <img src="generated/images/guide/start/template-syntax-product-description.png" alt="Product descriptions added to list">
     </figure>
 
 1. Add a button so users can share a product with friends. Bind the button's `click` event to the `share()` event that we defined for you (in `product-list.component.ts`). Event binding is done by using ( ) around the event, as shown below: 
@@ -121,13 +118,13 @@ In this section, you'll learn about template syntax by enhancing the "Products"
     Each product now has a "Share" button: 
 
     <figure>
-      <img src="generated/images/guide/getting-started/template-syntax-product-share-button.png" alt="Share button added for each product">
+      <img src="generated/images/guide/start/template-syntax-product-share-button.png" alt="Share button added for each product">
     </figure>
 
     Test the "Share" button: 
 
     <figure>
-      <img src="generated/images/guide/getting-started/template-syntax-product-share-alert.png" alt="Alert box indicating product has been shared">
+      <img src="generated/images/guide/start/template-syntax-product-share-alert.png" alt="Alert box indicating product has been shared">
     </figure>
 
 The app now has a product list and sharing feature. 
@@ -180,7 +177,7 @@ An Angular application is composed of a tree of components, in which each Angula
 Currently, our app has three components: 
 
 <figure>
-  <img src="generated/images/guide/getting-started/app-components.png" alt="Online store with three components">
+  <img src="generated/images/guide/start/app-components.png" alt="Online store with three components">
 </figure>
 
 * `app-root` (orange box) is the application shell. This is the first component to load, and the parent of all other components. You can think of it as the base page. 
@@ -210,7 +207,7 @@ We're going to create a new alert feature. The alert feature will take a product
     1. Right click on the `app` folder and use the `Angular Generator` to generate a new component named `product-alerts`.
 
         <figure>
-          <img src="generated/images/guide/getting-started/generate-component.png" alt="StackBlitz command to generate component">
+          <img src="generated/images/guide/start/generate-component.png" alt="StackBlitz command to generate component">
         </figure>
 
         The generator creates starter files for all three parts of the component: 
@@ -259,7 +256,7 @@ We're going to create a new alert feature. The alert feature will take a product
 The new product alert component takes a product as input from the product list. With that input, it shows or hides the "Notify Me" button, based on the price of the product. The Phone XL price is over $700, so the "Notify Me" button appears on that product. 
 
 <figure>
-  <img src="generated/images/guide/getting-started/product-alert-button.png" alt="Product alert button added to products over $700">
+  <img src="generated/images/guide/start/product-alert-button.png" alt="Product alert button added to products over $700">
 </figure>
 
 
@@ -302,7 +299,7 @@ The "Notify Me" button doesn't do anything yet. In this section, you'll set up t
 1. Try out the "Notify Me" button: 
 
     <figure>
-      <img src="generated/images/guide/getting-started/product-alert-notification.png" alt="Product alert notification confirmation dialog">
+      <img src="generated/images/guide/start/product-alert-notification.png" alt="Product alert notification confirmation dialog">
     </figure>
 
 
@@ -323,6 +320,6 @@ You've learned about the foundation of Angular: components and template syntax.
 You've also learned how the component class and template interact, and how components communicate with each other. 
 
 To continue exploring Angular, choose either of the following options:
-* [Continue to the "Routing" section](getting-started/routing "Getting Started: Routing") to create a product details page that can be accessed by clicking a product name and that has its own URL pattern. 
-* [Skip ahead to the "Deployment" section](getting-started/deployment "Getting Started: Deployment") to deploy your app to Firebase or move to local development. 
+* [Continue to the "Routing" section](start/routing "Getting Started: Routing") to create a product details page that can be accessed by clicking a product name and that has its own URL pattern. 
+* [Skip ahead to the "Deployment" section](start/deployment "Getting Started: Deployment") to move to local development, or deploy your app to Firebase or your own server.
 

aio/content/start/routing.md

@@ -1,6 +1,6 @@
 # Routing
 
-At the end of [Your First App](getting-started "Getting Started: Your First App"), the online store application has a basic product catalog. 
+At the end of [Your First App](start "Getting Started: Your First App"), the online store application has a basic product catalog. 
 The app doesn't have any variable states or navigation. 
 There is one URL, and that URL always displays the "My Store" page with a list of products and their descriptions. 
 
@@ -55,7 +55,7 @@ The app is already set up to use the Angular router and to use routing to naviga
     Notice that the URL in the preview window changes. The final segment is `products/1`.
 
     <figure>
-      <img src="generated/images/guide/getting-started/product-details-works.png" alt="Product details page with updated URL">
+      <img src="generated/images/guide/start/product-details-works.png" alt="Product details page with updated URL">
     </figure>
 
     
@@ -101,7 +101,7 @@ The product details component handles the display of each product. The Angular R
 Now, when the user clicks on a name in the product list, the router navigates you to the distinct URL for the product, swaps out the product list component for the product details component, and displays the product details. 
 
   <figure>
-    <img src="generated/images/guide/getting-started/product-details-routed.png" alt="Product details page with updated URL and full details displayed">
+    <img src="generated/images/guide/start/product-details-routed.png" alt="Product details page with updated URL and full details displayed">
   </figure>
 
 
@@ -121,6 +121,6 @@ Congratulations! You have integrated routing into your online store.
 * Users can click on a product name from the list to see details in a new view, with a distinct URL (route)
 
 To continue exploring Angular, choose either of the following options:
-* [Continue to the "Managing Data" section](getting-started/data "Getting Started: Managing Data") to add the shopping cart feature, using a service to manage the cart data and using HTTP to retrieve external data for shipping prices. 
-* [Skip ahead to the Deployment section](getting-started/deployment "Getting Started: Deployment") to deploy your app to Firebase or move to local development. 
+* [Continue to the "Managing Data" section](start/data "Getting Started: Managing Data") to add the shopping cart feature, using a service to manage the cart data and using HTTP to retrieve external data for shipping prices. 
+* [Skip ahead to the Deployment section](start/deployment "Getting Started: Deployment") to deploy your app to Firebase or move to local development. 
 

aio/content/tutorial/index.md

@@ -1,19 +1,20 @@
-<h1 class="no-toc">Tutorial: Tour of Heroes</h1>
+<h1 class="no-toc">Tour of Heroes App and Tutorial</h1>
 
-This _Tour of Heroes_ tutorial provides a deep dive into the fundamentals of Angular. 
-It shows you how to set up your local development environment and develop an app using the [Angular CLI tool](cli "CLI command reference"). 
 
 <div class="callout is-helpful">
-<header>Getting Started - Stackblitz</header>
+<header>Getting Started Tutorial</header>
 
 
-We recently introduced a [**new Getting Started**](getting-started) that leverages the [StackBlitz](https://stackblitz.com/) online development environment. 
-We recommend the new Getting Started for anyone who wants to quickly learn the essentials of Angular, in the context of building an online store app. 
-The new Getting Started covers the same major topics as this Tour of Heroes&mdash;components, template syntax, routing, services, and accessing data via HTTP&mdash;in a condensed format.
+If you're new to Angular, see the [**Getting Started tutorial.**](start) 
+The Getting Started tutorial covers the same major topics as this Tour of Heroes&mdash;components, template syntax, routing, services, and accessing data via HTTP&mdash;in a condensed format, following the most current best practices. 
 
+**This Tour of Heroes tutorial** is the conceptual basis for many examples in this documentation set. Reading this introduction page provides sufficient context for working with those examples. You do not need to do this tutorial to understand those other examples. The Tour of Heroes tutorial is maintained here for context and continuity. 
 
 </div> 
 
+This _Tour of Heroes_ tutorial provides an introduction to the fundamentals of Angular. 
+It shows you how to set up your local development environment and develop an app using the [Angular CLI tool](cli "CLI command reference"). 
+
 In this _Tour of Heroes_ tutorial, you will build an app that helps a staffing agency manage its stable of heroes.
 
 This app has many of the features you'd expect to find in a data-driven application.
@@ -34,8 +35,14 @@ By the end of this tutorial you will be able to do the following:
 You'll learn enough Angular to get started and gain confidence that
 Angular can do whatever you need it to do. 
 
+<div class="callout is-helpful">
+<header>Solution</header>
+
 After completing all tutorial steps, the final app will look like this: <live-example name="toh-pt6"></live-example>.
 
+</div>
+
+
 
 ## What you'll build
 

aio/content/tutorial/toh-pt0.md

@@ -12,15 +12,7 @@ In this part of the tutorial, you'll do the following:
 
 ## Set up your environment
 
-To set up your development environment, follow these instructions in [Getting Started](guide/quickstart):
-
-* [Prerequisites](guide/quickstart#prerequisites)
-* [Install the Angular CLI](guide/quickstart#install-cli)
-
-<div class="alert is-helpful">
-
-**Note:** You do not need to complete the entire Getting Started. After you complete the above two sections of Getting Started, your environment is set up. Continue below to create the Tour of Heroes workspace and an initial app project.
-</div>
+To set up your development environment, follow the instructions in [Local Environment Setup](guide/setup-local "Setting up for Local Development").
 
 
 ## Create a new workspace and an initial application

aio/firebase.json

@@ -16,18 +16,21 @@
       {"type": 301, "source": "/api/api/:rest*", "destination": "/api/:rest*"},
 
       // Guide renames/removals
-      {"type": 301, "source": "/docs/*/latest/cli-quickstart.html", "destination": "/guide/quickstart"},
+      {"type": 301, "source": "/docs/*/latest/cli-quickstart.html", "destination": "/start"},
       {"type": 301, "source": "/docs/*/latest/glossary.html", "destination": "/guide/glossary"},
-      {"type": 301, "source": "/docs/*/latest/quickstart.html", "destination": "/guide/quickstart"},
+      {"type": 301, "source": "/docs/*/latest/quickstart.html", "destination": "/start"},
       {"type": 301, "source": "/docs/*/latest/guide/server-communication.html", "destination": "/guide/http"},
       {"type": 301, "source": "/docs/*/latest/guide/style-guide.html", "destination": "/guide/styleguide"},
-      {"type": 301, "source": "/guide/cli-quickstart", "destination": "/guide/quickstart"},
+      {"type": 301, "source": "/guide/cli-quickstart", "destination": "/start"},
       {"type": 301, "source": "/guide/service-worker-getstart", "destination": "/guide/service-worker-getting-started"},
       {"type": 301, "source": "/guide/service-worker-comm", "destination": "/guide/service-worker-communications"},
       {"type": 301, "source": "/guide/service-worker-configref", "destination": "/guide/service-worker-config"},
       {"type": 301, "source": "/guide/webpack", "destination": "https://v5.angular.io/guide/webpack"},
       {"type": 301, "source": "/guide/setup-systemjs-anatomy", "destination": "/guide/file-structure"},
       {"type": 301, "source": "/guide/change-log", "destination": "https://github.com/angular/angular/blob/master/CHANGELOG.md"},
+      {"type": 301, "source": "/guide/quickstart", "destination": "/start"},
+      {"type": 301, "source": "/getting-started", "destination": "/start"},
+      {"type": 301, "source": "/getting-started/:rest*", "destination": "/start/:rest*"},
 
       // some top level guide pages on old site were moved below the guide folder
       {"type": 301, "source": "/styleguide", "destination": "/guide/styleguide"},
@@ -108,7 +111,7 @@
       {"type": 301, "source": "/docs/styleguide*", "destination": "/guide/styleguide"},
       {"type": 301, "source": "/guide/metadata", "destination": "/guide/aot-compiler"},
       {"type": 301, "source": "/guide/ngmodule", "destination": "/guide/ngmodules"},
-      {"type": 301, "source": "/guide/learning-angular*", "destination": "/guide/quickstart"},
+      {"type": 301, "source": "/guide/learning-angular*", "destination": "/start"},
       {"type": 301, "source": "/testing", "destination": "/guide/testing"},
       {"type": 301, "source": "/testing/**", "destination": "/guide/testing"},
 

aio/ngsw-config.json

@@ -95,6 +95,9 @@
     "!/docs/?*",
     "!/docs/*/**",
     "!/guide/change-log",
+    "!/getting-started",
+    "!/getting-started.html",
+    "!/getting-started/**",
     "!/guide/cli-quickstart",
     "!/guide/cli-quickstart.html",
     "!/guide/cli-quickstart/",
@@ -121,6 +124,8 @@
     "!/guide/webpack/",
     "!/guide/setup-systemjs-anatomy",
     "!/guide/setup-systemjs-anatomy.html",
+    "!/guide/quickstart",
+    "!/guide/quickstart.html",
     "!/news",
     "!/news.html",
     "!/news/",

aio/tests/deployment/e2e/smoke-tests.e2e-spec.ts

@@ -25,7 +25,7 @@ describe(browser.baseUrl, () => {
     describe('(marketing pages)', () => {
       const textPerUrl: { [key: string]: string } = {
         features: 'features & benefits',
-        docs: 'what is angular?',
+        docs: 'introduction to the angular docs',
         events: 'events',
         resources: 'explore angular resources',
       };
@@ -45,9 +45,9 @@ describe(browser.baseUrl, () => {
         api: 'api list',
         'guide/architecture': 'architecture',
         'guide/http': 'httpclient',
-        'guide/quickstart': 'getting started',
         'guide/security': 'security',
         tutorial: 'tutorial',
+        start: 'getting started',
       };
 
       Object.keys(textPerUrl).forEach(url => {

aio/tests/deployment/shared/URLS_TO_REDIRECT.txt

@@ -171,10 +171,16 @@
 /docs/ts/latest/api/platform-browser-dynamic/index/workerAppDynamicPlatform-let.html	/api/platform-browser-dynamic/workerAppDynamicPlatform
 /docs/ts/latest/api/testing/fakeAsync-function.html	/api/core/testing/fakeAsync
 /docs/ts/latest/cookbook/ts-to-js.html	https://v2.angular.io/docs/ts/latest/cookbook/ts-to-js.html
-/guide/cli-quickstart	/guide/quickstart
-/guide/learning-angular	/guide/quickstart
-/guide/learning-angular.html	/guide/quickstart
+/getting-started	/start
+/getting-started/routing	/start/routing
+/getting-started/data	/start/data
+/getting-started/forms	/start/forms
+/getting-started/deployment	/start/deployment
+/guide/cli-quickstart	/start
+/guide/learning-angular	/start
+/guide/learning-angular.html	/start
 /guide/metadata	/guide/aot-compiler
+/guide/quickstart	/start
 /guide/service-worker-getstart	/guide/service-worker-getting-started
 /guide/service-worker-comm	/guide/service-worker-communications
 /guide/service-worker-configref	/guide/service-worker-config

aio/tests/e2e/src/app.e2e-spec.ts

@@ -75,7 +75,7 @@ describe('site App', function() {
   it('should show the tutorial index page at `/tutorial` after jitterbugging through features', () => {
     // check that we can navigate directly to the tutorial page
     page.navigateTo('tutorial');
-    expect(page.getDocViewerText()).toMatch(/Tutorial: Tour of Heroes/i);
+    expect(page.getDocViewerText()).toMatch(/Tour of Heroes App and Tutorial/i);
 
     // navigate to a different page
     page.click(page.getTopMenuLink('features'));
@@ -86,8 +86,8 @@ describe('site App', function() {
 
     // Tutorial folder should still be expanded because this test runs in wide mode
     // Navigate to the tutorial introduction via a link in the sidenav
-    page.click(page.getNavItem(/introduction/i));
-    expect(page.getDocViewerText()).toMatch(/Tutorial: Tour of Heroes/i);
+    page.click(page.getNavItem(/The Hero Editor/i));
+    expect(page.getDocViewerText()).toMatch(/The Hero Editor/i);
   });
 
   it('should render `{@example}` dgeni tags as `<code-example>` elements with HTML escaped content', () => {

aio/tools/transforms/angular-content-package/index.js

@@ -43,7 +43,7 @@ module.exports = new Package('angular-content', [basePackage, contentPackage])
     readFilesProcessor.sourceFiles = readFilesProcessor.sourceFiles.concat([
       {
         basePath: CONTENTS_PATH,
-        include: CONTENTS_PATH + '/{getting-started,guide,tutorial}/**/*.md',
+        include: CONTENTS_PATH + '/{start,guide,tutorial}/**/*.md',
         fileReader: 'contentFileReader'
       },
       {

aio/tools/transforms/authors-package/getting-started-package.js

@@ -16,7 +16,7 @@ const { CONTENTS_PATH } = require('../config');
 
 function createPackage(tutorialName) {
 
-  const tutorialFilePath = `${CONTENTS_PATH}/getting-started/${tutorialName}.md`;
+  const tutorialFilePath = `${CONTENTS_PATH}/start/${tutorialName}.md`;
   const tutorialFile = readFileSync(tutorialFilePath, 'utf8');
   const examples = [];
   tutorialFile.replace(/<code-(?:pane|example) [^>]*path="([^"]+)"/g, (_, path) => examples.push('examples/' + path));

aio/tools/transforms/authors-package/index.js

@@ -22,7 +22,7 @@ function createPackage(changedFile) {
     return require('./tutorial-package').createPackage(tutorialName);
   }
 
-  const gettingStartedMatch = /^aio\/content\/getting-started\/([^.]+)\.md/.exec(changedFile);
+  const gettingStartedMatch = /^aio\/content\/start\/([^.]+)\.md/.exec(changedFile);
   const gettingStartedExampleMatch = /^aio\/content\/examples\/getting-started\/([^\/]+)\//.exec(changedFile);
   if (gettingStartedMatch || gettingStartedExampleMatch) {
     const gettingStartedName = gettingStartedMatch && gettingStartedMatch[1] || 'index';