angularjstypescriptgruntjsgrunt-usemin

Integrating typescript partially, angularjs, grunt


Good day,

I would like to integrate typescript into an angularjs project which is using grunt. I'd like to do that step by step, so that one doesn't need to re-write the whole project.

The reason is to 1) increase the code quality, using typescript and linting for that. 2) introduce modularity because currently the .js file size grows and the code becomes less readable.

Currently the project uses grunt with following projects:

'clean:dist',
    'clean:typescript',
    'ts',
    .......,
    'jsbeautifier',
    'less',
    'useminPrepare',
    'concat',
    'copy:dist',
    'cssmin',
    'uglify',
    'filerev',
    'usemin',
    'htmlmin'

What happens in that grunt workflow is, that the typescript part is compiled and the typescript build directory is included by the index.html file. So the 'useminPrepare', 'concat', 'copy:dist', 'cssmin', 'uglify', 'filerev', 'usemin',

workflow integrates the typescript code successfully into the vendor.js.

Currently the problem is that I get the following error when opened in the browser.

Uncaught ReferenceError: exports is not defined Stack Overflow Problem Thread

But all advice in that thread are not removing the Object.defineProperty(exports, "__esModule", { value: true }); inside the (typescript to ) javascript compiled code.

I used <script>var exports = {};</script> then I got the Uncaught ReferenceError: module is not defined error. Note: I also included the <script src="bower_components/commonjs/common.js"></script>

So my assumption is that I need to get browserify between 'useminPrepare' and 'usemin', but it seems that usemin doesn't support browserify.

So my questions:

  1. How do I get rid of those errors and sanely integrate the parts written in typescript into the bundle.
  2. Any advice or any other possible path to integrate typescript partially into the angularjs and grunt project?
  3. If I am on the wrong track and it's not possible or it is too complex. Which other way do you see to achieve my goals 1) and 2) (on top)?

Thank you so much for your help.

Cheers, Tobias


Solution

  • I found the answer in this question: TS1148 ~ How to "import" with --module: "none" and typescricpt 2.x

    1. Use "module": "none"
    2. Use a global d.ts file as described in the link above.
    3. Use grunt and usemin. Put a glob pattern (wildcards) into your html file to include the typescript compiled file(s) <script src="xyz/build/tsc/**/*.js"></script>