Angular2 not populating index.html

Question

I have been battling this problem for a couple of days now and I can't seem to get the code working. So I am new to web technologies, and am trying to imitate this tutorial phase. Without the dashboard and hero-detail.component though.

Only thing I'd need is that list/table would populate with values from mock-results.ts that should come through result.service.ts. The solution is probably pretty easy, but I just cannot fathom the cause of this. It seems that the index.html somehow doesn't receive the results at all so it could populate the values. As the whole project has quite many files, it's probably easier to just give you plunker link: http://plnkr.co/edit/coGOltjZqScCZsERHF4Y?p=preview.

result.service.ts:

import { Result } from './result'
import { RESULTS } from './mock-results';
import { Injectable } from '@angular/core';

@Injectable()
export class ResultService {
    get() {
        return Promise.resolve(RESULTS);
    }
}

results.component.ts:

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router-deprecated';

import { Result } from './result';
import { ResultService } from './result.service';
import { ResultDetailComponent } from './result-detail.component'

@Component({
  selector: 'my-results',
  templateUrl: 'app/results.component.html'
})
export class ResultsComponent implements OnInit {
  results: Result[];

  constructor(
    private router: Router,
    private resultService: ResultService) { }

  get() {
    this.results = this.resultService.get();
  }

  ngOnInit() {
    this.get();
  }
}

index.html

<!DOCTYPE html>
<html>

  <head>
    <script data-require="[email protected]" data-semver="2.0.0" src="https://code.angularjs.org/2.0.0-beta.6/angular2.min.js"></script>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <title>Results</title>
    <meta charset="UTF-8" />
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <link href="styles.css" rel="stylesheet" />
    <!-- Polyfill(s) for older browsers -->
    <script src="https://npmcdn.com/core-js/client/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://npmcdn.com/[email protected]/dist/system.src.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>

results.component.html

<h2>My results</h2>
  <div>
    <table class="table table-bordered table-striped">
      <thead>
      <tr>
        <th>Id</th>
        <th>Name</th>
        <th>Ssn</th>
      </tr>
      </thead>
      <tbody>
      <tr ng-repeat="Result in results">
        <td>{{Result.id}}</td>
        <td>{{Result.name}}</td>
        <td>{{Result.ssn}}</td>
      </tr>
      </tbody>
    </table>
  </div>

app.component.ts

import { Component } from '@angular/core';
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router-deprecated';

import { ResultsComponent } from './results.component';
import { ResultDetailComponent } from './result-detail.component';
import { ResultService } from './result.service';

@Component({
    selector: 'my-app',
    template: `
      <h1>{{title}}</h1>
      <nav>
        <a [routerLink]="['Results']">Results</a>
      </nav>
      <router-outlet></router-outlet>
    `,
    directives: [ROUTER_DIRECTIVES],
    providers: [ROUTER_PROVIDERS, ResultService]
})
@RouteConfig([
  {
    path: '/results',
    name: 'Results',
    component: ResultsComponent,
    useAsDefault: true
  }
])

export class AppComponent {
  title = 'Results'
}

Thanks in advance!

The Plunker you provided is not working. (check the console) — Maximilian Riegler
– Maximilian Riegler, Commented Jun 8, 2016 at 9:22

Thierry Templier · Accepted Answer · 2016-06-08 09:24:56Z

1

The problem is that you configure the app folder in your SystemJS configuration but your files are located into an src one.

You should move your files into an app one.

FYI you have the following error in the JavaScript console:

(404 Not Found) loading http://run.plnkr.co/d0RghXGUcm5fTzNU/app/main.ts(…)

In your plunkr, you only have a src/main.ts file...

See this plunkr: http://plnkr.co/edit/eNbj6mhWQi7uUIXCN663?p=preview.

answered Jun 8, 2016 at 9:24

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

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

Collectives™ on Stack Overflow

Angular2 not populating index.html

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related