Unable to use template file as a template for the component in Liferay angular portlet

Question

Unable to use the template file as a template for the component in Liferay angular portlet. The same syntax is working fine with the plain angular application.

app.component.ts

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

@Component({
    templateUrl: './app.component.html'
    /*
     * I've tried to pass template file path as below but it wasn't worked
     * templateUrl: './app.component.html'
     * templateUrl: './app.component'
     * templateUrl: 'app.component.html'
     * templateUrl: 'app.component'
     */
})

export class AppComponent {}

app.component.html

<h1>app component loaded using template file.</h1>

Below is my environment detail

• OS : windows
• Liferay : liferay-ce-portal-tomcat-7.3.2-ga3
• node : v8.12.0
• angular/cli : ^1.6.7
• angular/compiler-cli : ^5.0.0
• liferay-npm-bundler : 2.18.2
• typescript : 2.4.2

Answer 1

I found the solution from Liferay forum : https://liferay.dev/forums/-/message_boards/message/103176934#_com_liferay_message_boards_web_portlet_MBPortlet_message_106877078

According to the description, I've updated templateUrl path as below and it works fine.

app.component.ts

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

@Component({
    templateUrl: '/o/student-crud-portlet/lib/app/app.component.html'
})

export class AppComponent {}