Menu
I have an existing Durandal app that are actual two apps tangled into each other.
I want to rewrite the app(s) in Angular and want to distinct app's sharing common code.
I have estimated that around 80% of the code can bee shared.
I would like to use the angular-cli if that's possible. But I am really looking for best practice on how to share code between Angular apps.
514
Angular allows us to create and reuse components, but usually, we are not doing it right. I've seen many times that developers just copy a component from a project to another one, and we all know that ctrl+c, ctrl+v is not a good way to reuse things, because the component will evolve separately on each project.
Code splitting is achieved in Angular by creating lazy-loaded modules. In order to ensure that a module is lazy loaded and split into its own chunk of JavaScript, you must first create a lazy-loaded route. The following code demonstrates a lazy-loaded route in Angular.
Take a look at Minko's blog post on creating Angular Libraries. This is because you will want to create the 80% of your reusable code as one or many sharable internal libraries. You can then publish these to an internal NPM repository.
Then you can simply use angular-cli for creating the apps which consume these libs.
There are two important points that Minko talks about in the blog linked above. These are being sure your libs are compatible with Angular's AoT and that they are tree-shakable.
UPDATE 2-Nov-20202
Another option is to to use the monorepo pattern where you would have your libraries and applications in the same repository, making code reuse easier.
Monorepo and microrepo both have advantages and disadvantages. Either pattern will require buy-in from the organisation and tooling for CICD and/or dependancy management.
If you are considering monorepo, look into the Nrwl Nx tooling.
88
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
