启动Angular项目需在VSCode中打开项目，运行npm install安装依赖，执行ng serve启动服务，默认在http://localhost:4200运行；通过创建launch.json配置调试环境，选择Chrome或Edge浏览器，设置断点后按F5启动调试；若页面空白，检查控制台报错、依赖安装、路由配置、组件选择器及polyfills；使用VSCode终端直接运行Angular CLI命令，或配置tasks.json将常用命令设为任务；当端口4200被占用时，可关闭占用进程、更改端口如ng serve --port 4201，或使用fkill-cli工具释放端口。
启动Angular项目，简单来说，就是在VSCode里让你的Angular应用跑起来。通常涉及安装必要的插件、配置启动文件，然后就可以愉快地调试了。
安装好Node.js和Angular CLI是前提。
启动Angular项目，步骤如下：
- 打开项目： 在VSCode中打开你的Angular项目文件夹。
-
安装依赖： 打开终端（
Ctrl + \
或View -> Terminal
），运行npm install
或yarn install
，安装项目所需的所有依赖包。 -
启动开发服务器： 运行
ng serve
命令。 这会启动Angular的开发服务器，默认情况下，你的应用会在http://localhost:4200/
运行。
配置调试环境，方便Debug：
- 创建 launch.json 文件： 点击 VSCode 侧边栏的调试图标（Debug），然后点击 "create a launch.json file"。
- 选择环境： 选择 "Chrome" 或 "Edge" 作为调试环境（取决于你使用的浏览器）。
-
修改配置： 编辑生成的
launch.json
文件，确保url
属性指向你的 Angular 应用运行的地址（通常是http://localhost:4200/
）。 如果你的应用使用了不同的端口，请相应地修改。
示例
launch.json配置：
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:4200/",
"webRoot": "${workspaceFolder}"
}
]
}调试 Angular 应用：
-
启动调试： 点击 VSCode 调试侧边栏的绿色启动按钮，或者按下
F5
。 -
设置断点： 在你的 Angular 代码中设置断点，例如在组件的
ngOnInit
方法中。 - 调试： 当代码执行到断点时，VSCode 会暂停执行，允许你检查变量、单步执行代码等。
为什么我的Angular项目启动后页面是空白的？
这可能是由多种原因引起的。首先，检查控制台是否有报错信息。常见的错误包括：
-
模块未找到： 确保你已经运行了
npm install
或yarn install
安装了所有依赖。 -
路由配置错误： 检查你的
app-routing.module.ts
文件，确保路由配置正确。特别是默认路由（通常是''
或'/'
）是否指向了正确的组件。 -
组件选择器错误： 检查你的
index.html
文件中是否正确使用了你的根组件的选择器（通常是<app-root>
）。 -
服务器配置问题： 如果你使用了自定义的服务器配置，确保服务器正确地提供了静态文件（如
index.html
和 JavaScript 文件）。 -
polyfills缺失: 有些老版本的浏览器可能需要polyfills支持，检查
src/polyfills.ts
文件。
另外，检查一下你的组件是否正确地渲染了内容。可以在根组件的模板中添加一些简单的文本，例如
<h1>Hello World</h1>，看看是否能够显示。如果可以显示，说明问题可能出在你的组件逻辑或数据绑定上。
如何在 VSCode 中使用 Angular CLI 命令？
VSCode 集成了终端，可以直接运行 Angular CLI 命令。
-
打开终端： 在 VSCode 中，点击
View -> Terminal
或者使用快捷键Ctrl + \
打开终端。 -
运行命令： 在终端中，你可以直接运行 Angular CLI 命令，例如
ng generate component my-component
、ng build
、ng test
等。
VSCode 还提供了一些扩展，可以更方便地使用 Angular CLI 命令。例如，Angular Language Service 扩展可以提供代码补全、错误检查等功能。
此外，还可以使用 VSCode 的任务功能，将常用的 Angular CLI 命令配置为任务。这样，你可以通过 VSCode 的界面来运行这些命令，而无需手动输入。
要配置任务，可以点击
Terminal -> Configure Tasks...，然后选择 "npm" 或 "gulp" 等作为任务运行器。然后，编辑生成的
tasks.json文件，添加你的 Angular CLI 命令。
例如，要配置一个运行
ng build命令的任务，可以添加以下配置：
{
"label": "build",
"type": "npm",
"script": "build",
"group": "build",
"problemMatcher": []
}然后，你就可以通过
Tasks -> Run Task菜单来运行这个任务了。
如何解决 Angular 项目启动时出现的 "Port 4200 is already in use" 错误？
这个错误表示端口 4200 已经被其他程序占用了。解决这个问题有几种方法：
-
关闭占用端口的程序： 使用命令行工具（如
netstat
或lsof
）找到占用端口 4200 的程序，然后关闭它。- 在 Windows 上，可以使用
netstat -ano | findstr :4200
命令找到占用端口 4200 的进程 ID (PID)，然后使用taskkill /PID <PID> /F
命令关闭该进程。 - 在 macOS 或 Linux 上，可以使用
lsof -i :4200
命令找到占用端口 4200 的进程 ID (PID)，然后使用kill -9 <PID>
命令关闭该进程。
- 在 Windows 上，可以使用
更改 Angular 应用的端口： 使用
ng serve --port <端口号>
命令来指定 Angular 应用使用不同的端口。例如，ng serve --port 4201
将会使应用在http://localhost:4201/
运行。 你也可以在angular.json
文件中修改默认端口。使用
fkill-cli
工具：fkill-cli
是一个命令行工具，可以更方便地关闭占用端口的程序。 首先，需要全局安装fkill-cli
：npm install -g fkill-cli
或yarn global add fkill-cli
。 然后，可以使用fkill :4200
命令来关闭占用端口 4200 的程序。重启电脑： 有时候，即使关闭了程序，端口仍然可能被占用。 这种情况下，重启电脑通常可以解决问题。
通常，更改端口号是最简单快捷的解决方案。 但如果需要频繁使用特定端口，最好找出占用端口的程序并关闭它。
