DEV Community

JWP
JWP

Posted on

2 2

Angular Libraries : Refactor Existing Components into their own folders.

Deeper into Library Internals

The Angular schematic for creating a library gives a different view of the project. This is due to it choosing to use a multi-project layout.

Alt Text

This is different than the traditional Angular Project because the component is not contained within it's own folder.

If we move this component into a folder and build again we first see this message. Which is just telling us which project is being compiled.

Alt Text

But the build immediately fails because the public.api.ts file needs to follow the change.

export * from './lib/jwp.service';
export {JwpComponent} from './lib/components/jwp.component';
export * from './lib/jwp.module';
Enter fullscreen mode Exit fullscreen mode

Once we changed the file everything worked.

We learned the AOT compiler compiles that file first as no other output was seen.

The project structure is now starting to look like a 'normal' Angular component layout.

Alt Text

Dependencies

The node_modules Eco-system loves gigantic dependency chains, for example, download a package; like Material, and you'll find it doesn't include CDK. Manual work is needed to fix dependencies.

Library projects don't store the depenecies in app.module rather they store them in a module that matches the name of your library project. This means that the angular.json project name must match the module name in your library folder.

Alt Text

When moving files around, the paths to the components in the module file, are auto-updated; which is nice to have.

Compile Errors

Projects that compile normally in your other application may not compile correctly in a library project because the compiler used is more strict! It seems to find things not found using ng build in a SPA application.

Top comments (0)

11 Tips That Make You a Better Typescript Programmer

typescript

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields

...

Read the whole post now!

👋 Kindness is contagious

Engage with a wealth of insights in this thoughtful article, valued within the supportive DEV Community. Coders of every background are welcome to join in and add to our collective wisdom.

A sincere "thank you" often brightens someone’s day. Share your gratitude in the comments below!

On DEV, the act of sharing knowledge eases our journey and fortifies our community ties. Found value in this? A quick thank you to the author can make a significant impact.

Okay