Angular2: Failing to load component's templateUrl file

Question

I am getting the following Unhandled Promise rejection: Failed to load error in my Angular 2 project:

Here is my 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" }];
}

and messages.component.html:

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

I looked at this SO post and this this article the the path looks correct to me.

Towards the end of this post seems to indicate that the html can fail to build and thus be missing. The html file is indeed missing from the wwwroot after building, but I get no compiler errors.

I am on Windows10 using VS2017. I used this template for setting up the project.

is messages.component.js and messages.component.html are in the same directory? — Arelancelot, May 24 '17 at 00:03
Remove/comment out this line: `moduleId: module.id,`, and see if that helps. — R. Richards, May 24 '17 at 00:13
Yes, they are in the same dir. I also tried every version of the path I could think of before adding the `moduleId: module.id` line. — Brad Mathews, May 24 '17 at 00:14
Have you tried changing it to an in-line template to see if that makes any difference? — R. Richards, May 24 '17 at 00:59
Good, I guess. I can tell you this, your code is not the issue. There must be something amiss with the build process you are using. — R. Richards, May 24 '17 at 01:31
Have you checked whether the spelling of filename you are using is same as both side or not? — The Hungry Dictator, May 24 '17 at 05:03
As to the build process being amiss, I think I would agree, but I have no idea how to go about debugging it. I have created an issue on the template developer's Github page. I'll update here is I get anything. — Brad Mathews, May 25 '17 at 23:21
Is there any possibility you have an uppercase/lowercase problem with your template file? Please provide a directory listing showing the files in question. — , Jun 07 '17 at 07:00

score 0 · Answer 1 · answered May 24 '17 at 03:53

0

You have an extra comma after the templateUrl Since its in the same dir and since you have used moduleId: module.id Try the below code

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

answered May 24 '17 at 03:53

Nugu

852
7
10

The trailing comma is not causing the problem. I have tried every possible combination of path, including that one. I believe the problem lies elsewhere like the build, but that is beyond me right now. – Brad Mathews May 25 '17 at 23:02
The extra comma is harmless. It is accepted, valid TS syntax. – Jun 07 '17 at 06:59

score 0 · Answer 2 · answered Jun 07 '17 at 06:46

Your component seems great. I think your error is related to the module declarations. Did you add your new component in app.module.ts file ?

You should have something like :

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 { }

This would not account for the error that the OP is reporting. — , Jun 07 '17 at 06:59

Angular2: Failing to load component's templateUrl file

2 Answers2