Angular2：无法加载组件的templateUrl文件

Question

我在Angular 2项目中收到以下 Unhandled Promise rejection：无法加载错误：

这是我的messages.component.js：

import { Component, OnInit } from "@angular/core"

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

export class MessagesComponent {
    messages: object[] = [{ text: "this is some text", owner: "Brad" }, { text: "this is a cool article", owner: "Fred" }];
}

和messages.component.html：

<p>This is the messages Component: {{messages.length}}</p>
<div *ngFor="let message of messages">
    {{message.text}} by {{message.owner}}
</div>

我看了this SO post这个this article路径对我来说是正确的。

接近this post的末尾似乎表明html可能无法构建，因此会丢失。构建后，wwwroot确实缺少html文件，但我没有编译错误。

我在使用VS2017的Windows10上。我使用this template来设置项目。

Answer 1

templateUrl之后还有一个额外的逗号 因为它在同一个目录中并且因为你使用了moduleId: module.id 请尝试以下代码

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

Answer 2

你的组件看起来很棒。我认为您的错误与模块声明有关。 您是否在 app.module.ts 文件中添加了新组件？

你应该有类似的东西：

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { MessagesComponent } from './messages/messages.component'; // DECLARE YOUR COMPONENT HERE

@NgModule({
    imports: [
        BrowserModule,
        //FormsModule,
        HttpModule,
        //routing,
        AppRoutingModule
    ],
    declarations: [
        AppComponent,
        HomeComponent,
        MessagesComponent // INJECT YOUR COMPONENT
    ],
    bootstrap: [AppComponent],
    providers: [
    ]
})
export class AppModule { }