如何在Next.js中集成Angular构建并实现Angular路由功能？

场景说明 #

我正在进行一个项目，需要将Angular应用集成到Next.js应用中。目标是将最新版本的Angular构建文件放置在Next.js项目的public文件夹中，并确保Angular路由能正常工作。

Next.js的public文件夹结构如下：

• angular-modal
  • browser
    • index.html
    • style-3292.css
    • main-3223d.js
    • main-3311s.js
    • polyfills.js
  • server
    • some js file

当前在组件中调用的函数：

async function fetchContent(){
    const response = await fetch('/angular-modal/browser/index.html');
    const text = await response.text();
    setAngularContent(text);

    // Dynamically load Angular scripts
    const scripts = [
        '/angular-modal/browser/polyfills-6EAL64PA.js',
        '/angular-modal/browser/main-AJ5NADMY.js',
        '/angular-modal/browser/main-SLIBOPMU.js',
    ];

    await scripts.forEach(src => {
        const script = document.createElement('script');
        script.src = src;
        script.async = true;
        document.body.appendChild(script);
    });
}

遇到的问题：

• 不加载脚本时，Angular路由无法工作；加载脚本时，控制台出现大量错误。
• Angular应用静态UI正常显示，但路由功能异常，导航到应用内不同路由时无法正常跳转。

问题与解决方案 #

1. 如何正确配置Next.js以实现Angular路由无缝运行？ #

核心是让Next.js不对Angular的路由路径进行拦截，将所有/angular-modal/*的请求都返回Angular的入口index.html，让Angular客户端路由接管。

配置Catch-All路由

• Pages Router：在pages/angular-modal/[...path].js中创建文件：

export default function AngularCatchAll({ angularHtml }) {
  return <div dangerouslySetInnerHTML={{ __html: angularHtml }} />;
}

export async function getServerSideProps() {
  const fs = require('fs');
  const path = require('path');
  const angularIndexPath = path.join(process.cwd(), 'public/angular-modal/browser/index.html');
  const angularHtml = fs.readFileSync(angularIndexPath, 'utf8');
  
  return { props: { angularHtml } };
}

• App Router：在app/angular-modal/[...path]/page.js中创建文件：

import fs from 'fs';
import path from 'path';

export default function AngularPage() {
  const angularHtml = fs.readFileSync(path.join(process.cwd(), 'public/angular-modal/browser/index.html'), 'utf8');
  return <div dangerouslySetInnerHTML={{ __html: angularHtml }} />;
}

配置Angular基础路径

在Angular项目的angular.json中设置baseHref，让Angular路由基于/angular-modal/生成，避免与Next.js路由冲突：

{
  "projects": {
    "your-angular-project": {
      "architect": {
        "build": {
          "options": {
            "baseHref": "/angular-modal/",
            // 其他构建配置
          }
        }
      }
    }
  }
}

重新构建Angular项目，将产物替换到Next.js的public/angular-modal目录下。

2. 是否有特定的服务器或路由设置方式，让Next.js支持Angular的路由机制？ #

除了上述的Catch-All路由配置，还需要确保Next.js开发服务器和生产服务器都能正确转发Angular路由请求：

• 开发环境：上述Catch-All路由已足够，Next.js会自动将/angular-modal/*的请求导向对应的页面组件，返回Angular的index.html。
• 生产环境：如果使用自定义服务器（如Express），需要添加路由规则，将所有/angular-modal/*的请求返回Angular的index.html；如果使用Vercel等托管平台，平台会自动识别Catch-All路由配置，无需额外设置。

3. 集成Angular到Next.js时，是否需要额外配置或脚本才能让Angular路由正常工作？ #

需要修正脚本加载逻辑，避免异步加载顺序混乱导致的Angular初始化失败：

async function loadAngularScripts() {
  const scripts = [
    '/angular-modal/browser/polyfills-6EAL64PA.js',
    '/angular-modal/browser/main-AJ5NADMY.js',
    '/angular-modal/browser/main-SLIBOPMU.js',
  ];

  // 顺序加载脚本，确保依赖加载完成
  for (const src of scripts) {
    await new Promise((resolve, reject) => {
      const script = document.createElement('script');
      script.src = src;
      script.onload = resolve;
      script.onerror = reject;
      document.body.appendChild(script);
    });
  }
}

// 在组件挂载时加载Angular内容和脚本
useEffect(() => {
  async function initAngular() {
    // 无需再fetch，直接使用Catch-All路由传递的angularHtml
    // 如果是客户端渲染场景，也可以直接读取public文件内容
    await loadAngularScripts();
  }
  initAngular();
}, []);

额外注意：

• Angular构建时使用生产环境配置（ng build --configuration production），避免开发环境的调试代码引发冲突。
• 检查Angular和Next.js的全局变量是否冲突，必要时给Angular的全局变量添加前缀。

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