Angular 2 + mvc core: Failed to load resource: the server responded with a status of 404 (Not Found)

Question

I'm trying to build a new angular 2 and I'm running into an issue where my component templates are throwing 404 errors and I can't for the life of me figure out why.

I can configure a component and specify the template but for reasons that are currently escaping me I keep seeing the templates being referenced as .js files in the console.

for example I see the following error:

Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:5000/app/app.html.js wrapFn@http://localhost:5000/node_modules/zone.js/dist/zone.js:698:34 invokeTask@http://localhost:5000/node_modules/zone.js/dist/zone.js:265:40 runTask@http://localhost:5000/node_modules/zone.js/dist/zone.js:154:57 invoke@http://localhost:5000/node_modules/zone.js/dist/zone.js:335:40 Error loading http://localhost:5000/app/app.html.js as "app/app.html" from http://localhost:5000/app/app.component.js

Now I know I don't have an app.html.js, but I can't figure out why angular is trying to load a file that doesn't exist. Further more its only adds to confusion when I know I'm explicitly setting my template to app.html as such

import { Component } from "@angular/core";
import { Router } from "@angular/router";

const template = require("./app/app.html");

@Component({
  selector: "alerts",
  template: template
})

export class AppComponent {
  constructor(public router: Router) {}
}

Any assistance would be greatly appreciated.

edit Just to rule out the component I've also simplified it by removing the external template and put the template markup directly into the component and I still get the same results, angular is looking for a file thats neither referenced or existing:

import { Component } from "@angular/core";
import { Router } from "@angular/router";

@Component({
  selector: "alerts",
  template: `<alerts></alerts>`
})

export class AppComponent {
  constructor(public router: Router) {}
}

Unknown Unknown · Accepted Answer · 2016-10-30T10:23:26

A much easier way to do this would be to use the moduleId:module.id, and therefore not require the require

@Component({
  moduleId:module.id, // this makes the .html relative to the folder you are in
  selector: "alerts",
  templateUrl: app.html
})

Angular 2 + mvc core: Failed to load resource: the server responded with a status of 404 (Not Found)

1 Answers