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?

I don't think that it is just simple as requiring the .coffee file, you need to transpile it to TS first. You can use this tool npmjs.com/package/coffee-script-to-typescript — Vojtech
– Vojtech, Commented May 3, 2017 at 22:51
This seems not to be supported anymore by the developers. And how would I do this without running this step always before compiling my app? — tschaka1904
– tschaka1904, Commented May 4, 2017 at 10:16

Andrea Carraro · Accepted Answer · 2017-05-04 13:10:20Z

3

+50

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

answered May 4, 2017 at 13:10

Andrea Carraro

10.6k5 gold badges40 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

tschaka1904 Over a year ago

This has helped a lot! Thanks! But there is still one little thing. The CoffeeScript Widget is a third party tool. Now, it is not requiring its dependency strictly like Cup = require '../tools/cup.coffee', but Cup = require '../tools/cup. So basically the .coffee is missing. Is the .coffee mandatory? The compiler won't compile without it, but I don't want to make changes to a third party lib.

Andrea Carraro Over a year ago

Since the module you're importing is a published third party tool, it should come with a precompiled version ready to be imported in vanilla JS. This is usually the best practice with 3rd party code. Does your plugin miss that?

Andrea Carraro Over a year ago

/\.coffee$/ is just a regex which Webpack runs against each requirish-file to chose the loader to use. You might try to write a proper regex to let coffe-loader just targeting the files required by your plugin. Also consider to declare include or exclude loader options, too.

tschaka1904 Over a year ago

I'm in contact with the developer of the coffee-script lib. In that case, it might be the best to ask him to compile it. I wasn't sure myself, if I've to compile it or if I should receive a compiled version.

tschaka1904 Over a year ago

Ah! And just on a site node. You say that such libraries should always be precompiled. Would you say the same for react components? By nature the end with jsx and angular can't really deal with that.

|

Collectives™ on Stack Overflow

Load coffee script module in Angular

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related