Why is my imported variable undefined?

Question

This is my Angular app, and I wanted to move my HTML template to separeted file (template.ts):

import { Component } from '@angular/core';
import {Template} from './template'

export class entity {
    id:number;
    name:string;
    dob:string;
}

let USERS: entity[] = [
    {id: 0, name: 'Jon Smith', dob: '01.10.1990'},
    {id: 1, name: 'asd qwe', dob: '22.04.1988'}
];

let myTemplate: Template;

@Component({
  selector: 'my-app',
  template: myTemplate.code,
})

export class AppComponent {
    name = 'Angular';
    Users = USERS;
}

Template file:

export class Template {
    code:string =`
            <h1>Список</h1>
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                        </div>
                        <div class="modal-body">
            ...
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-primary">Save changes</button>
                        </div>
                    </div>
                </div>
            </div>
            <table class="table table-hover table-bordered">
                <thead>
                    <tr>
                        <th> id </th>
                        <th> </th>
                        <th> </th>
                        <th> </th>
                        <th> </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th> {{Users[0].id}} </th>
                        <th> {{Users[0].name}} </th>
                        <th> {{Users[0].dob}} </th>
                        <th> <button class="crud__DeleteEditButton form-control" data-toggle = "modal" data-target = "#myModal"> </button> </th>
                        <th> <button class="crud__DeleteEditButton form-control"> </button> </th>
                    </tr>
                    <tr>
                        <th> {{Users[1].id}} </th>
                        <th> {{Users[1].name}} </th>
                        <th> {{Users[1].dob}} </th>
                        <th> <button class="crud__DeleteEditButton form-control"> </button> </th>
                        <th> <button class="crud__DeleteEditButton form-control"> </button> </th>
                    </tr>
                </tbody>
            </table>
    `
}

But I keep getting 'Cannot read property of undefined' error on template = myTemplate.code What is wrong? Here is my AppModule file:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {FormsModule} from '@angular/forms';
import { AppComponent }  from './app.component';
import {Template} from "./template";

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

Answer 1

better use the property templateUrl and provide a path to the html template in a html file.

Further reading: https://angular.io/docs/ts/latest/guide/style-guide.html#!#components

---

You are getting the error, because you say the variable is the type of Template, but the variable never gets something assigned.

Also you could do this:

export class Template {
    public static readonly code: string =`<h1>Список</h1>`
}

And

@Component({
  selector: 'my-app',
  template: Template.code,
})
// ...

But beware, I would strongly recommend using a HTML file as template, like mentioned above.