{
  "id": "guide/setup-local",
  "title": "Setting up the local environment and workspace",
  "contents": "\n\n\n<div class=\"github-links\">\n  <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/setup-local.md?message=docs%3A%20describe%20your%20change...\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n</div>\n\n\n<div class=\"content\">\n  <h1 id=\"setting-up-the-local-environment-and-workspace\">Setting up the local environment and workspace<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/setup-local#setting-up-the-local-environment-and-workspace\"><i class=\"material-icons\">link</i></a></h1>\n<p>This guide explains how to set up your environment for Angular development using the <a href=\"cli\" title=\"CLI command reference\">Angular CLI tool</a>.\nIt includes information about prerequisites, installing the CLI, creating an initial workspace and starter app, and running that app locally to verify your setup.</p>\n<div class=\"callout is-helpful\">\n<header>Try Angular without local setup</header>\n<p>If you are new to Angular, you might want to start with <a href=\"start\">Try it now!</a>, which introduces the essentials of Angular in the context of a ready-made basic online store app that you can examine and modify. This standalone tutorial takes advantage of the interactive <a href=\"https://stackblitz.com/\">StackBlitz</a> environment for online development. You don't need to set up your local environment until you're ready.</p>\n</div>\n<a id=\"devenv\"></a>\n<a id=\"prerequisites\"></a>\n<h2 id=\"prerequisites\">Prerequisites<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/setup-local#prerequisites\"><i class=\"material-icons\">link</i></a></h2>\n<p>To use the Angular framework, you should be familiar with the following:</p>\n<ul>\n<li><a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript\">JavaScript</a></li>\n<li><a href=\"https://developer.mozilla.org/docs/Learn/HTML/Introduction_to_HTML\">HTML</a></li>\n<li><a href=\"https://developer.mozilla.org/docs/Learn/CSS/First_steps\">CSS</a></li>\n</ul>\n<p>Knowledge of <a href=\"https://www.typescriptlang.org/\">TypeScript</a> is helpful, but not required.</p>\n<p>To install Angular on your local system, you need the following:</p>\n<a id=\"nodejs\"></a>\n<ul>\n<li>\n<p><strong>Node.js</strong></p>\n<p>Angular requires a <a href=\"https://nodejs.org/about/releases\">current, active LTS, or maintenance LTS</a> version of Node.js.</p>\n<div class=\"alert is-helpful\">\n<p>For information about specific version requirements, see the <code>engines</code> key in the <a href=\"https://unpkg.com/@angular/cli/package.json\">package.json</a> file.</p>\n</div>\n<p>For more information on installing Node.js, see <a href=\"https://nodejs.org\" title=\"Nodejs.org\">nodejs.org</a>.\nIf you are unsure what version of Node.js runs on your system, run <code>node -v</code> in a terminal window.</p>\n</li>\n</ul>\n<a id=\"npm\"></a>\n<ul>\n<li>\n<p><strong>npm package manager</strong></p>\n<p>Angular, the Angular CLI, and Angular applications depend on <a href=\"https://docs.npmjs.com/getting-started/what-is-npm\">npm packages</a> for many features and functions.\nTo download and install npm packages, you need an npm package manager.\nThis guide uses the <a href=\"https://docs.npmjs.com/cli/install\">npm client</a> command line interface, which is installed with <code>Node.js</code> by default.\nTo check that you have the npm client installed, run <code>npm -v</code> in a terminal window.</p>\n</li>\n</ul>\n<a id=\"install-cli\"></a>\n<h2 id=\"install-the-angular-cli\">Install the Angular CLI<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/setup-local#install-the-angular-cli\"><i class=\"material-icons\">link</i></a></h2>\n<p>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.</p>\n<p>To install the Angular CLI, open a terminal window and run the following command:</p>\n<code-example language=\"sh\" class=\"code-shell\">\n  npm install -g @angular/cli\n</code-example>\n<a id=\"create-proj\"></a>\n<h2 id=\"create-a-workspace-and-initial-application\">Create a workspace and initial application<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/setup-local#create-a-workspace-and-initial-application\"><i class=\"material-icons\">link</i></a></h2>\n<p>You develop apps in the context of an Angular <a href=\"guide/glossary#workspace\"><strong>workspace</strong></a>.</p>\n<p>To create a new workspace and initial starter app:</p>\n<ol>\n<li>\n<p>Run the CLI command <code>ng new</code> and provide the name <code>my-app</code>, as shown here:</p>\n<code-example language=\"sh\" class=\"code-shell\">\n  ng new my-app\n\n</code-example>\n</li>\n<li>\n<p>The <code>ng new</code> command prompts you for information about features to include in the initial app. Accept the defaults by pressing the Enter or Return key.</p>\n</li>\n</ol>\n<p>The Angular CLI installs the necessary Angular npm packages and other dependencies. This can take a few minutes.</p>\n<p>The CLI creates a new workspace and a simple Welcome app, ready to run.</p>\n<div class=\"alert is-helpful\">\n<p>You also have the option to use Angular's strict mode, which can help you write better, more maintainable code.\nFor more information, see <a href=\"/guide/strict-mode\">Strict mode</a>.</p>\n</div>\n<a id=\"serve\"></a>\n<h2 id=\"run-the-application\">Run the application<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/setup-local#run-the-application\"><i class=\"material-icons\">link</i></a></h2>\n<p>The Angular CLI includes a server, so that you can build and serve your app locally.</p>\n<ol>\n<li>\n<p>Navigate to the workspace folder, such as <code>my-app</code>.</p>\n</li>\n<li>\n<p>Run the following command:</p>\n</li>\n</ol>\n<code-example language=\"sh\" class=\"code-shell\">\n  cd my-app\n  ng serve --open\n</code-example>\n<p>The <code>ng serve</code> command launches the server, watches your files,\nand rebuilds the app as you make changes to those files.</p>\n<p>The <code>--open</code> (or just <code>-o</code>) option automatically opens your browser\nto <code>http://localhost:4200/</code>.</p>\n<p>If your installation and setup was successful, you should see a page similar to the following.</p>\n<div class=\"lightbox\">\n  <img src=\"generated/images/guide/setup-local/app-works.png\" alt=\"Welcome to my-app!\" width=\"794\" height=\"899\">\n</div>\n<h2 id=\"next-steps\">Next steps<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/setup-local#next-steps\"><i class=\"material-icons\">link</i></a></h2>\n<ul>\n<li>\n<p>For a more thorough introduction to the fundamental concepts and terminology of Angular single-page app architecture and design principles, read the <a href=\"guide/architecture\">Angular Concepts</a> section.</p>\n</li>\n<li>\n<p>Work through the <a href=\"tutorial\">Tour of Heroes Tutorial</a>, a complete hands-on exercise that introduces you to the app development process using the Angular CLI and walks through important subsystems.</p>\n</li>\n<li>\n<p>To learn more about using the Angular CLI, see the <a href=\"cli\" title=\"CLI Overview\">CLI Overview</a>. 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.</p>\n</li>\n<li>\n<p>For more information about the Angular files generated by <code>ng new</code>, see <a href=\"guide/file-structure\">Workspace and Project File Structure</a>.</p>\n</li>\n</ul>\n\n  \n</div>\n\n<!-- links to this doc:\n - docs\n - guide/component-overview\n - guide/glossary\n - guide/npm-packages\n - guide/upgrade-setup\n - guide/visual-studio-2015\n - start\n - tutorial/toh-pt0\n-->\n<!-- links from this doc:\n - /guide/strict-mode\n - cli\n - guide/architecture\n - guide/file-structure\n - guide/glossary#workspace\n - guide/setup-local#create-a-workspace-and-initial-application\n - guide/setup-local#install-the-angular-cli\n - guide/setup-local#next-steps\n - guide/setup-local#prerequisites\n - guide/setup-local#run-the-application\n - guide/setup-local#setting-up-the-local-environment-and-workspace\n - start\n - tutorial\n - https://developer.mozilla.org/docs/Learn/CSS/First_steps\n - https://developer.mozilla.org/docs/Learn/HTML/Introduction_to_HTML\n - https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript\n - https://docs.npmjs.com/cli/install\n - https://docs.npmjs.com/getting-started/what-is-npm\n - https://github.com/angular/angular/edit/master/aio/content/guide/setup-local.md?message=docs%3A%20describe%20your%20change...\n - https://nodejs.org\n - https://nodejs.org/about/releases\n - https://stackblitz.com/\n - https://unpkg.com/@angular/cli/package.json\n - https://www.typescriptlang.org/\n-->"
}