在VS Code中创建Angular项目是否必须安装Node与NPM？

Hey there! As someone new to Angular, it makes total sense to ask this question—let's break it down clearly for you.

核心问题解答：必须安装 Node.js 和 NPM 吗？ #

Short answer: Absolutely yes. VS Code is just an IDE (a fancy code editor with extra tools), it doesn't come bundled with the runtime environment Angular relies on. Angular CLI—the standard tool everyone uses to scaffold and manage Angular projects—is built on Node.js, and npm (or yarn) is required to install the CLI, all your project dependencies, and run core Angular commands. Without Node and npm, you won't be able to create, build, or even start an Angular project at all—VS Code can't do that heavy lifting on its own.

分步操作指南 #

1. 在 Ubuntu 16.04 上安装 Node.js 和 NPM #

Ubuntu 16.04 is a bit older, so we'll use nvm (Node Version Manager) to install a compatible LTS version of Node (v16.x is the last LTS release that supports Ubuntu 16.04):

• Open your terminal (Ctrl+Alt+T) and run these commands to install nvm:

  curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
  

• Close and reopen your terminal, then install and activate Node.js 16:

  nvm install 16
  nvm use 16
  

• Verify the installation works:

  node -v  # Should show something like v16.20.2
  npm -v   # Should show 8.x.x or similar
  

2. 安装 Angular CLI #

Once Node and npm are set up, install Angular CLI globally (we'll use v16 to match Node 16's compatibility):

npm install -g @angular/cli@16

Verify the CLI is installed correctly:

ng version

3. 用 VS Code 创建 Angular 项目 #

You have two straightforward ways to do this in VS Code:

方法一：使用 VS Code 终端

• Open VS Code, then launch a new terminal (Ctrl+` or go to Terminal > New Terminal).
• Navigate to the folder where you want to store your project:

  cd ~/your-preferred-folder
  

• Run the Angular CLI project creation command:

  ng new my-first-angular-app
  

• Follow the prompts: choose whether to add routing, and pick your preferred stylesheet format (CSS, SCSS, etc.).
• Once the project is created, open it directly in VS Code:

  code my-first-angular-app
  

• To start the development server and launch your app in a browser, run:

  ng serve --open
  

  Your app will automatically load at http://localhost:4200.

方法二：使用 VS Code 命令面板（图形化方式）

• First, install the Angular Language Service extension in VS Code (go to the Extensions tab, search for it, and install—this adds Angular-specific auto-completion and tooling).
• Open the Command Palette (Ctrl+Shift+P), type Angular: New Project, and select the option.
• Follow the wizard: name your project, choose the save location, select routing and stylesheet options.
• Once the project is created, VS Code will open it automatically. You can then start the development server via the terminal as shown above.

Quick Tips #

• If you run into permission issues with npm, avoid using sudo—nvm installs Node in your user directory, so you shouldn't need elevated privileges.
• Ubuntu 16.04's default system packages have outdated Node versions, so using nvm is the safest way to get a compatible, up-to-date environment.

内容的提问来源于stack exchange，提问作者user8867666