Setup for local developmentlink

The QuickStart live-codingQuickStart live-coding / download example example is an Angular playground. It's not where you'd develop a real application. You should develop locally on your own machine ... and that's also how we think you should learn Angular.

Setting up a new project on your machine is quick and easy with the QuickStart seed, maintained on github.

Make sure you have Node.js® and npm installed.

Clonelink

Perform the clone-to-launch steps with these terminal commands.

      
        content_copy
      
      git clone https://github.com/angular/quickstart.git quickstart
cd quickstart
npm install
npm start
    

Downloadlink

Download the QuickStart seed and unzip it into your project folder. Then perform the remaining steps with these terminal commands.

      
        content_copy
      
      cd quickstart
npm install
npm start
    

Delete non-essential files (optional)link

You can quickly delete the non-essential files that concern testing and QuickStart repository maintenance (including all git-related artifacts such as the .git folder and .gitignore!).

Open a terminal window in the project folder and enter the following commands for your environment:

OS/X (bash)link

      
        content_copy
      
      xargs rm -rf < non-essential-files.osx.txt
rm src/app/*.spec*.ts
rm non-essential-files.osx.txt
    

Windowslink

      
        content_copy
      
      for /f %i in (non-essential-files.txt) do del %i /F /S /Q
rd .git /s /q
rd e2e /s /q
    

What's in the QuickStart seed?link

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, most of which you can learn about later.

Focus on the following three TypeScript (.ts) files in the /src folder.

      
        content_copy
      
      import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>`
})
export class AppComponent { name = 'Angular'; }
    

All guides and cookbooks have at least these core files. Each file has a distinct purpose and evolves independently as the application grows.

Files outside src/ concern building, deploying, and testing your app. They include configuration files and external dependencies.

Files inside src/ "belong" to your app. Add new Typescript, HTML and CSS files inside the src/ directory, most of them inside src/app, unless told to do otherwise.

The following are all in src/

Appendix: Node.js and npmlink

Node.js and the npm package manager are essential to modern web development with Angular and other platforms. Node.js powers client development and build tools. The npm package manager, which is itself a Node.js application, installs JavaScript libraries.

Verify that you are running Node.js v8.x or higher and npm 5.x or higher by running the commands node -v and npm -v in a terminal/console window. Older versions produce errors.

We recommend nvm for managing multiple versions of Node.js and npm. You may need nvm if you already have projects running on your machine that use other versions of Node.js and npm.

Appendix: Why develop locallylink

Live codingLive coding / download example in the browser is a great way to explore Angular.

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 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 codinglive coding / download 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 file a documentation issue or file an issue with Angular itself.

For real development, we strongly recommend developing locally.

Appendix: develop locally with IElink

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, MSDN WebSocket Settings. 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()link

If you use the fakeAsync()/async() helper function to run unit tests (for details, read testing guide), you need to import zone.js/dist/zone-testing in your test setup file.

And in the earlier versions of Angular, the following files were imported or added in your html file:

      
        content_copy
      
      import 'zone.js/dist/long-stack-trace-zone';
import 'zone.js/dist/proxy';
import 'zone.js/dist/sync-test';
import 'zone.js/dist/jasmine-patch';
import 'zone.js/dist/async-test';
import 'zone.js/dist/fake-async-test';
    

You can still load those files separately, but the order is important, you must import proxy before sync-test, async-test, fake-async-test and jasmine-patch. And you also need to import sync-test before jasmine-patch, so it is recommended to just import zone-testing instead of loading those separated files.