Angular2 not populating index.html

Я уже пару дней борюсь с этой проблемой, и я не могу заставить код работать. Поэтому я новичок в веб-технологиях и пытаюсь подражать this tutorial phase. Однако без панели инструментов и hero-detail.component.Angular2 not populating index.html

Единственное, что мне понадобится, это то, что list/table будет заполняться значениями из mock-results.ts, которые должны пройти через result.service.ts. Решение, вероятно, довольно легко, но я просто не могу понять причину этого. Похоже, что index.html каким-то образом не получает результатов вообще, чтобы он мог заполнять значения. Поскольку весь проект имеет довольно много файлов, возможно, проще просто дать вам ссылку на plunker: 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' 
}

Спасибо заранее!

источник

2016-06-08 bmes

Предоставленный вами плунжер не работает. (проверьте консоль) – rinukkusu

http://plnkr.co/edit/ctIGLvwOfZ8WgseH03iZ?p=preview – yurzui

Проблема заключается в том, что вы настраиваете папку app в конфигурации SystemJS, но ваши файлы расположены в одном src.

Вы должны переместить свои файлы в app.

FYI у вас есть следующее сообщение об ошибке в консоли JavaScript:

(404 не найден) загрузки http://run.plnkr.co/d0RghXGUcm5fTzNU/app/main.ts (...)

В вашем plunkr, у вас есть только src/main.ts файл ...

Посмотрите это plunkr: http://plnkr.co/edit/eNbj6mhWQi7uUIXCN663?p=preview.

источник

2016-06-08 09:24:56

Angular2 not populating index.html

ответ

Смежные вопросы