Skip to content

tutorial-create-angular-app.md

Latest commit

 

History

History
76 lines (48 loc) · 3 KB

tutorial-create-angular-app.md

File metadata and controls

76 lines (48 loc) · 3 KB
title Create an Angular project in Visual Studio
description Create, build, and run a simple Angular front-end web application project from a Visual Studio template, and set basic properties for the project.
ms.date 12/4/2024
ms.custom vs-acquisition
ms.topic tutorial
ms.devlang javascript
author mikejo5000
ms.author mikejo
manager mijacobs
ms.subservice javascript-typescript
dev_langs
JavaScript
monikerRange >= vs-2022

Create an Angular project

In this 5-10 minute introduction to the Visual Studio integrated development environment (IDE), you create and run a simple Angular frontend web application.

Prerequisites

Make sure to install the following software:

Create your app

  1. In the Start window (choose File > Start Window to open), select Create a new project.

    :::image type="content" source="media/vs-2022/create-new-project.png" alt-text="Screenshot showing Create a new project":::

  2. Search for Angular in the search bar at the top and then select Angular App.

    :::image type="content" source="media/vs-2022/angular-choose-standalone-template.png" alt-text="Screenshot showing choosing a template":::

    Starting in Visual Studio 2022 version 11, the template name was changed from Standalone TypeScript Angular Project to Angular App.

  3. Give your project and solution a name.

  4. Choose Create, and then wait for Visual Studio to create the project.

View the project properties

The default project settings allow you to build and debug the project. But, if you need to change settings, right-click the project in Solution Explorer, select Properties, and then go the Linting, Build or Deploy section.

For debugger configuration, use launch.json.

Note

launch.json stores the startup settings associated with the Start button in the Debug toolbar. Currently, launch.json must be located under the .vscode folder.

Build Your Project

Choose Build > Build Solution to build the project.

Note, the initial build may take a while, as the Angular CLI runs the npm install command.

Start Your Project

Press F5 or select the Start button at the top of the window, and you will see a command prompt:

  • The Angular CLI running the ng start command

    [!NOTE] Check console output for messages, such as a message instructing you to update your version of Node.js.

Next, you should see the base Angular apps appear!

Next steps

For ASP.NET Core integration:

[!div class="nextstepaction"] Create an ASP.NET Core app with Angular