Angular 2 Laden externer HTML für Komponente

Dies könnte ein häufiges Problem sein, aber ich konnte nichts finden, das mir helfen könnte.Angular 2 Laden externer HTML für Komponente

Ich habe eine Angular-Umgebung in .Net Core nach dem offiziellen Tutorial von typescriptlang.org eingerichtet. Meine Stamm-App-Komponente lädt jedoch nicht die externe Vorlage, die ich dafür angegeben habe. Wenn index.html geladen wird, bleibt es einfach bei dem Text "Laden ...", der anfangs angegeben wurde. "test" sollte es ersetzen.

Irgendwelche Ideen, was ich falsch mache?

main.ts

import { bootstrap } from "angular2/platform/browser"; 
import { MyApp } from "./app"; 
bootstrap(MyApp);

app.ts

import { Component } from "angular2/core" 

@Component({ 
    selector: 'my-app', 
    templateUrl: './app.html' 
}) 
export class MyApp { 

}

app.html

<span>test</span>

index.html

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<script src="scripts/lib/angular2-polyfills.js"></script> 
<script src="scripts/lib/system.src.js"></script> 
<script src="scripts/lib/rx.js"></script> 
<script src="scripts/lib/angular2.js"></script> 
<script> 
    System.config({ 
     packages: { 
      'scripts': { 
       format: 'cjs', 
       defaultExtension: 'js' 
      } 
     } 
    }); 
    System.import('scripts/main').then(null, console.error.bind(console)); 
</script> 
<title></title> 
</head> 
<body> 
<my-app>Loading...</my-app> 
</body> 
</html>

Quelle

2017-08-12 Christian

Was ist der Inhalt von app.module.ts? – Vega

Haben Sie ein Routing-Modul? –

Die einzige andere .ts-Datei, die ich neben dem erwähnten habe, ist main.ts (bootstrapping). Ich habe meinen ursprünglichen Beitrag mit dem Inhalt aktualisiert. Dies, zusammen mit der Hauptkomponente in app.ts, waren die einzigen, die als Startvoraussetzung erwähnt wurden. Http://www.typescriptlang.org/docs/handbook/asp-net-core.html – Christian

Es atleast ein Modul in Ihrem Projekt sein sollte, So erstellen @NgModule innerhalb app.module.ts (Sie sollten erstellen) und das Modul Bootstrap, die später Ihre Komponente

Bootstrap

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 

import { MyApp } from './app'; 

@NgModule({ 
    declarations: [ 
    MyApp 
    ],  
    bootstrap: [MyApp ] // your component 
}) 
export class AppModule { }// your module

In main.ts Bootstrap Ihr Modul wie unten // AppModule

import { enableProdMode } from '@angular/core'; 
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 

import { AppModule } from './app/app.module'; 
import { environment } from './environments/environment'; 

if (environment.production) { 
    enableProdMode(); 
} 

platformBrowserDynamic().bootstrapModule(AppModule);

so Haupt wird Ihr Modul Bootstrap die später die Bootstrap Komponente. In Ihrem Code waren Sie direkt Bootstraping-Komponente, die nicht funktioniert

Quelle

2017-08-12 16:04:18

Danke, das hat den Trick gemacht. – Christian

Bitte als Antwort markieren und wählen, wenn es geholfen hat –

update pls? Wenn es funktioniert, dann markiere es als Antwort, damit diese Antwort auch anderen hilft. –

Angular 2 Laden externer HTML für Komponente

Antwort

Verwandte Themen