Angular2 templateUrl Laden Vorlage funktioniert nicht

Question

Ich versuche, eine Vorlage in meiner Komponente über templateUrl zu laden. Aber es wird nicht funktionieren. Es wirft den Fehler in der Konsole: Fehler TS2304: Name 'Modul' kann nicht gefunden werden. Die Eigenschaft moduleId: module.id ist gesetzt. Wenn ich versuche, die Vorlage innerhalb der Komponente zu schreiben, funktioniert es gut. Ich benutze SystemJS. Die Struktur sieht so aus:

-app 
    | 
    |- components 
    | | 
    | |-projects 
    | | 
    | |-project.component.ts 
    | |-project.component.html 
    | 
    |-app.component.ts 
    |-app.module.ts 

project.component.ts

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'project', 
    moduleId: module.id, 
    templateUrl: './project.component.html' 
}) 

export class ProjectComponent { 
    title: string; 
    projectName: string; 
    projectCity: string; 

    constructor() {} 

    addProject() { 
     console.log('Add project); 
    } 
} 

Die sehr einfache html:

<div> 
    <form novalidate (ngSubmit)="addProject(form.value)" #form="ngForm"> 

     <div class="form-group"> 
      <label for="">Projectname</label> 
      <input type="text" name="projectName" class="form-control" required [(ngModel)]="projectName">  
     </div> 

     <div class="form-group"> 
      <label for="">Ort</label> 
      <input type="text" name="projectCity" class="form-control" required [(ngModel)]="projectCity">  
     </div> 

     <button type="submit" [disabled]="!form.valid" class="btn btn-default">Project anlegen</button> 

    </form> 
</div> 

app.component.ts

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { AppComponent } from './app.component'; 
import { ProjectComponent } from './components/projects/project.component'; 
import { FormsModule } from '@angular/forms'; 

@NgModule({ 
    imports: [BrowserModule, FormsModule], 
    declarations: [AppComponent, ProjectComponent], 
    bootstrap: [AppComponent] 
}) 

export class AppModule {} 

Answer 1

Have Sie haben versucht templateUrl: './project.component.html'? Sie müssen .html

Answer 2

Versuchen Sie es mit dieser hinzuzufügen:

in Ihrem Code

template: require('./project.component.html') 

Answer 3

Alles funktioniert gut.

Ändern Sie einfach Ihre Komponentencode, wie folgend:

From : 

@Component({ 
selector: 'project', 
moduleId: module.id, 
templateUrl: './project.component.html' 
}) 


To : 

@Component({ 
selector: 'project', 
moduleId: module.id, 
templateUrl: 'components/projects/project.component.html' 
}) 

Dies wird für Sie auf jeden Fall funktionieren.