sweve sweve - 2 years ago 181
HTML Question

Angular2: Index.html doesn't display the file, only says "loading..."

I'm not sure how to bind the file to the "my-app" selector.
Here is the plnkr link:

EDIT: I think the plunker can display something if I put the template code inside the tags inside the index.html file

I am wondering if anyone knows how to attach the template url to the index.html file so that it displays the templateurl instead of "Loading..."

the index.html file:

<!DOCTYPE html>
<script>document.write('<base href="' + document.location + '" />');</script>
<title>Angular 2 Tour of Heroes</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">

<!-- Polyfill(s) for older browsers -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>

<script src="https://npmcdn.com/zone.js@0.6.12?main=browser"></script>
<script src="https://npmcdn.com/reflect-metadata@0.1.3"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.27/system.js"></script>
<script src="https://npmcdn.com/typescript@1.8.10/lib/typescript.js"></script>

<script src="systemjs.config.js"></script>
System.import('app').catch(function(err){ console.error(err); });


Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license

The .ts file

import {Component, OnInit} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {Hero} from './hero';
import {HeroService} from './hero.service';
import {Observable} from'rxjs/Rx'

selector: 'my-app',
templateUrl: 'app/biddingPage.component.html',
styleUrls: ['app/BiddingPage.component.css'],
providers: [HeroService],

export class BiddingPageComponent{
numberofbids = 0;
slot1 = 0;

this.slot1 = slotvalue;
this.numberofbids +=1;

let timer = Observable.timer(2000,1000);
timer.subscribe(t=>this.ticks = t);

upgradeTime = 172801;
ticks = this.upgradeTime;
timer(days, hoursLeft, minutesLeft, remainingSeconds) {
days = Math.floor(this.ticks/24/60/60);
hoursLeft = Math.floor((this.ticks) - (days*86400));
var hours = Math.floor(hoursLeft/3600);
minutesLeft = Math.floor((hoursLeft) - (hours*3600));
var minutes = Math.floor(minutesLeft/60);
remainingSeconds = this.ticks % 60;
if (remainingSeconds < 10) {
remainingSeconds = 0 + remainingSeconds;
document.getElementById('countdown').innerHTML = days + ":" + hours + ":" + minutes + ":" + remainingSeconds;
if (this.ticks == 0) {
document.getElementById('countdown').innerHTML = "Completed";
} else {
countdownTimer = setInterval('timer()', 1000);


Answer Source

Your plunker and code has some errors, here is a clean plunker with your code

This is how to specify templateUrl and StyleUrl in angular 2 Component


 selector: 'my-app',
 styleUrls: ['src/app.component.css'],


To change the directory or the file name in plunker simply double click it.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download