Trying to make angularjs 2 work, and it’s failing miserably in rails.

  • Trying to make babel and typescript modules to co-operate (since part of the project is written with es6). FAIL
  • Referencing ts/es6 modules from typescript module. FAIL
    • HACK to workaround
    • [code]

  • Battling between different ”define” variants (interestingly various incompatible ”define” variants exist…). FAIL
  • AMD modules generated without names. FAIL
    • HACK to workaround:
    • [code]

    • It seems that making files to be ”.es6.ts” and using compile options to produce ES6 works better than AMD (which fails miserably due to different ”define” standards).
    • Typescript::Rails::Compiler.default_options = [
        '--target', 'ES6',
      #  '--noImplicitAny',
      #  '--module', 'amd',

    So far haven’t got even as far as trying actual angularjs, since even basic plain typescript compiling fails to work as expected. Based into this is hard to like angularjs 2 if co-operation with other modules and even setting up basic environment is so much hassle.

    I would call this ”climbing ass first to tree” design.

    Continuing experimenting… If I manage to get get babel and typescript to co-operate and even compile basic module dependencies, then I might even reach actual goal; trying out angularjs 2….

    Starting to seem that angularjs2 is not worth of the effort. Too bad, since angularjs1 was decent framework. It seems that angularjs2 is designed to not co-operate with any backend, but assume that whole frontend and backend live in same land. That is however, truly invalid assumption, since proper frameworks are designed to work in different environments. Thus integration with rails assets pipeline is mandatory feature.

    Update 30.7.2016

    Re-investigating @angular RC4 packaging.

    • bundles: Contain some ”UMD” packaged angular2 libraries. So far this was most succesful attempt, but still failing
    • esm: To ensure that building ES6 modules will not work, angular2 is deciding to use ”.js” extension in ES6 modules, making impossible for build logic to know which files are normal JS files and which ones are ES6 files. Thus failure so far
    • plain: Mix of typescript/undeciphered packaging format. Not yet resolved how to utilize these; need investigation

    So no progress yet, while angular 1 was dead simple and it just worked, angular 2 is seemingly decidedly difficult to use.

    find vendor/assets/javascripts/@angular-2.0.0-rc.4/ -name *.js | xargs rename .js .es6

    / AngularJS, Javascript