Question

我正在尝试在portlet中使用bootstrap angular 5。此portlet是页面上唯一的portlet。当我导航到包含portlet的页面时，我没有看到任何应该显示的UI内容。我在浏览器控制台中收到错误，指出“错误”选择器“app-root”与任何元素都不匹配。“以下是我的主要配置：

的src /主/ web应用/ WEB-INF /的liferay-portlet.xml中

<portlet>
    <portlet-name>businessmobileapp</portlet-name>
    <virtual-path>${admin.portlet.path}/toolsAdmin</virtual-path>
    <instanceable>false</instanceable>
    <requires-namespaced-parameters>false</requires-namespaced-parameters>
    <ajaxable>true</ajaxable>

    <header-portlet-css>/lib/select2/select2.css</header-portlet-css>
    <header-portlet-css>/css/core-responsive.css</header-portlet-css>
    <header-portlet-css>/css/toggle.css</header-portlet-css>
    <header-portlet-css>/css/businessmobileapp/bma.css</header-portlet-css>

    <header-portlet-javascript>/tools-admin-migration-a5/dist/inline.bundle.js</header-portlet-javascript>
    <header-portlet-javascript>/tools-admin-migration-a5/dist/polyfills.bundle.js</header-portlet-javascript>
    <header-portlet-javascript>/tools-admin-migration-a5/dist/styles.bundle.js</header-portlet-javascript>
    <header-portlet-javascript>/tools-admin-migration-a5/dist/vendor.bundle.js</header-portlet-javascript>
    <header-portlet-javascript>/tools-admin-migration-a5/dist/main.bundle.js</header-portlet-javascript>
</portlet>

的src /主/ web应用/门户/ businessmobileapp / view.vm

<app-root></app-root>

工具管理员迁移-A5 / main.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

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

应用程序/ app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BusinessMobileAppComponent } from './business-mobile-app/business-mobile-app.component';
import { AppComponent} from "./app.component";

@NgModule({
  declarations: [
      AppComponent,
      BusinessMobileAppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }[/code]

app/app.component.ts
[code]import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
}

应用程序/ app.component.html

{{title}}
some title
<business-mobile-app></business-mobile-app>

P.S。我还尝试在view.vm文件中包含来包含angular应用程序中的index.html文件，以查看是否可以解决它，但事实并非如此。

编辑：我忘记了index.html文件

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ToolsAdminMigrationA5</title>
  <base href="/">

  <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>
</body>
</html>

Liferay 6.2 w / Angular 5：选择器“app-root”与任何元素都不匹配

0 个答案: