搭建Angular 5 + Express(TypeScript版)应用 求推荐指导教程

嗨Giuseppe！我刚好整理了一套实用的步骤，帮你顺利搭建基于Angular 5 + TypeScript版Express的全栈应用，咱们一步步来：

先创建项目根目录并初始化基础配置：

• 创建根文件夹：mkdir angular5-express-ts-app && cd angular5-express-ts-app
• 初始化项目配置文件：npm init -y

这部分我们会把Express用TypeScript重构，保证类型安全：

1. 安装所需依赖
   执行命令安装核心包和开发工具：

   npm install express @types/express typescript ts-node nodemon --save-dev
   

2. 配置TypeScript编译规则
   在根目录创建tsconfig.json，写入以下配置：

   {
     "compilerOptions": {
       "target": "ES6",
       "module": "CommonJS",
       "outDir": "./dist/server",
       "rootDir": "./src/server",
       "strict": true,
       "esModuleInterop": true
     },
     "include": ["src/server/**/*"]
   }
   

3. 编写后端入口文件
   创建src/server目录，然后新建server.ts：

   import express from 'express';
   const app = express();
   const port = 3000;
   
   // 测试接口
   app.get('/api/hello', (req, res) => {
     res.send({ message: 'Hello from Express + TypeScript!' });
   });
   
   app.listen(port, () => {
     console.log(`后端服务运行在 http://localhost:${port}`);
   });
   

4. 添加启动脚本
   在根目录的package.json中添加脚本：

   "scripts": {
     "start:server": "nodemon --watch src/server -e ts --exec ts-node src/server/server.ts"
   }
   

   现在执行npm run start:server就能启动后端服务了。

因为Angular 5是较旧版本，需要匹配对应的Angular CLI版本：

1. 安装指定版本的Angular CLI

   npm install -g @angular/cli@1.7.4
   

2. 创建Angular项目
   在根目录执行命令创建前端项目（命名为client）：

   ng new client --style=css --routing=false
   

3. 测试前端服务
   进入client目录，执行ng serve，访问http://localhost:4200就能看到默认的Angular页面。

要让前端能调用后端接口，我们需要配置代理和接口调用：

1. 配置Angular代理
   在client目录下创建proxy.conf.json：

   {
     "/api/*": {
       "target": "http://localhost:3000",
       "secure": false
     }
   }
   

   修改client/package.json的启动脚本，让Angular启动时使用代理：

   "scripts": {
     "start": "ng serve --proxy-config proxy.conf.json"
   }
   

2. 在Angular中调用后端接口
   • 首先在client/src/app/app.module.ts中导入HttpClientModule：

     import { HttpClientModule } from '@angular/common/http';
     
     @NgModule({
       imports: [BrowserModule, HttpClientModule],
       // ...其他配置
     })
     export class AppModule { }
     

   • 修改app.component.ts，添加接口调用逻辑：

     import { Component, OnInit } from '@angular/core';
     import { HttpClient } from '@angular/common/http';
     
     @Component({
       selector: 'app-root',
       templateUrl: './app.component.html',
       styleUrls: ['./app.component.css']
     })
     export class AppComponent implements OnInit {
       apiMessage: string = '';
     
       constructor(private http: HttpClient) {}
     
       ngOnInit() {
         this.http.get('/api/hello').subscribe((response: any) => {
           this.apiMessage = response.message;
         });
       }
     }
     

   • 在app.component.html中显示接口返回内容：

     <h1>{{ apiMessage }}</h1>
     

3. 同时启动前后端
   为了方便，可以在根目录安装concurrently来同时启动两个服务：

   npm install concurrently --save-dev
   

   修改根目录package.json的脚本：

   "scripts": {
     "start:server": "nodemon --watch src/server -e ts --exec ts-node src/server/server.ts",
     "start:client": "cd client && npm start",
     "start": "concurrently \"npm run start:server\" \"npm run start:client\""
   }
   

   现在执行npm start就能同时启动前后端啦！

• 打包部署：后端可以执行tsc编译TypeScript到dist/server，前端执行ng build --prod打包到client/dist，然后后端添加静态文件服务指向前端打包目录，这样就能用一个服务托管前后端。
• 代码规范：可以给TypeScript添加eslint或prettier，保证代码风格统一。
• 环境变量：使用dotenv管理后端环境变量，比如端口、数据库连接信息等。

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