Generator-jhipster: Migration/Usage docs

[Steven-Garcia]

Overview of the issue

When using Jhipster we know we're facing top level development techniques and cutting edge technologies, however, some of the features are extremely silent and we can't debug on them, so leaves the solution solving to developers with a great level of expertise in some areas.

What makes Jhipster great for me is how fast you can build an extremely cool app, but as soon as something breaks, it can be living hell to find the problem.

This introduction allows me to present the case scenario for the migration to Angular on all applications using AngularJS, security is obviously a great concern for those of us who have an app on AngularJS and we're trying to find the best way to migrate all code before AngularJS ceases to be maintained.

However, after looking for several days and taking several tutorials, I really can't find a way to translate what I've "learned" in to a valid format for migrating the code in jhipster projects, this is because of the view the team has when writing code (the best in my opinion, but extremely complex for those who aren't that experienced)

In other words, I don't even know where to start.

So, what I'm suggesting is not a feature to automagically migrate AJS to A, but an exchange of experiences in similar situations, let's call it a doc repo for Angular migration cases

Motivation for or Use Case

Migrating to Angular from AngularJS is going to be quite a thing in a few months and I believe that those pioneers who have managed to do such superheroic task could greatly contribute to those noobs like me who can't even get the first stone down

Related issues

I've searched under: _angular migration_ / _angular_ / _migration_ with no luck

JHipster Version(s)

Currently moving all applications from 3.0.0 to 4.0.8

JHipster configuration

{
"generator-jhipster": {
"baseName": "DrugQualityDataManager",
"packageName": "org.wwarn.drugquality",
"packageFolder": "org/wwarn/drugquality",
"authenticationType": "session",
"hibernateCache": "ehcache",
"clusteredHttpSession": false,
"websocket": false,
"databaseType": "sql",
"devDatabaseType": "h2Memory",
"prodDatabaseType": "mysql",
"searchEngine": "elasticsearch",
"useSass": true,
"buildTool": "maven",
"frontendBuilder": "grunt",
"enableTranslation": false,
"enableSocialSignIn": false,
"testFrameworks": [
"gatling"
],
"jhipsterVersion": "4.0.8",
"serverPort": "8080",
"applicationType": "monolith",
"messageBroker": false,
"serviceDiscoveryType": false,
"jhiPrefix": "jhi",
"clientFramework": "angular1",
"clientPackageManager": "yarn"
}
}

Entity configuration(s) entityName.json files generated in the .jhipster directory

Not relevant

Browsers and Operating System

linux Mint 18

• [x ] Checking this box is mandatory (this is just to show you read everything)

[deepu105]

I hope you are talking about migrating a JHipster app with AngularJS to JHipster app with Angular?
I agree there is no much documentation on this, but then I dont think its very difficult. What I would personally do If I have to do this would be below

1. Create a new branch for migration
2. Run rm -rf * (This won't delete the .folders and .files, that's ok as they are needed)
3. Open the .yo-rc.json and change the value of clientFramework to angularX
4. Now run jhipster --with-entities --force
5. Now in the git changelog unstage any file deletions that was added by you manually and unstage file deletion/changes that you think is not required (This mostly might be server side stuff and client side code that was added manually by you)
6. Now you will have a changelog of all changes done, use git diff or a software like beyond compare, source-tree or gitkraken to go through and fine tune the changes required
7. All the entities and modules that were originally created by jhipster will now have equivalent Angular code
8. Migrate your custom code if any into these from the old angularJS code (You could refer the new code and just follow the pattern, this is purely Angular related and you can find lot of guides and tutorials for that)
9. merge the changes into original branch

I dont think we will ever write such a guide as Migrating from AngularJs to Angular is not our scope.
That said above steps are general and will be applicable for any changes to generated application. It can be further polished and can be written into a page in the docs site. something like How to change a JHipster option of an existing application. I dont have enough time to try the steps and polish them so if any one wants to do it you are welcome
cc @jhipster/developers

[Steven-Garcia]

This is genius @deepu105 , what you consider easy is something I would of never thought about in 100 years, I will definitely have a go at these steps and I'll be more than happy to share results/further steps I may need to take with you if you believe they could be useful to add to any docs

Again thank you for your time and guidance

[Steven-Garcia]

Just to let you know this worked wonders on my local deployment (and 3/4 of the way on deploying to prod), all AngularJS instances were transferred to Angular, after some minor tweaks in things like paths and router names all classes worked fine and connection to the backend for CRUD operations was plain seamless.

I really think that having this in your docs site will come in helpful for others in the same or similar situation

Thanks again

Steven