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

Answer 1

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$/]
      }
    ]
  },

Answer 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.