Angular 从框架搭建到开发上线的完整流程_angular 开发框架搭建
Angular 从框架搭建到开发上线的完整流程
一、环境准备与项目搭建
1. 环境要求
- Node.js (推荐 LTS 版本，当前 16.x/18.x)
- npm (随 Node.js 安装) 或 yarn
- Angular CLI (最新稳定版)
2. 安装 Angular CLI
npm install -g @angular/cli# 或yarn global add @angular/cli3. 创建新项目
ng new my-angular-app --style=scss --routing# 参数说明：# --style=scss 使用 SCSS 作为样式预处理器# --routing 生成路由模块4. 项目结构概览
my-angular-app/├── src/│ ├── app/ # 应用主模块和组件│ ├── assets/ # 静态资源│ ├── environments/ # 环境配置│ ├── index.html # 主HTML文件│ └── main.ts # 应用入口文件├── angular.json # Angular CLI 配置文件├── package.json # 项目依赖和脚本└── tsconfig.json # TypeScript 配置二、项目配置
1. 核心配置文件
angular.json 关键配置
{ \"projects\": { \"my-angular-app\": { \"architect\": { \"build\": { \"options\": { \"outputPath\": \"dist/my-angular-app\", \"index\": \"src/index.html\", \"main\": \"src/main.ts\", \"polyfills\": \"src/polyfills.ts\", \"tsConfig\": \"tsconfig.app.json\", \"assets\": [\"src/favicon.ico\", \"src/assets\"], \"styles\": [\"src/styles.scss\"], \"scripts\": [], \"stylePreprocessorOptions\": { \"includePaths\": [\"src/styles\"] }, \"budgets\": [ { \"type\": \"initial\", \"maximumWarning\": \"500kb\", \"maximumError\": \"1mb\" } ] }, \"configurations\": { \"production\": { \"fileReplacements\": [ { \"replace\": \"src/environments/environment.ts\", \"with\": \"src/environments/environment.prod.ts\" } ], \"optimization\": true, \"outputHashing\": \"all\", \"sourceMap\": false, \"namedChunks\": false, \"extractLicenses\": true, \"vendorChunk\": false, \"buildOptimizer\": true } } } } } }}2. 环境配置 (environments/)
// environment.ts (开发环境)export const environment = { production: false, apiUrl: \'http://localhost:3000/api\', enableDebug: true};// environment.prod.ts (生产环境)export const environment = { production: true, apiUrl: \'https://api.yourdomain.com/api\', enableDebug: false};3. 代理配置 (解决跨域)
创建 proxy.conf.json：
{ \"/api\": { \"target\": \"http://localhost:3000\", \"secure\": false, \"changeOrigin\": true, \"pathRewrite\": { \"^/api\": \"\" } }}在 angular.json 中配置：
\"serve\": { \"options\": { \"proxyConfig\": \"proxy.conf.json\" }}三、核心开发流程
1. 模块化开发
创建功能模块
ng generate module products --route products --module app.module典型模块结构
products/├── products.module.ts # 模块定义├── products-routing.module.ts # 模块路由├── components/ # 组件├── services/ # 服务├── models/ # 数据模型└── interfaces/ # TypeScript 接口2. 组件开发
创建组件
ng generate component products/product-list组件示例
import { Component, OnInit } from \'@angular/core\';import { ProductService } from \'../services/product.service\';import { Product } from \'../models/product.model\';@Component({ selector: \'app-product-list\', templateUrl: \'./product-list.component.html\', styleUrls: [\'./product-list.component.scss\'], changeDetection: ChangeDetectionStrategy.OnPush})export class ProductListComponent implements OnInit { products$: Observable<Product[]>; constructor(private productService: ProductService) {} ngOnInit() { this.products$ = this.productService.getProducts(); }}3. 服务与依赖注入
创建服务
ng generate service products/services/product服务示例
import { Injectable } from \'@angular/core\';import { HttpClient } from \'@angular/common/http\';import { Observable } from \'rxjs\';import { environment } from \'../../../environments/environment\';@Injectable({ providedIn: \'root\'})export class ProductService { private apiUrl = `${environment.apiUrl}/products`; constructor(private http: HttpClient) { } getProducts(): Observable<Product[]> { return this.http.get<Product[]>(this.apiUrl); }}4. 路由配置
路由模块示例
import { NgModule } from \'@angular/core\';import { RouterModule, Routes } from \'@angular/router\';import { ProductListComponent } from \'./components/product-list/product-list.component\';import { ProductDetailComponent } from \'./components/product-detail/product-detail.component\';const routes: Routes = [ { path: \'\', component: ProductListComponent }, { path: \':id\', component: ProductDetailComponent }];@NgModule({ imports: [RouterModule.forChild(routes)], exports: [RouterModule]})export class ProductsRoutingModule { }5. 状态管理 (NgRx 示例)
安装 NgRx
npm install @ngrx/store @ngrx/effects @ngrx/store-devtools状态管理配置
// app.module.tsimport { StoreModule } from \'@ngrx/store\';import { EffectsModule } from \'@ngrx/effects\';import { StoreDevtoolsModule } from \'@ngrx/store-devtools\';@NgModule({ imports: [ StoreModule.forRoot({}, {}), EffectsModule.forRoot([]), StoreDevtoolsModule.instrument({ maxAge: 25, logOnly: environment.production }) ]})export class AppModule { }四、测试与质量保证
1. 单元测试 (Jasmine + Karma)
describe(\'ProductService\', () => { let service: ProductService; let httpTestingController: HttpTestingController; beforeEach(() => { TestBed.configureTestingModule({ imports: [HttpClientTestingModule], providers: [ProductService] }); service = TestBed.inject(ProductService); httpTestingController = TestBed.inject(HttpTestingController); }); it(\'should retrieve products\', () => { const mockProducts = [{ id: 1, name: \'Test Product\' }]; service.getProducts().subscribe(products => { expect(products).toEqual(mockProducts); }); const req = httpTestingController.expectOne(`${environment.apiUrl}/products`); expect(req.request.method).toBe(\'GET\'); req.flush(mockProducts); });});2. E2E 测试 (Protractor/Cypress)
使用 Cypress (推荐)
npm install cypress --save-dev测试示例
describe(\'Product List\', () => { it(\'should display products\', () => { cy.visit(\'/products\'); cy.get(\'.product-item\').should(\'have.length.greaterThan\', 0); });});3. 代码质量工具
ESLint 配置
ng add @angular-eslint/schematicsPrettier 配置
// .prettierrc{ \"singleQuote\": true, \"trailingComma\": \"all\", \"printWidth\": 100, \"tabWidth\": 2}Husky + lint-staged
// package.json{ \"husky\": { \"hooks\": { \"pre-commit\": \"lint-staged\" } }, \"lint-staged\": { \"*.ts\": [ \"eslint --fix\", \"prettier --write\" ], \"*.{html,scss,json}\": [ \"prettier --write\" ] }}五、构建与部署
1. 构建生产版本
ng build --configuration production2. 部署选项
静态服务器部署 (Nginx 示例配置)
server { listen 80; server_name yourdomain.com; root /var/www/my-angular-app; index index.html; location / { try_files $uri $uri/ /index.html; } location /api { proxy_pass http://api-server:3000; }}Docker 部署
# 阶段1: 构建应用FROM node:16 as builderWORKDIR /appCOPY package*.json ./RUN npm installCOPY . .RUN npm run build --configuration=production# 阶段2: 运行应用FROM nginx:alpineCOPY --from=builder /app/dist/my-angular-app /usr/share/nginx/htmlCOPY nginx.conf /etc/nginx/conf.d/default.confEXPOSE 80CMD [\"nginx\", \"-g\", \"daemon off;\"]3. CI/CD 配置 (GitHub Actions 示例)
name: Angular CI/CDon: push: branches: [ main ] pull_request: branches: [ main ]jobs: build: runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - name: Use Node.js 16 uses: actions/setup-node@v2 with: node-version: \'16.x\' - name: Install dependencies run: npm ci - name: Run tests run: npm test - name: Build for production run: npm run build -- --configuration=production - name: Deploy to server uses: appleboy/scp-action@master with: host: ${{ secrets.SSH_HOST }} username: ${{ secrets.SSH_USERNAME }} key: ${{ secrets.SSH_PRIVATE_KEY }} source: \"dist/my-angular-app/*\" target: \"/var/www/my-angular-app\"六、性能优化
1. 构建优化
- 启用构建优化器 (
angular.json中buildOptimizer: true) - 使用 AOT 编译 (默认启用)
- 启用生产模式 (
ng build --prod)
2. 懒加载模块
const routes: Routes = [ { path: \'products\', loadChildren: () => import(\'./products/products.module\').then(m => m.ProductsModule) }];3. 预加载策略
import { PreloadAllModules } from \'@angular/router\';@NgModule({ imports: [ RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules }) ]})export class AppRoutingModule { }4. 服务 Worker (PWA)
ng add @angular/pwa5. 性能监控
import { PerformanceObserver } from \'web-vitals\';const observer = new PerformanceObserver((list) => { for (const entry of list.getEntries()) { console.log(\'[Performance]\', entry.name, entry.startTime, entry.duration); }});observer.observe({ entryTypes: [\'navigation\', \'paint\', \'resource\'] });七、维护与升级
1. Angular 版本升级
ng update @angular/core @angular/cli2. 依赖管理
npm outdatednpm update3. 更新日志
保持 CHANGELOG.md 文件记录重要变更
通过以上流程，您可以完成从零开始搭建 Angular 应用到最终上线的完整过程。根据项目实际需求，可以适当调整各个环节的配置和工具选择。
