Liferay 6.2 w/ Angular 5: The selector "app-root" did not match any element

Question

I am currently trying bootstrap angular 5 inside a portlet. This portlet is the only portlet on the page. When I navigate to the page that contains the portlet I do not see any of the UI content that should be displayed. I get an error in the browser console stating "Error" The selector "app-root" did not match any elements." Below is my main configuration:

src/main/webapp/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/main/webapp/portlets/businessmobileapp/view.vm

<app-root></app-root>

tools-admin-migration-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/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/app.component.html

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

P.S. I also tried do in include in the view.vm file to include the index.html file from the angular app to see if that would solve it but it didn't.

EDIT: I forgot the index.html file

<!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>

are you importing your view.vm under `head` tags? If so, try put it under `body` — Haifeng Zhang, Feb 22 '18 at 22:09

Liferay 6.2 w/ Angular 5: The selector "app-root" did not match any element

0 Answers0