CODEWITHSUNDEEP
angularbuildwebpacksystemjs
Giacomo Cerquone
Giacomo Cerquone

Reputation: 2478

Using webpack to build a angular2+systemjs project 404 templates error

I'd like to configure webpack just to build my project (at least for now) and in the meantime keep systemjs working (the development of this project is started with systemjs).

Now, I tried three days ago to insert webpack in my project, I basically used everything I found here (didn't touch anything about webpack config) https://angular.io/docs/ts/latest/guide/webpack.html

I switched the tsconfig.json to commonjs, I launched the npm run build command you can find in the link and I retouched the dist/index.html to make it fully compatible (removing some original systemjs stuff). But no matter what, I'm full of 404 error because zone.js can't find my components' template BUT if I move all the templates where he wants to, it works perfectly.

I searched this thing and it's due to webpack that needs to get the template with the require but the angular2-template-loader is in there on purpose, is it not working? What should I do to fix this?

This is the main webpack configuration (named in the angular guide as webpack.common.js):

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var helpers = require('./helpers');

module.exports = {
  entry: {
    'polyfills': './src/polyfills.ts',
    'vendor': './src/vendor.ts',
    'app': './src/main.ts'
  },

  resolve: {
    extensions: ['', '.js', '.ts']
  },

  module: {
    loaders: [
      {
        test: /\.ts$/,
        loaders: ['awesome-typescript-loader', 'angular2-template-loader']
      },
      {
        test: /\.html$/,
        loader: 'html'
      },
      {
        test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
        loader: 'file?name=assets/[name].[hash].[ext]'
      },
      {
        test: /\.css$/,
        exclude: helpers.root('src', 'app'),
        loader: ExtractTextPlugin.extract('style', 'css?sourceMap')
      },
      {
        test: /\.css$/,
        include: helpers.root('src', 'app'),
        loader: 'raw'
      }
    ]
  },

  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: ['app', 'vendor', 'polyfills']
    }),

    new HtmlWebpackPlugin({
      template: 'src/index.html'
    })
  ]
};

Hoping for help, thank you.

Upvotes: 2

Views: 239

Answers (1)

mkimmet
mkimmet

Reputation: 769

I'm having the same issue, and as a temporary solution I'm copying over the css and html files using the copy-webpack-plugin.

To do this add the CopyWebpackPlugin to the devDependencies in the package.json file: 

"copy-webpack-plugin": "^2.1.3",

Then in your webpack.common.js file add the require statement at the top:

var CopyWebpackPlugin = require('copy-webpack-plugin');

And then you use it in your plugins section of your webpack.common.js file:

 plugins: [
  new CopyWebpackPlugin([
      { from: 'src/*.html', to: './' }
  ]),
  new CopyWebpackPlugin([
      { from: 'src/*.css', to: './' }
  ])
]

Upvotes: 0

Related Questions