如何通过特定标签将新Angular应用（app-ng）嵌入index.php替换旧应用

1. 先搞定Angular应用的构建文件 #

• 先把你的新Angular项目（app-ng）构建好，执行ng build（生产环境就用ng build --prod），项目的dist/目录里会生成编译后的静态文件，包括index.html、各种JS、CSS和资源文件。

2. 修改index.php里的嵌入标签 #

• 找到index.php里原来放AngularJS应用的标签，比如之前的<div ng-app="app">...</div>，直接换成Angular根组件的选择器对应的容器。要是你的Angular根组件选择器是app-ng，就改成：

<div id="app-ng-root"></div>

注意：如果你的根组件选择器不是app-ng，就改成你自己在@Component装饰器的selector字段里写的那个。

3. 引入Angular的静态资源 #

• 把dist/里的所有文件复制到PHP项目的合适目录，比如public/angular-app/，然后在index.php里引入这些资源，顺序要和dist/index.html里的一致：

<!-- 加载Angular的样式 -->
<link rel="stylesheet" href="/angular-app/styles.css">

<!-- 加载Angular的脚本，顺序别乱 -->
<script src="/angular-app/runtime.js"></script>
<script src="/angular-app/polyfills.js"></script>
<script src="/angular-app/main.js"></script>

偷懒的办法：直接抄dist/index.html里的资源引入代码，改对路径就行，省得搞错顺序出问题。

4. 确认Angular的启动逻辑 #

• 检查Angular项目的main.ts，确保它能正确挂载到你在index.php里加的容器上。默认代码是这样的，一般不用改：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

要是你需要手动指定挂载元素，可以改成这样：

platformBrowserDynamic().bootstrapModule(AppModule)
.then(moduleRef => {
  const rootElement = document.getElementById('app-ng-root');
  if (rootElement) {
    const appComponent = moduleRef.injector.get(AppComponent);
    rootElement.appendChild(appComponent.elementRef.nativeElement);
  }
}).catch(err => console.error(err));

5. 测试验证 #

• 启动你的PHP服务，打开index.php页面，看看控制台有没有报错，确认app-ng组件是不是正常显示出来了。

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