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

Question

I'm not sure how to bind the file to the "my-app" selector. Here is the plnkr link: http://plnkr.co/edit/2L5jSRK3adPZWTUwWdcP?p=preview

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>
<html>
  <head>
    <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/[email protected]?main=browser"></script>
    <script src="https://npmcdn.com/[email protected]"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.27/system.js"></script>
    <script src="https://npmcdn.com/[email protected]/lib/typescript.js"></script>

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

  <body>
    <my-app>Loading...</my-app>
  </body>
</html>


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



@Component({
  selector: 'my-app',
  templateUrl: 'app/biddingPage.component.html',
  styleUrls: ['app/BiddingPage.component.css'],
  providers: [HeroService],
  directives: [ROUTER_DIRECTIVES]
})



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


myFunction(slotvalue) 
 {
        this.slot1 = slotvalue;
        this.numberofbids +=1;

 }
  ngOnInit(ticks){
    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) {
        clearInterval(this.countdownTimer);
        document.getElementById('countdown').innerHTML = "Completed";
    } else {
        this.ticks--;
    }
}
 countdownTimer = setInterval('timer()', 1000);

}

Pirate X · Accepted Answer · 2016-05-07 20:20:43Z

2

Your config file is little messed up.

Change your file directory from src to app. For eg src/main.ts to app/main.ts

Change your index.html script tag to this

<script>
    System.import('app').catch(function(err){ console.error(err);  });
</script>

and your config js to this

(function(global) {

var  map = {
    'app':                        'app', // 'dist',
    'rxjs':                       'https://npmcdn.com/[email protected]',
    'angular2-in-memory-web-api': 'https://npmcdn.com/angular2-in-memory-web-api' // get latest
  };

var packages = {
    'app':                        { main: 'main.ts',  defaultExtension: 'ts' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { defaultExtension: 'js' },
  };

var packageNames = [
      '@angular/common',
      '@angular/compiler',
      '@angular/core',
      '@angular/http',
      '@angular/platform-browser',
      '@angular/platform-browser-dynamic',
      '@angular/router',
      '@angular/router-deprecated',
      '@angular/upgrade',
  ];


  packageNames.forEach(function(pkgName) {
    map[pkgName] = 'https://npmcdn.com/' + pkgName + ngVer;
  });


  packageNames.forEach(function(pkgName) {
    packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
  });

   var config = {
    transpiler: 'typescript',
    typescriptOptions: {
      emitDecoratorMetadata: true
    },
    map: map,
    packages: packages
  }


  if (global.filterSystemConfig) { global.filterSystemConfig(config); }

  System.config(config);

})(this);

edited May 7, 2016 at 20:20

answered May 7, 2016 at 19:58

Pirate X

3,1156 gold badges40 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user6298396 Over a year ago

I still get the "loading..." do I delete all the other scripts inside the index.html file or leave them be?

Pirate X Over a year ago

Did you change directory for app.ts as well ? From src/app.ts to app/app.ts

user6298396 Over a year ago

What line of the config file is the directory located in?

user6298396 Over a year ago

how do i change the directory

KB_ · Accepted Answer · 2016-05-08 01:24:11Z

1

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

@Component({

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


 })

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

answered May 8, 2016 at 1:24

KB_

2,1232 gold badges26 silver badges28 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related