typescript - Angular 2 Quickstart - componenta my-app nu se încarcă

Încerc să învăț Angular, așa că am început cu tutorialul rapid pentru TypeScript de pe site-ul lor (https://angular.io/guide/quickstart)

Lucrez pe Ubuntu 14.04.

Am urmat fiecare pas, și la final nu primesc niciun eroare, dar componenta nu se încarcă. În schimb, singurul lucru pe care îl văd este „Se încarcă...” în loc de componenta principală „my-app”.

ce văd în browserul meu

fișierul index.html:

<html>
  <head>
    <title>Angular 2 QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
    <!-- 1. Load libraries -->
     <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>
  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

app/app.component.ts:

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }

Nu văd niciun motiv să arăt restul fișierelor de configurare deoarece sunt exact ca cele din tutorial. Singura schimbare este că am modificat tsconfig.json pentru a

"target": "es6",

pentru că altfel nu funcționa.

Care ar putea fi problema? De ce nu îmi încarcă componenta principală?

Editare: acestea sunt erorile din consola browserului meu:

 2 http://localhost:3000/node_modules/systemjs/dist/system.src.js Failed to load resource: the server responded with a status of 404 (Not Found)

 systemjs.config.js:46 Uncaught TypeError: System.config is not a function

 http://localhost:3000/app/ Failed to load resource: the server responded with a status of 404 (Not Found)

 app:18 Not Found: http://localhost:3000/app
    Error loading http://localhost:3000/app(anonymous function) @ app:18

 http://localhost:3000/app/ Failed to load resource: the server responded with a status of 404 (Not Found)

Răspuns #1

Am avut o problemă oarecum similară și am reușit în cele din urmă să găsesc unde este problema.

În cazul meu, când am rulat npm start în consola browser-ului, eroarea a fost XHR error (404 Not Found) loading http://localhost:3000/app/main.js. Mi-am dat seama că îmi lipsește main.js, dar am /app/main.ts.

Fișierele Typescript (.ts) nu au fost compilate în fișiere JS (.js). Apoi s-a descoperit că exista un caracter suplimentar „\” la sfârșitul fișierului tsconfig.json. Acesta nu era vizibil în Explorer sau în Atom, până când în Terminal s-a tastat tsconfig și s-a apăsat tasta Tab pentru completare automată. S-a arătat că există un caracter suplimentar la sfârșitul numelui fișierului. Apoi, cu această comandă $mv tsconfig.json\ tsconfig.json, numele a fost schimbat. Și apoi, cu npm start, a funcționat perfect.

Așadar, vă rog să verificați toate numele fișierelor în consolă. Sper că și al dumneavoastră va funcționa bine.

Răspunsul #2

Cred că ai uitat să adaugi main.ts (Consultă pasul 3 din tutorial - https://angular.io/guide/quickstart)