How to live build an angular workspace project

[Christophe HOARAU]

Hello,

I'm quite new to angular cli, but starting to be able to do some interesting things with it.

I've build a new angular 6 workspace, with an app component and several libraries.

But currently I have to build all the library manually and then rebuild the app in order to distribute the changes.

`ng server` crash every time I rebuild one of the libraries because the library's dist folder is temporary removed.

Is there any way to automate the process ?

Thanks

[Riccardo Sadocchi]

I'm not sure to right understend your question, but when you develop the application (like debug mode) you run the ng serve, after, when app is ready to publish, you can run ng build --prod to rebuild the dist folder with all new feature and fix

[Christophe HOARAU]

Sorry if my explanations were not clear,

As I'm using new angular 6 workspace feature, my main angular application contains multiple subProjects. Some are library (`ng generate library myLib1`) and some are applications (`ng generate application myApp1`).

My applications (`myApp1`, `myApp2`, ...) depends on my libraries (`myLib1`, `myLib2` ...) which can depends them self on other libraries.

In order to serve myApp1 (`ng serve myApp1`), I have to manually build all it's dependencies (`ng build myLib1`, ...).

And every time I make a change in on of my lib, I have to rebuild all the libraries and applications that depends on it.

I will have over 6 applications and 300 libraries to maintain so I'm looking for a wait to automate the whole process (and speed it up because each build take about 30 seconds, so If I need to rebuild 100 libraries it would be about 1 hour, and 3 hours if I want to rebuild everything.

[Christophe HOARAU]

Any advice on where I should start to look ?

Thanks

[KK61]

[KK61]

On Wednesday, September 26, 2018 at 4:43:32 PM UTC+5:30, Christophe HOARAU wrote:

Any advice on where I should start to look ?

Thanks

 

For a project that's using CLI,you can use ng serve  or ng s.In other cases you may use npm start 

production build : ng build --prod

 

[Christophe HOARAU]

Thanks but my question is more about, how to handle several libraries and app live compilation.

ng serve or ng build --watch are working fine if building only one app or one library. But if my app depends on several libraries (in the same angular workspace), then I have to build them one by one on each update in order to build/serve the main application.
for example I'll have to run :

ng build my-lib1
ng build my-lib2
...
ng build my-lib99

ng serve my-app

and if I make a change on my-lib2, I might need to rebuild all the stack up to my-app.

What I'm looking for is a way to build/serve my-app that would automatically rebuild everything that needs to be rebuild when I make a change on one of the libs

[Sander Elias]

Hi Cristophe,

You are right, currently, this is not a good experience. You can optimize it a bit by using the `ng build --delete-output-path false`  and another http-server. (I did build my own server that uses the live-reload library to keep that going), but any http server will do.

The CLI team is aware of this, and it's on the agenda, but there are still a lot of bigger fishes to fry first.

You might want to check out NX from the nrwl team. iirc they have a somewhat better story ready for this.

TLDR: short term, no solution from the team, but you can work around this. Your best hope is that someone that is able to solve this, grows tired, and fix it in the CLI. I don't have the time for it currently, but I hope someone does :)

Regards

Sander

[Christophe HOARAU]

Hi Sander,

Thanks for you explanation,

I'm quite surprise angular-cli team didn't planned this from the beginning when introducing angular workspaces. This is one of the main feature of a workspace from my point of view.

I was hopping to stick with angular-cli, but I'll have a deeper look into NW, thanks for the advice.

Best regards,

Christophe

[Christophe HOARAU]

Hi,

Another way that could help me, would be to be able to compile the application without having to build each individual libraries. That was what I was doing with webpack, the build process was building ts file linked in node_modules.

This way I only had to build my applications, never the libraries. Is it possible to do so with angular-cli ?

Thanks

[Sander Elias]

Hi Christophe,

Yes, once your libs are build, you don't need to rebuild them anymore, unless you make changes to them.

Regards

Sander

[Christophe HOARAU]

Yes but I'm making quite a lot of changes across lots of libs. If I could build an app package using libs source code directly I could reduce my build time by 100.

[Zlatko Đurić]

Hi Christophe,

I can think of two ways to go forward with this, both with some caveats.

I'm not sure if it would be feasible or even advisable, but there might be a way to deal with this with custom tsconfig paths definitions. As you "ng generate" a library, it'll add a path to the dist folder of the built library. What you can try is rig the tsconfig so that it goes directly into the sources of the lib. Then on your app production build, go for the real lib. This means two things: 1. you might end up with code working in dev but not in prod (e.g. You forgot to build the lib before changes) and 2. you didn't have to go the lib way in the first place (unless you share this pub with a few apps), so that's not so big a deal. That's I've approach you can try.

Another is to leave cli ng serve and go with something custom. Custom watchers that serve the app and reload on app changes, and build-lib-build-app-reload on lib changes. I'm thinking custom gulp watchers setup, something similar to how Minko Getchev's angular-seed has it: https://github.com/mgechev/angular-seed. You can rig the watchers to only watch the libs for the app you're currently working on, not all libs, or scope it even more precisely, to single files, for example.

It would mean a little more setup work, but you'd get a tailored approach that works exactly the way you want it.

Zlatko

[Christophe HOARAU]

Hi,

Thanks for your advice, as I'm working with several app I need to use libraries to share code.

Option 2 is almost what I'm using right now but I may need a lot more tweaks to be able to have an efficient solution.

I'll give a try to option 1 but I'm not sure if this will works.

Otherwise I'll go to a double build process (one for dev and one for prod) which use webpack for dev builds.

Thanks.