search

jhipster / generator-jhipster

JHipster is a development platform to quickly generate, develop, & deploy modern web applications & microservice architectures.
https://www.jhipster.tech
Apache License 2.0
21.55k stars 4.02k forks source link

Angular 2 roadmap #3664

Closed jdubois closed 7 years ago

jdubois commented 8 years ago

This is a global ticket listing tasks for Angular 2 support, originally coming from this thread in the dev mailing list

Edit: @jhipster/developers if you have started working on any of the item below, please edit this comment and add your name after the item. Once feature is complete please tick it off, pretty please 😄 - @deepu105

The tasks below can be edited and changed, depending on the discussions below:

The known issues checklist has been moved to #4407 to make this thread lighter

If anyone is looking for a guide to use the angular-2 branch here it is https://github.com/jhipster/generator-jhipster/blob/angular-2/NG2-GUIDE.md

wmarques commented 8 years ago

I would follow this example on the angular website:

  1. Use SystemJS (or Webpack) as a module loader (Bower dependencies => NPM)
  2. Move to typescript (first maybe we could only rename .js into .ts)
  3. Install angular2
  4. Use the UpgradeAdapater to bootstrap our app in Hybrid Mode
  5. Update main generator code, we have to define which files we update first (services files first seems easier for me)

There's other steps after of course but that would be a good start !

gmarziou commented 8 years ago

I think we should also consider generating a project that is compatible with angular-cli as this is the new official way to scaffold a project and run some other commands like generating new routes, linting, running tests, ...

In some way, angular-cli overlaps with yeoman.

sendilkumarn commented 8 years ago

This document does give us a lot of insights on upgrade from 1.x to 2

@gmarziou 💯 agree

deepu105 commented 8 years ago

I have created the client-2 sub generator in a new branch https://github.com/jhipster/generator-jhipster/tree/angular-2

we can do development in this branch until the client-2 is ready to be provided as beta option, so that we can still do pach releases of our master if required.

deepu105 commented 8 years ago

I have added the typescript dependencies and angular 2 dependencies in the package.json. we need to move all the bower dependencies to package.json (some might not be angular2 compatible yet and some might not be available for npm, we need to find workarounds for those)

we also need to setup gulp to process typescript here is a good tutorial http://blog.scottlogic.com/2015/12/24/creating-an-angular-2-build.html

@wmarques please proceed to change to typescript if you have time else ill do it on Monday.

sendilkumarn commented 8 years ago

Can we use broccoli ?

deepu105 commented 8 years ago

@sendilkumarn gulp is still the most popular and stable build and I dont see why we would want to move away from that also lot of people have put in a lot of effort to make our gulp build as stable as today so I dont think we need to jeopardize that.

deepu105 commented 8 years ago

@sendilkumarn btw if you are interested you can do the gulp typescript integration step, follow the link I shared above

sendilkumarn commented 8 years ago

I will give a shot to it.

jdubois commented 8 years ago

Thanks @deepu105 , let's work on this branch -> for me we can release this as an "early alpha version" very soon, it doesn't do any harm as long as we warn people it's not ready

deepu105 commented 8 years ago

Yes we can do an Alpha, but we need atleast typescript working on the client-2 for that else it would be same as client. Ill try to move all js -> ts soon.

Thanks & Regards, Deepu

On Mon, Jun 6, 2016 at 4:39 PM, Julien Dubois notifications@github.com wrote:

Thanks @deepu105 https://github.com/deepu105 , let's work on this branch -> for me we can release this as an "early alpha version" very soon, it doesn't do any harm as long as we warn people it's not ready

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/jhipster/generator-jhipster/issues/3664#issuecomment-223899779, or mute the thread https://github.com/notifications/unsubscribe/ABDlF9aI2ddMrd3symc4aoT7UOc4EYNgks5qI9y7gaJpZM4Ipod9 .

erikkemperman commented 8 years ago

Excellent! I had wondering about this for a little while, and had already set up an "edge" branch for myself, to play around with Angular2 and Gulp4, before being sidetracked by another project.

Typescript sounds like a natural choice since Angular 2 is built with it, and Gulp allows even the build itself to be written in typescript, in gulpfile.ts. Or maybe ES6 would be a more widely favoured choice?

Anyway, thanks for opening this issue, looking forward to seeing how this develops.

sendilkumarn commented 8 years ago

dropping bower

we can add angular 2 dependencies via npm. I think for referencing files, we need to have either gulp task or move node_modules inside webapp

wmarques commented 8 years ago

@deepu105 I won't have alot of time today sorry :( @sendilkumarn Agree, we should move the node_modules inside webapp in order to reference dependencies in our index.html file.

Here is a very minor work on using systemjs + typescript : https://github.com/wmarques/Ng2JhiSample

I just moved to TypeScript (removed IIFE + angular.controller... lines) and added export ... line at the end of the file (see here). Then I imported each controller, services in app.module file. Then I load this module using SystemJS in index.html

It simply displays the home page and there is no Auth logic in it, to make it work fully I have to import all controllers etc in app.module and I didn't have time do it.

deepu105 commented 8 years ago

I'm having some weird issue with the typings. on windows when i do npm i typings i'm able to do npm run typings install but if I add typings to package.json and then do npm i and when i run npm run typings install I get error as the typings executable is not present in the node_modules/.bin folder. @wmarques could you check this in your machine to see if this is a windows only issue?

deepu105 commented 8 years ago

@wmarques @sendilkumarn I already moved to ts fully and integrated systemJS. I didnt move node_modules to webapp instead I wrote a copy task in gulp to move only required files to a vendor folder. @wmarques I will see what you have done as well

wmarques commented 8 years ago

@deepu105 seems to work fine on my computer. Oh yes, it's even better if gulp copy required files only ! Do you think we should split our app in little modules ?

deepu105 commented 8 years ago

@wmarques yes we should. we should atleast make the following modules

sendilkumarn commented 8 years ago

@deepu105 @wmarques may be we can split

deepu105 commented 8 years ago

@wmarques @sendilkumarn when you have time can you try to generate an app using this branch and see if what I have done is ok? It works for me but there is one weird ts error on console and a lot of repetitive logs from the language service

sendilkumarn commented 8 years ago

I tried. It does have some error. I will let you know on that

wmarques commented 8 years ago

@deepu105 Ok will try to work on it once I have some time. Yep I'll try this and check if I can fix some errors :)

deepu105 commented 8 years ago

@sendilkumarn I guess I missed a file. Try now

francisoud commented 8 years ago

oups sorry for the previous commit message. I was trying to follow your commit message convention but I didn't realize it would be picked up by github. I'll stop doing this, I'll only mention it the PR if i'll ever get to this point ;)

deepu105 commented 8 years ago

its ok @francisoud

sendilkumarn commented 8 years ago

can we move compiled js files outside app folder. Its confusing sometimes

deepu105 commented 8 years ago

@sendilkumarn ya it was confusing for me as well :( @jhipster/developers what do you think of the below?

We can have the .ts files and .html files in the app directory under webapps as in current branch and this will only have the source files There will be a gulp task which is running as part of gulp serve

  1. It will compile the .ts files as it changes to the target|build/www directory
  2. it will copy .html files as it changes to the target|build/www directory
  3. The required dependency files from node_modules will be copied to target|build/www/vendor directory We need to make target|build/www directory as the webapp root similar to what we do for prod build so irrespective of profile we will always serve web assets from this folder either as un compressed js files or as compressed js files with sourcemaps.

This is similar to what @erikkemperman wanted to do earlier for our current version but I was against it as I didnt want developers to always have a gulp serve running. But that was for angular1, with angular2 we need to have gulp serve running always anyway for ts file compilation so riding on the same to copy assets to target|build/www would be ok as well. (@erikkemperman dont be mad at me, I personally still stand by by original view but I dont want to be a bottleneck here, I dont like Typescript as well but I would relax my view for the community needs this time)

sendilkumarn commented 8 years ago

second that

erikkemperman commented 8 years ago

@deepu105 Haha, I am furious! But seriously, I completely understand your point of view, of course.

Actually I have been reading about a school of thought that says you can do most things straight from npm scripts, no need for a separate build tool with plugins, because basically all essential components (lint, transpile, minify, watch) have cli anyway, or otherwise are easily wrapped in a portable script.

I'm not sure if that will work for complex projects like this, although I think it would be interesting to see how far one gets. That would remove Deepu's objection, I suppose, because npm scripts should work everywhere. Would anyone be interested if I gave that a try, when I find some time?

Or alternatively, would anyone be interested in trying to adapt to Gulp 4? It's not yet released, but I've been contributing some little bits here and there and it seems to be finally getting there. It promises to be a real improvement over the current version, especially regarding composing tasks and error propagation.

deepu105 commented 8 years ago

I would be more interested in gulp4 rather than hacking npm to do all these.

Npm would work in theory and may be after some real painfull hacks it might do all what we do today but in the end that package.json would look real ugly and will scare away an average user. Of course you could write external js files and call those but then you are re inventing something similar to gulp without the speed of gulp of course.

IMO its just a hacky way without much real benefit in the end.

And writing complex builds with json, good luck with that :P On 8 Jun 2016 19:07, "Erik Kemperman" notifications@github.com wrote:

@deepu105 https://github.com/deepu105 Haha, I am furious! But seriously, I completely understand your point of view, of course.

Actually I have been reading about a school of thought that says you can do most things straight from npm scripts, no need for a separate build tool with plugins, because basically all essential components (lint, transpile, minify, watch) have cli anyway, or otherwise are easily wrapped in a portable script.

I'm not sure if that will work for complex projects like this, although I think it would be interesting to see how far one gets. That would remove Deepu's objection, I suppose, because npm scripts should work everywhere. Would anyone be interested if I gave that a try, when I find some time?

Or alternatively, would anyone be interested in trying to adapt to Gulp 4? It's not yet released, but I've been contributing some little bits here and there and it seems to be finally getting there. It promises to be a real improvement over the current version, especially regarding composing tasks and error propagation.

— You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub https://github.com/jhipster/generator-jhipster/issues/3664#issuecomment-224558241, or mute the thread https://github.com/notifications/unsubscribe/ABDlF3O-Es7aLShebifTdUOJJwMmu-r_ks5qJqKBgaJpZM4Ipod9 .

erikkemperman commented 8 years ago

@deepu105 All true, and I originally had the same feeling about this. But now I've seen a few examples of reasonably elaborate builds, and I must say it's not nearly as bad as I expected. But yeah, probably JH is too complex.

If I have some time I might give Gulp 4 a go based off this branch, but I should probably wait a bit for things to settle slightly -- both here in this angular 2 effort and my day job.

deepu105 commented 8 years ago

@wmarques I have split the app to multiple modules

deepu105 commented 8 years ago

@sendilkumarn can you convert the admin module to angular2?

sendilkumarn commented 8 years ago

Am working on it. In between stuck with other activities. I will update

deepu105 commented 8 years ago

@sendilkumarn thanks. @jhipster/developers this is actually lot more work then we anticipated so we might require more hands here

deepu105 commented 8 years ago

@jdubois could you add @sendilkumarn to the https://github.com/orgs/jhipster/teams/hipsters group so that I can assign him to this ticket as well

jdubois commented 8 years ago

I can't do it right now, but I think this has changed on Github, and you can assign tickets to anyone now.

tapas4java commented 8 years ago

@deepu105, I am going to start on accounts module. Hope nobody started yet.

atomfrede commented 8 years ago

@deepu105 Not sure how to start at the moment. I've started looking at some components inside common. I have rewritten the ProfileInfoService (according to the ng2 tutorial) like this (looks fine to me, but its my first hands on ng2 and ts): 

import { Injectable } from '@angular/core';
import {Http} from '@angular/http';
import 'rxjs/add/operator/toPromise';

import {ProfileInfo} from 'profileInfo.class'

@Injectable()
export class ProfileService {

    private profileInfoUrl = 'api/profile-info';

    constructor(private http: Http) {

    }

    getProfileInfo(): Promise<ProfileInfo> {
        return this.http.get(this.profileInfoUrl)
            .toPromise()
            .then(response => {
                let data = response.json().data;
                ProfileInfo pi = new ProfileInfo();
                pi.activeProfiles = data.activeProfiles;
                pi.ribbonEnv = data.ribbonEnv;
                pi.inProduction = data.activeProfiles.indexOf("prod") !== -1;
                pi.swaggerDisabled = data.activeProfiles.indexOf("no-swagger") !== -1;
                return pi;

            })
            .catch(this.handleError);
    }

    private handleError(error: any) {
        console.error('An error occurred', error);
        return Promise.reject(error.message || error);
    }
}

So whats next? How to integrate that new servic and how to test it works correctly? How to we handle 3rd party dependencies that are not yet available as ng2 versions?

deepu105 commented 8 years ago

@atomfrede The idea now is to use the upgrade adapter to import the ng2 service and use it in an ng1 app so that we can still use the external libs. Can you commit your change. Ill try to import this into the app tomorrow. @tapas4java i guess no body has started. Cc @mraible as he might be starting something so to avoid duplicate work.

@jdubois I tried but couldn't anyways not urgent do it when you have time

atomfrede commented 8 years ago

@deepu105 Sure, just need to integrate into the generator

EDIT: here are my changes: https://github.com/atomfrede/generator-jhipster/commit/161ff39a1ea12226ca5500b8fd7cf6ce48b059d4

I also tried to convert the ribbon directive to an ng2 component

deepu105 commented 8 years ago

@atomfrede ok ill wait for you to commit into the branch. don't worry if tests fail or if app doesn't work, we can get it fixed on the way

deepu105 commented 8 years ago

Since there is no opposition for my proposal to move all generated js code into temp folders ill be doing that change first.

atomfrede commented 8 years ago

@deepu105 Should I open a PR against the angulat2 branch?

deepu105 commented 8 years ago

I guess you can directly commit if you want. or PR if you want the change to be reviewed.

jdubois commented 8 years ago

I just added @sendilkumarn to the "hipsters" team on Github

wmarques commented 8 years ago

@deepu105 agree with you, it's very confusing to have .ts, .js and even .map in same folder so we should copy them into the target folder and keep typescript files in the src one :+1:

deepu105 commented 8 years ago

@wmarques im working on that

wmarques commented 8 years ago

@deepu105 I'm having some trouble when generating an NG2 app, I let the default choices, instead of the angular version, and at the end in doesn't copy any files so I just have an src folder... But maybe it's just my computer, I'm trying to update Yeoman

EDIT : If I choose Angular1 it works. Updated Yeoman and using Node 4.4.4 still the same issue :cry:

deepu105 commented 8 years ago

I pushed a fix can you check now

Thanks & Regards, Deepu

On Tue, Jun 14, 2016 at 4:24 PM, William Marques notifications@github.com wrote:

@deepu105 https://github.com/deepu105 I'm having some trouble when generating an NG2 app, I let the default choices, instead of the angular version, and at the end in doesn't copy any files so I just have an src folder... But maybe it's just my computer, I'm trying to update Yeoman

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/jhipster/generator-jhipster/issues/3664#issuecomment-225812713, or mute the thread https://github.com/notifications/unsubscribe/ABDlF8gc_wduCxIu00fSb4F8-d9qXrENks5qLmU3gaJpZM4Ipod9 .