39

I would like to upgrade my existing Rails and Angular 1.x application. I'm following the ng-upgrade documentation and seeing that there are many dependencies including systemjs, typescript, tsd and a few other javascript libraries. Ideally there would be a angular-2 gem that would have all the dependencies but I'm not able to find that. Next I looked for gem's for each dependency but there isn't one for tsd.

Does it make sense to switch over to a custom build strategy so I can use npm for javascript package management? I read this article that recommends gulp but I do like the convenience of the asset pipeline.

Can anyone point me to examples of successfully using ng-upgrade with a rails project? Does it use a custom build solution like gulp or does it use the asset pipeline?

Improve this question
1

4 Answers 4

Reset to default
11

My main suggestion is not upgrading yet to Angular2, is still heavily in development and you'll face a lot of this issues like not finding a gem for rails.

Anyway, currently, angular2 can't be compiled with sprockets (the default rails pipeline), so you really want a custom solution.

My main suggestion is go with webpack, other options are browserify or gulp (and others), that's mainly a matter of taste. Overall, configuring a pipeline for angular2 is complicated, you have to take care of .d.ts files through typings (which is the updated version of tsd which now is deprecated), you have to transpile your typescript through tsc and possibly through babel too if you want to use async/await (which are really cool). You'll lose the ability to reference to your files in rails like image_path and such, using a custom pipeline, so you want to take that into account too.

Typescript is much more complex to compile than simple coffeescript files, you depend on every other file it reference, since it needs to compile check against it, don't expect something straightforward.

That being said, if you really want to work with Rails and Angular (2 or not), the right way to handle it is to have two separate projects, one with only the Rails app and one with the AngularJS path. In this way you separate concern, you can have a custom pipeline for Angular2 without impacting Rails and you'll be forced to correctly code your Angular2 app by using Rails as a JSON API, as you should.

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

Comments

1

My solution was to keep it as simple as possible without using webpack or the asset pipeline. I put the ts files in public and configured rails to serve the npm assets through the pipeline.

I put up a starter project with this structure as an example: https://github.com/jonnysamps/rails-ng2-starter

In many ways it has the benefits of having separate backend/frontend projects but keeps all the code together.

Improve this answer

Comments

-2

use angularjs gem 

gem 'angularjs-rails', '~> 1.4', '>= 1.4.8'

insert into application.js

  //= require angular
Improve this answer

1 Comment

there is no ngUpgrade package in the angular-rails gem. There is an unstable option but that is only angular-2 github.com/hiravgandhi/angularjs-rails/tree/master/vendor/…
-2

You can use http://bower.io/#install-bower and you can add two files to your the rails app .bowerrc and bower.json which is like GemFile

Improve this answer

2 Comments

Angular2 doesn't support bower.
Your link, when you follow the instructions, installs AngularJS, not Angular2. It is possible to install Angular2 with bower using this command bower install angular2-build groups.google.com/forum/#!topic/angular/vDQBKuf5HKY

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.