Liferay 6.2嵌入Angular 5报错：选择器"app-root"未匹配任何元素

咱们一步步来排查这个问题——本质就是Angular初始化的时候，找不到用来挂载根组件的<app-root>元素，下面从几个关键配置文件入手解决：

1. 先检查Portlet的View模板（view.vm） #

这是Portlet渲染前端内容的入口，必须确保页面渲染后存在<app-root>标签。打开你的src/main/webapp/portlets/businessmobileapp/view.vm，确认里面有类似这样的代码：

<!-- 确保这个容器在Portlet渲染的DOM结构中可见且存在 -->
<div class="business-mobile-app-wrapper">
  <app-root></app-root>
</div>

⚠️ 注意：别把<app-root>放在被Liferay模板隐藏的容器里，或者被条件渲染的逻辑排除了——可以页面加载后，在浏览器控制台执行document.querySelector('app-root')，如果返回null，说明这个元素根本没被渲染出来，得先把VM模板的问题搞定。

2. 确认Angular根组件的选择器匹配 #

打开app/app.component.ts，检查@Component装饰器里的selector是不是严格等于app-root：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root', // 这里必须和view.vm里的标签完全一致
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'business-mobile-app';
}

同时看main.ts的引导逻辑，确保是引导AppModule（而不是其他模块）：

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

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

3. 调整Portlet配置的资源加载顺序 #

Liferay的Portlet会管理CSS和JS的加载时机，把Angular的编译后的JS文件放到footer-portlet-javascript里，这样会在DOM渲染完成后再执行，避免Angular初始化时DOM还没准备好。打开src/main/webapp/WEB-INF/liferay-portlet.xml，修改你的Portlet配置：

<portlet>
  <portlet-name>businessmobileapp</portlet-name>
  <instanceable>false</instanceable>
  <!-- 引入Angular的JS文件，顺序别乱：runtime -> polyfills -> main -->
  <footer-portlet-javascript>/portlets/businessmobileapp/js/runtime.js</footer-portlet-javascript>
  <footer-portlet-javascript>/portlets/businessmobileapp/js/polyfills.js</footer-portlet-javascript>
  <footer-portlet-javascript>/portlets/businessmobileapp/js/main.js</footer-portlet-javascript>
  <!-- 如果有CSS，也可以在这里引入 -->
  <header-portlet-css>/portlets/businessmobileapp/css/main.css</header-portlet-css>
</portlet>

4. 验证Angular编译资源的路径正确性 #

有时候编译后的Angular文件路径和Portlet部署的路径不匹配，导致JS没加载成功，间接引发这个错误。你可以：

• 打开浏览器的Network标签，刷新页面，查看runtime.js、polyfills.js、main.js是否成功加载（没有404错误）
• 如果路径不对，调整Angular 5的.angular-cli.json配置，把outDir设置为Portlet对应的资源目录，比如：

{
  "apps": [
    {
      "root": "src",
      "outDir": "../src/main/webapp/portlets/businessmobileapp/js",
      // 其他配置...
    }
  ]
}

5. 终极调试：延迟Angular初始化 #

如果上面的步骤都没问题，但还是报错，可以试试把Angular的引导逻辑放到DOM加载完成的事件里，确保DOM已经就绪：
修改main.ts：

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

// 等待DOM完全加载后再引导Angular
document.addEventListener('DOMContentLoaded', () => {
  platformBrowserDynamic().bootstrapModule(AppModule)
    .catch(err => console.error(err));
});

按照上面的步骤排查，基本就能解决这个"app-root"找不到的问题啦！

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