http-loader fails to include html from another project

Question

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',
        }
    }
}

Have you installed the node dependencies for both projects? Because the error is like you don't have the html plugin included. Anyways, could you show your webpack.config.js content? Maybe you are setting a root/context property. If not, could be that you are setting the tsconfig.json `rootDir` property. — The.Bear, Nov 28 '17 at 01:16
i've added configuration could you please take a look at it? — VladosJS, Nov 28 '17 at 05:08
it looks like this is probably loosely related to [tag:angular], not [tag:angularjs], but it doesn't seem to be a problem angular could solve... — Claies, Nov 28 '17 at 05:12

score 2 · Accepted Answer · answered Nov 28 '17 at 09:33

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

http-loader fails to include html from another project

1 Answers1