6

I was following the intruduction tutorial on Webpack for Angular 2: https://angular.io/docs/ts/latest/guide/webpack.html

After finishing all the steps I am getting a 404 error when trying to load the template of the app component.

The tutorial clearly states that the app.component.html and app.component.css should be bundeled on the fly by angular2-template-loader, but they are not, since the browser is trying to request them via XHR.

Code of app.compnent.ts from the tutorial:

import { Component } from '@angular/core';
import '../../public/css/styles.css';
@Component({
    selector: 'my-app',
    templateUrl: 'app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent { }

enter image description here

It works if I specify the template path relative to the base path, but that is not the right approach.

import { Component } from '@angular/core';
import '../../public/css/styles.css';
@Component({
    selector: 'my-app',
    templateUrl: './src/app/app.component.html',
    styleUrls: ['./src/app/app.component.css']
})
export class AppComponent { }

Does anyone have an idea why this is happening, and is anyone able to complete the tutorial with a working solution?

Deniss B.
  • 281
  • 4
  • 13
  • See also http://stackoverflow.com/questions/39503805/zone-js344-unhandled-promise-rejection-failed-to-load-app-template-html-in-ang/39504168#39504168 – yurzui Sep 18 '16 at 05:30
  • Thanks, I tried adding moduleId: module.id and it didn't work, the template is still not found, I also needed to call module.id.toString() in order to avoid errors with split method is undefined. But my biggest problem with this is that it is not mentioned in the tutorial, and it also adds extra complexity and code. – Deniss B. Sep 18 '16 at 11:03
  • I was getting this same error. For me, the problem was my IDE was automatically transpiling my typescript into JS files and that was interfering with my webpack build. I deleted the JS files, and it worked fine. – Irving Sep 27 '16 at 17:47
  • i am hitting the exact same issue. Any luck solving it? – Omar Sourour Sep 28 '16 at 06:51

1 Answers1

10

Make sure that webpack does the typescript compiling process. I had the same issue, and the problem was that Visual Studio was compiling my ts files on save, and since WebPack is configured to resolve .js files and .ts files, the loaders were trying to get applied on the already compiled js files instead of the source ts files.

So to summarize:

  1. Make sure that you don't have your ts files already compiled in your directory.
  2. Install typescript in your project's local node_modules.
  3. Configure webpack as following the angular tutorial.
  4. Run webpack from the command line in the directory where the webpack.config.js file exists. This ensures that webpack IS THE ONE doing the typescript compiling and thus the ts files enter the pipeline.

It should work for you now.

Omar Sourour
  • 399
  • 2
  • 8
  • 1
    That was it - WebStorm was doing the .ts transpillation for me so it intervened with the WebPack build. Thanks! – Deniss B. Oct 06 '16 at 07:03
  • That got me too. I'd opened my project in VS2015 a couple days ago and the .js files it compiled were being loaded instead of fresh .ts compile. Thanks for the solution. – Dane Vinson Mar 11 '17 at 05:23
  • Lifesaver, I wasted a lot of time on this one – rashleighp Mar 15 '17 at 09:25