如何在Next.js中使用Angular构建产物

前置准备 #

先确认你的Angular项目已通过ng build --prod（或ng build --configuration production）生成生产环境构建产物，产物通常在dist/[项目名]目录下，包含runtime.[hash].js、polyfills.[hash].js、main.[hash].js、styles.[hash].css这些核心文件，可能还有vendor或其他chunk文件。

步骤1：放置Angular构建文件 #

将Angular构建产物的所有文件复制到Next.js项目的public/angular-build目录下（没有就新建），这样Next.js能静态访问这些资源。

步骤2：编写Next.js嵌入组件 #

方案1：用next/script实现挂载 #

创建AngularEmbed.tsx组件：

import Script from 'next/script';
import { useEffect, useRef } from 'react';

export default function AngularEmbed() {
  const angularRootRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (angularRootRef.current && window.ng) {
      // 替换成你Angular项目的根组件选择器（比如app-root）
      const rootSelector = 'app-root';
      window.ng.bootstrap(document.querySelector(rootSelector), []);
    }
  }, []);

  return (
    <div>
      <div ref={angularRootRef}>
        <app-root></app-root>
      </div>

      {/* 严格按顺序加载Angular脚本 */}
      <Script src="/angular-build/runtime.js" strategy="beforeInteractive" />
      <Script src="/angular-build/polyfills.js" strategy="beforeInteractive" />
      <Script src="/angular-build/main.js" strategy="lazyOnload" />

      <link rel="stylesheet" href="/angular-build/styles.css" />
    </div>
  );
}

注意：必须保证脚本加载顺序为runtime.js→polyfills.js→main.js，这是Angular产物的依赖顺序。

方案2：动态创建脚本（灵活控制场景） #

如果需要更灵活的加载控制，可手动创建脚本标签：

import { useEffect, useRef } from 'react';

export default function AngularEmbed() {
  const angularRootRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const loadScript = (src: string) => {
      return new Promise((resolve, reject) => {
        const script = document.createElement('script');
        script.src = src;
        script.onload = resolve;
        script.onerror = reject;
        document.body.appendChild(script);
      });
    };

    const loadStyle = (href: string) => {
      const link = document.createElement('link');
      link.rel = 'stylesheet';
      link.href = href;
      document.head.appendChild(link);
    };

    // 加载样式
    loadStyle('/angular-build/styles.css');

    // 按顺序加载脚本并初始化Angular
    loadScript('/angular-build/runtime.js')
      .then(() => loadScript('/angular-build/polyfills.js'))
      .then(() => loadScript('/angular-build/main.js'))
      .then(() => {
        if (angularRootRef.current && window.ng) {
          window.ng.bootstrap(document.querySelector('app-root'), []);
        }
      })
      .catch(err => console.error('Angular脚本加载失败:', err));

    // 组件卸载时清理Angular应用
    return () => {
      const rootEl = document.querySelector('app-root');
      if (rootEl && window.ng) {
        const appRef = window.ng.getComponent(rootEl);
        appRef?.destroy();
      }
    };
  }, []);

  return (
    <div ref={angularRootRef}>
      <app-root></app-root>
    </div>
  );
}

步骤3：在页面中使用组件 #

比如在pages/index.tsx中引入：

import AngularEmbed from '../components/AngularEmbed';

export default function Home() {
  return (
    <div className="container">
      <h1>Next.js 嵌入 Angular 应用</h1>
      <AngularEmbed />
    </div>
  );
}

常见问题排查 #

• 初始化失败：检查浏览器控制台报错，确认脚本路径正确、根组件选择器匹配、Angular产物文件完整。
• 样式冲突：给Angular根容器添加隔离类，用CSS隔离样式：

.angular-isolated-container {
  all: unset;
}

然后在组件根div上添加该类：<div ref={angularRootRef} className="angular-isolated-container">

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