Project My Project Setting up the local environment and workspace This guide explains how to set up your environment for Angular development using the Angular CLI tool. It includes information about prerequisites, installing the CLI, creating an initial workspace and starter app, and running that app locally to verify your setup. TRY ANGULAR WITHOUT LOCAL SETUP If you are new to Angular, you might want to start with Try it now!, 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 StackBlitz environment for online development. You don't need to set up your local environment until you're ready. Prerequisites To use the Angular framework, you should be familiar with the following: JavaScript HTML CSS Knowledge of TypeScript is helpful, but not required. To install Angular on your local system, you need the following: Node.js Angular requires a current, active LTS, or maintenance LTS version of Node.js. For information about specific version requirements, see the engines key in the package.json file. For more information on installing Node.js, see nodejs.org. If you are unsure what version of Node.js runs on your system, run node -v in a terminal window. npm package manager Angular, the Angular CLI, and Angular applications depend on npm packages for many features and functions. To download and install npm packages, you need an npm package manager. This guide uses the npm client 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 window. 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. To install the Angular CLI, open a terminal window and run the following command: content_copy npm install -g @angular/cli Create a workspace and initial application You develop apps in the context of an Angular workspace. To create a new workspace and initial starter app: Run the CLI command ng new and provide the name my-app, as shown here: content_copy ng new my-app 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. You also have the option to use Angular's strict mode, which can help you write better, more maintainable code. For more information, see Strict mode. Run the application The Angular CLI includes a server, so that you can build and serve your app locally. Navigate to the workspace folder, such as my-app. Run the following command: content_copy cd my-app ng serve --open 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/. If your installation and setup was successful, you should see a page similar to the following. Welcome to my-app! Next steps For a more thorough introduction to the fundamental concepts and terminology of Angular single-page app architecture and design principles, read the Angular Concepts section. Work through the Tour of Heroes Tutorial, a complete hands-on exercise that introduces you to the app development process using the Angular CLI and walks through important subsystems. To learn more about using the Angular CLI, see the 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. ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------DEPLOYING AN APPLICATION Deploying your application is the process of compiling, or building, your code and hosting the JavaScript, CSS, and HTML on a web server. This section builds on the previous steps in the Getting Started tutorial and shows you how to deploy your application. Prerequisites A best practice is to run your project locally before you deploy it. To run your project locally, you need the following installed on your computer: Node.js. The Angular CLI. From the terminal, install the Angular CLI globally with: content_copy npm install -g @angular/cli With the Angular CLI, you can use the command ng to create new workspaces, new projects, serve your application during development, or produce builds to share or distribute. Running your application locally Download the source code from your StackBlitz project by clicking the Download Project icon in the left menu, across from Project, to download your files. Create a new Angular CLI workspace using the ng new command, where my-project-name is what you would like to call your project: content_copy ng new my-project-name This command displays a series of configuration prompts. For this tutorial, accept the default settings for each prompt. In your newly CLI-generated application, replace the /src folder with the /src folder from your StackBlitz download. Use the following CLI command to run your application locally: content_copy ng serve To see your application in the browser, go to http://localhost:4200/. If the default port 4200 is not available, you can specify another port with the port flag as in the following example: content_copy ng serve --port 4201 While serving your application, you can edit your code and see the changes update automatically in the browser. To stop the ng serve command, press Ctrl+c. Building and hosting your application To build your application for production, use the build command with the prod flag. content_copy ng build --prod This command creates a dist folder in the application root directory with all the files that a hosting service needs for serving your application. If the above ng build command throws an error about missing packages, append the missing dependencies in your local project's package.json file to match the one in the downloaded StackBlitz project. Copy the contents of the dist/my-project-name folder to your web server. Because these files are static, you can host them on any web server capable of serving files; such as Node.js, Java, .NET, or any backend such as Firebase, Google Cloud, or App Engine. For more information, see Building & Serving and Deployment. What's next In this tutorial, you've laid the foundation to explore the Angular world in areas such as mobile development, UX/UI development, and server-side rendering. You can go deeper by studying more of Angular's features, engaging with the vibrant community, and exploring the robust ecosystem. Learning more Angular For a more in-depth tutorial that leads you through building an application locally and exploring many of Angular's most popular features, see Tour of Heroes. To explore Angular's foundational concepts, see the guides in the Understanding Angular section such as Angular Components Overview or Template syntax. Joining the community Tweet that you've completed this tutorial, tell us what you think, or submit suggestions for future editions. Keep current by following the Angular blog. Exploring the Angular ecosystem To support your UX/UI development, see Angular Material. To test your Angular applications, see Angular Protractor. The Angular community also has an extensive network of third-party tools and libraries.