HTML does not render properly in SharePoint Hosted App with Angular 2

Question

I am trying to create a very basic SharePoint Hosted App with Angular2.

App deployed successfully but it does not render the html properly. And I am stuck at this initial level only. refer below output:

And below is my component code :

import { Component } from 'angular2/core';
@Component({
    selector: 'my-app',
    template: `<h1> test sharepoint app!!! </h1>`
})
export class AppComponent { }

below is a snippet of my selector:

<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">

    <my-app></my-app>

</asp:Content>

I am just trying to render this one line of template.

Answer 1

The following code working for me you can refer if you think it helps.

HTML

<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
      System.import('main.js').catch(function(err){ console.error(err); });
</script>
<app-root></app-root>

main.ts

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

platformBrowserDynamic().bootstrapModule(AppModule);

The below 2 files are in app folder

app.module.ts

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


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

app.component.ts

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

@Component({
    selector: 'app-root',
    template: '<h1>Hello World, {{title}}</h1>'
})

export class AppComponent {
    protected title:string = "Venkat Konjeti";    
}

I am using this code in my sample SPFx web part. I hope the references and code might helpful to trace your problem.