2016-12-12 2 views
2

Ich habe ein Angular2 Projekt, das von einer anderen Person entwickelt wurde, und ich muss es ausführen. Wenn ich das mache, benutze ich npm start Ich bekomme den Server zu laufen, aber die Komponente, genannt my-app wird nicht auf der Seite rendern.Komponente nicht auf Seite

Dies ist index.html:

<html> 
    <head> 
    <base href='/'> 
    <title></title> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="styles.css"> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">  
    <link href="c3.css" rel="stylesheet" type="text/css"> 

    </head> 

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

Dies ist app.components.ts:

import { Component } from '@angular/core'; 
import { AuthenticationService } from './authentication.service'; 
import { Router } from '@angular/router'; 

@Component({ 
    selector: 'my-app', 
    templateUrl: 'app/app.component.html', 
    styleUrls: ['app/app.component.css'] 
}) 

export class AppComponent { 
    title = ''; 
    isProd:boolean; 
    constructor(private authenticationService: AuthenticationService, private router: Router) { 
     this.isProd = false; 
} 

Im template für my-app, die app/app.component.html ich zum Testen stellen eine einfache div ist:

<div><h1>app components</h1></div> 

Wenn ich das ausführe, kann ich die Loading..... sehen, die in index.html ist, aber nicht den Inhalt von app/app.component.html.

Was fehlt mir?

+1

Überprüfen Sie Ihre Konsole für Fehler. –

+0

Ich bekomme eine c3.css nicht gefunden. – Eddy

+0

Was ist AuthenticationService? Ich hatte die gleichen Probleme vor ein paar Tagen, ich musste Anbieter in @Componet hinzufügen, und es wurde das Problem behoben (z. B. Provider: [AuthenticationService] ') –

Antwort

0

Ich kann nicht sehen, ob Sie angular und Ihre transpiled ts überall in index.html laden. Sie müssen alle erforderlichen Abhängigkeiten für run angle2 app in index.html und all Ihre transpilierten ts laden.

Hinweis: - Sie müssen Basis-Tag nach alle Verknüpfung zu laden css setzen.

<title></title> 
     <meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="styles.css"> 
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">  
     <link href="c3.css" rel="stylesheet" type="text/css"> 
    <base href='/'> 
+0

Wie meinst du das Laden aller erforderlichen Abhängigkeiten? Ich schaue auf dieses Beispiel, https://embed.plnkr.co/?show=preview und es gibt nichts in der index.html-Datei, die die Lade-eckige Aufgabe zu tun scheint. – Eddy

+0

@Eddy Ich sehe keine Winkelbelastung in diesem Kolben? [sieh dir diesen Samen an] (https://github.com/blinfo/angular2-webpack-seed) –

Verwandte Themen