ERROR in Error: Child compilation failed: Module build failed: Error: The path for file doesn't contain relativeTo param

[karthikdeva]

I'm new into webpack and trying move gulp to webpack. facing issue in "ngtemplate-loader". Below is my webpack config.

const path = require('path');
const webpack = require("webpack");
const optimize = webpack.optimize;
const htmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const config = require('./webpack/config');

var webpackConfig = {

entry: {
    vendor: vendorResources,
    app: ["./src/app/index.module.ts"]     
},
output: {
    path: path.resolve(__dirname, "dist"),
    filename: "scripts/[name].js",
},
devtool: "source-map",
module: {
    rules: [{
            test: /\.html$/,
            use: [
                { loader: 'ngtemplate-loader?relativeTo=' + (path.resolve(__dirname, './src/app')) },
                { loader: 'html-loader' }
            ]
        },
        {
            test: /\.ts?$/,
            use: [{
                loader: 'awesome-typescript-loader'
            }, {
                loader: 'tslint-loader'
            }],
            exclude: /node_modules/
        }
    ],
},
resolve: {
    extensions: [".ts", ".tsx", ".js", ".json", ".jsx", ".css", ".scss", ".sass"]
},
externals: {},
plugins: [
    new ExtractTextPlugin({
        filename: (getPath) => {
            return getPath('styles/[name].css').replace('js', 'css');
        },
        allChunks: false
    }),
   
]

}
module.exports = webpackConfig;

[Vitenok]

Hi @karthikdeva , have you solved this issue?

[nickbreaton]

Not sure if this is the original issue, but for me my test for /\.html/ was also picking my index.html file from my html-webpack-plugin. Putting an exclude: /index.html/ did it for me. You may have to adjust the exclude if you have other files names index.html, but the basic gist is:

module.exports = {
  ...
  module: {
    rules: [
      {
        exclude: /index\.html/,
        test: /\.html$/,
        use: [
          {
            loader: 'ngtemplate-loader',
            options: {
              relativeTo: './src'
            }
          },
          { loader: 'html-loader' }
        ]
      }
    ]
  },
  ...
}

[evankleist]

This seems to be a problem with the combination of this loader and HtmlWebpackPlugin. The index file used by HtmlWebpackPlugin throws errors unless it is excluded, as @nickbreaton pointed out. However, excluding index.html means that any references in that file will not be required.

[moonformeli]

@nickbreaton It worked for me, thanks!

[dikaso]

Is this maybe only windows problem?

[DostalTomas]

No, I have linux and experiencing same issue.