CLI 与项目结构

Angular 官方 CLI 生成标准化项目：Standalone 组件、路由、测试骨架一次到位。对比 Vue 3 核心 的 create-vue 与 React 核心 的 Vite 模板，Angular 约定更「企业级」——目录与命名由 CLI 统一。

学习目标

• 用 ng new 初始化 TypeScript 项目
• 读懂 angular.json 与 Standalone 入口
• 理解组件、模块（遗留）与 Standalone 的关系

核心内容

创建项目

npm install -g @angular/cli
ng new my-angular-app --standalone --routing --style=scss
cd my-angular-app && ng serve

浏览器打开 http://localhost:4200。--standalone 是 Angular 17+ 推荐写法，不再默认 NgModule 包裹。

目录约定

src/
  app/
    app.component.ts      # 根组件
    app.config.ts         # 应用级 providers
    app.routes.ts         # 路由表
  main.ts                 # bootstrapApplication
  index.html
angular.json              # 构建与代理配置

根组件与启动

// main.ts
import { bootstrapApplication } from "@angular/platform-browser";
import { AppComponent } from "./app/app.component";
import { appConfig } from "./app/app.config";

bootstrapApplication(AppComponent, appConfig);

// app.component.ts
@Component({
  selector: "app-root",
  standalone: true,
  imports: [RouterOutlet],
  template: `<h1>CodeRoadMap</h1><router-outlet />`,
})
export class AppComponent {}

Angular	Vue	React
ng new	create-vue	create vite
.component.ts	.vue SFC	.tsx
angular.json	vite.config	vite.config

开发时代理 Spring Boot API 可在 angular.json 的 serve.options.proxyConfig 配置，与 Vue 构建 同理。

练习

• 修改根组件标题为你的昵称
• 运行 ng generate component hello-track --standalone，在 App 中引入

小结

CLI 统一脚手架；Standalone 是 modern Angular 默认。 下一课组件与模板。