Angular Reusable Modules and Components

Question

What is the right/best way to share reusable code with Angular 2+? I'm currently using Angular 4, VSCode, TypeScript, npm, and Angular CLI. I'm a senior C# developer with some Angular 1.3 apps I want to upgrade. I'm working to get up to speed on Angular 2+. I'm currently focused on how to rightly structure larger applications that can benefit from reuse.

I have worked through a PluralSite course (Building a Responsive SPA Framework with Angular) and have a simple site working (just front-end). I like the conceptual separation between the "SPA framework" and the app and can see that it would be very nice to evolve/extend and reuse the framework.

I'm trying to figure out how to separate the SPA framework and then make use of it in multiple applications and thus only maintain a single copy of the SPA framework code. If I can successfully gain the separation and reuse that I'm after, I will likely focus quite much on building reusable code and that typically comprises 60%+ of enterprise scale applications. I have provided some more detail and some specific questions below.

I have been able to successfully "reference" (and thus import) the TypeScript code of the SPA framework from within a new application, but I'm not able to build successfully or run. I don't have any useful output to share at this point, but what I do see occurring leads me to believe that I'm not close to the right approach.

The file structures are separate, meaning that the SPA framework folder structure does not exist within the application folder structure. Following the PluralSite course resulted in a structure where the app and the SPA framework were "at the same level" (peer folders) within the project structure. The Typescript build (driven by the Angular CLI) occurred simultaneously and referenced a single "node_modules" folder.

QUESTIONS

1. How can I develop and build the SPA framework code (and other similarly "sharable" components) as a separate project and having separate node_modules dependencies (I'm assuming this would be desirable)? I'm assuming that the SPA framework would be able to build independently, but the app would have a dependency on the SPA framework. I want to be able to create a new "app 2" and not have to duplicate the code for the SPA framework.

2. I am assuming that when I eventually build app1 or app2 (and so on... 3, 4, 5, etc.) that the builds will reference the node_module dependencies of the app, and that I won't be (when I build the app) building the SPA framework independently and separately.

Essentially looking for a way to manage the code separately and leverage the SPA framework (and other reusable code) without having to embed the code and maintain variants.

Any assistance would be appreciated.

Answer 1

Here's how I've achieved what you're looking for.

1. Create a new angular project (I suggest using angular-cli but you don't have to)
2. Add your code that you want to be shared across your apps here. For example, I created a shared components project.
3. Follow the Angular Package Format to maintain consistency.
4. I use ng-packagr to build and package my project. (https://github.com/dherges/ng-packagr)
5. Publish your project to NPM (or even a private NPM repository)
6. In your applications now you can just npm install YOUR_SHARED_PROJECT_NAME to include the shared project in your application