Search code examples
typescriptwebpack-html-loader

http-loader fails to include html from another project


I have following projects tree

some-project
   some-project.component.ts
   some-project.html
   index.ts
   webpack.conf.js


another-project
    another-project.component.ts
    anpther-project.html
    index.ts
    webpack.conf.js

I'm running webpack from another-project and some-project is imported into another-project. But looks like html-loader from antoher-project does not see htmls from some-project

/some-project.html
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.

How to deal with this problem?

here is configuration for another-project tsconfig.json

{
  "awesomeTypescriptLoaderOptions": {
    "forkChecker": true,
    "useWebpackText": true,
    "transpileOnly": false
  },
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "lib": [
      "dom",
      "es2015"
    ],
    "types" : [
      "jquery",
      "jasmine",
      "angular-mocks",
      "angular-animate",
      "node"
    ],
    "typeRoots": [
      "node_modules/@types",
      "./node_modules",
      "./typings/global.d.ts"      
    ]
  },
  "files": [
    "src/index.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}

webpack config

{
    devtool: 'inline-source-map',
    entry: sourcePath + '/index.ts',
    output: {
        path: __dirname,
        filename: 'bundle.js'
    },
    externals: {
        "angular": "angular"
    },
    module: {
        rules: [{
                test: /\.ts$/,
                include: path.resolve('../../some-project/src'),
                exclude: /node_modules/,
                use: [
                    'awesome-typescript-loader'            
                ]
            },
            {
                test: /\.(html)$/,
                include: path.resolve('./src'),
                use: {
                    loader: 'html-loader',
                    options: {
                        minimize: true,
                        collapseWhitespace: true
                    }
                }
            }
        ]
    },
    resolve: {
        extensions: ['.ts', '.js'],
        modules: [
            path.resolve('./node_modules'),
            sourcePath
        ]
    },

    plugins:
    [
        new webpack.NamedModulesPlugin()
    ],

    stats: {
        colors: {
            green: '\u001b[32m',
        }
    }
}

Solution

  • So i fixed the problem. I had to pass correct path to html-loader

    const includePaths = [
        fs.realpathSync(__dirname + '/src'),
        fs.realpathSync('../../some-project/src')
    ];
    
        module: {
            rules: [
                {
                    test: /\.ts$/,
                    exclude: /node_modules/,
                    use: [
                        'awesome-typescript-loader'            
                    ]
                },
                {
                    test: /\.(html)$/,
                    include: includePaths,
                    use: {
                        loader: 'html-loader',
                        options: {
                            minimize: true,
                            collapseWhitespace: true
                        }
                    }
                }
            ]
        },