Load coffee script module in Angular

Question

I'm having a Angular-CLI application and I try to bring in a third party dependency in, which is written in Coffee Script. This is what I do in my component:

const CoffeeWidget = require('coffee-loader!CoffeeWidget');

I thought using a coffee loader would work. But not really. Now I'm able to read the index.coffee, but in my index.coffee I require other coffee files. Like:

Cup = require '../tools/cup.coffee'

But it has problems to ready the cup.coffee and says: You may need an appropriate loader to handle this file type.

Has anyone else faced this problem?

Answer 1

Since you use coffee-loader directly into your require statement, webpack will use the loader just on the required file.

In order let webpack use coffee-loader on any .coffee file found at any depth, extend the module.rules array in your webpack configuration with:

// Webpack 2 syntax

module.exports = {
  module: {
    rules: [
      {
        test: /\.coffee$/,
        use: [ 'coffee-loader' ]
      }
    ]
  }
}