Angular 2 Web Pack 404 Html Template Urls

Question

I'm using Angular2 RC4 version and webpack dev server. I'm not able to successfully load my application. On the browser console it throws 404 and fails to load AppComponent template file using webpack. This works if I use lite-server

app.component.ts snippet

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

webpack.config.js snippet

 module:{
       loaders:[
            {test:/\.ts$/, loader:'ts',   exclude: /node_modules/},
            {test:/\.html$/, loader:'html' },
       ],

    },

Error browser_adapter.js?0526:84Error: Uncaught (in promise): Failed to load /app.component.html

score 7 · Answer 1 · answered Jul 10 '16 at 17:42

7

Another option is to use awesome-typescript-loader in combination with angular2-template-loader to inline all your styles for you, and you don't need require.

https://github.com/TheLarkInn/angular2-template-loader

  module: {
    loaders: [
      {
        test: /\.ts$/,
        loaders: ['awesome-typescript-loader', 'angular2-template-loader'],
        exclude: [/\.(spec|e2e)\.ts$/]
      }
    ]
  },

answered Jul 10 '16 at 17:42

Mark Pieszak - Trilon.io

61,391
14
82
96

This approach worked best for me. It is worth noting, though, that you also need to make sure you have an appropriate loader for HTML/CSS files, such as the `raw-loader` suggested in the GitHub link. – Samuel Slade Jan 01 '17 at 23:50

score 2 · Accepted Answer · answered Jul 10 '16 at 05:07

2

In case of Angular2 webpack,

Use template like this-

  template: require('./app.component.html'),
  styles: [require('./app.component.css')]

instead of

  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']

See if this helps.

answered Jul 10 '16 at 05:07

Sanket

19,295
10
71
82

Thanks! I changed it and it is working. However, there are more issues working with web pack. How do we bundle and deploy Angular 2 app using SystemJS? – Robin Kedia Jul 10 '16 at 06:18
How would npm run bundle work? We have to explicitly configure it. Can you explain? – Robin Kedia Jul 10 '16 at 06:33
Refer here - http://stackoverflow.com/questions/37631098/angular-2-how-to-bundle-for-production-currently-rc3 – Sanket Jul 10 '16 at 06:46
3

this is actually an antipattern according to https://github.com/AngularClass/angular2-webpack-starter `Don’t use require statements for your templates or styles, use styleUrls and templateUrls, the angular2-template-loader plugin will change it to require at build time.` so with the correct configurations you don't need require.. – Michail Michailidis Feb 08 '17 at 22:53

Angular 2 Web Pack 404 Html Template Urls

2 Answers2