如何在现有PHP(CodeIgniter)项目中集成Angular 4实现页面渲染及Node.js后端对接

我之前刚好帮朋友处理过类似的场景，给你梳理几个可行的方案，你可以根据自己项目的实际情况挑选：

方案一：完全前后端分离（推荐，长期维护更省心） #

这种方式下Angular、CodeIgniter、Node.js各司其职，互不干扰，适合大部分场景：

• 项目目录拆分：把Angular 4项目作为独立前端项目开发，和现有CI项目分开存放。比如CI项目在/var/www/ci-project，Angular项目在/var/www/angular-frontend。
• Angular对接Node.js后端：在Angular项目的src/environments/environment.ts里配置Node.js的API基础地址：

  export const environment = {
    production: false,
    apiUrl: 'http://your-node-server:3000/api' // 替换成你的Node.js服务地址
  };
  

  之后在Angular的服务类中用HttpClient直接调用Node.js的接口，比如：

  import { HttpClient } from '@angular/common/http';
  import { environment } from '../environments/environment';
  
  @Injectable()
  export class DataService {
    constructor(private http: HttpClient) {}
  
    getItems() {
      return this.http.get(`${environment.apiUrl}/items`);
    }
  }
  

• CI项目的定位：保留CI处理原有PHP业务（比如老后台、支付回调、遗留的PHP接口），或者把CI作为Angular静态资源的托管容器。部署时，执行ng build --prod生成Angular的编译文件（在dist目录），把这些文件复制到CI项目的public/angular目录下。
• 服务器配置：用Nginx或Apache做反向代理，把根路径请求指向Angular的静态文件，/api路径转发到Node.js服务，/ci路径转发到CI的PHP服务。比如Nginx的核心配置片段：

  server {
    listen 80;
    server_name your-domain.com;
  
    # 托管Angular静态文件
    root /var/www/ci-project/public/angular;
    index index.html;
  
    # 所有非API/CI的请求都转发到Angular入口
    location / {
      try_files $uri $uri/ /index.html;
    }
  
    # 转发Node.js API请求
    location /api {
      proxy_pass http://localhost:3000/api;
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
    }
  
    # 转发CI的PHP请求
    location /ci {
      alias /var/www/ci-project/public;
      try_files $uri $uri/ /ci/index.php?$query_string;
      location ~ \.php$ {
        fastcgi_pass unix:/var/run/php/php7.4-fpm.sock;
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        include fastcgi_params;
      }
    }
  }
  

方案二：Angular嵌入CI视图（渐进式迁移，适合保留现有CI页面的场景） #

如果不想完全拆分，想逐步把CI的页面替换成Angular，可以用这种方式：

• 配置Angular输出路径：在Angular项目的angular.json里，把outputPath设置为CI项目的静态目录，比如：

  "architect": {
    "build": {
      "options": {
        "outputPath": "../ci-project/public/angular-app",
        // 其他配置...
      }
    }
  }
  

  这样执行ng build后，Angular的编译文件会直接生成到CI的public/angular-app目录下。
• 在CI中创建Angular入口视图：新建一个CI控制器（比如Angular.php），写一个index方法：

  <?php
  defined('BASEPATH') OR exit('No direct script access allowed');
  
  class Angular extends CI_Controller {
    public function index() {
      $this->load->view('angular_index');
    }
  }
  

  对应的视图文件angular_index.php内容如下（注意base href要匹配Angular文件的存放路径）：

  <!DOCTYPE html>
  <html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <title>Angular + CI</title>
    <base href="/angular-app/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
  </head>
  <body>
    <app-root></app-root>
    <script src="runtime.js"></script>
    <script src="polyfills.js"></script>
    <script src="styles.js"></script>
    <script src="vendor.js"></script>
    <script src="main.js"></script>
  </body>
  </html>
  

• CI路由配置：在application/config/routes.php里添加路由规则，把Angular入口映射到指定URL：

  $route['angular'] = 'angular/index';
  // 如果想让Angular作为首页，把默认路由改成这个
  // $route['default_controller'] = 'angular';
  

• 对接Node.js后端：和方案一完全一致，在Angular里直接配置Node.js的API地址发起请求即可。如果需要获取CI的登录状态，可以把CI的session cookie带到Angular的请求中，或者用JWT实现跨服务的身份验证。

关键注意事项 #

• 跨域问题：如果Node.js服务和Angular/CI不在同一域名下，需要在Node.js中配置CORS，比如用cors中间件：

  const cors = require('cors');
  const app = require('express')();
  app.use(cors({ origin: 'http://your-ci-domain.com' })); // 允许CI域名的请求
  

• 路由刷新404：Angular用PathLocationStrategy时，刷新页面会出现404，需要在服务器（Nginx/Apache）配置重写规则，把所有非静态文件的请求转发到Angular的index.html。
• 打包优化：Angular 4生产环境打包一定要用ng build --prod，开启AOT编译和代码压缩，大幅减小文件体积。

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