feat(framework): Allow loading framework once.

[infacto]

Feature Description

The Angular Material UI framework is modular. That has its pros and cons. It's great, but regardless of it, there are several issues to be solved. Especially when it comes to module development. Mainly it's about build size, traffic and performance. This issue is about collecting ideas and finding a good solution. Let be begin and explain in the following case:

Developing an Angular app with lazy loaded modules (routing / loadChildrean) is great and using modules the way to go. But using the Angular Material components bloats the build size. Even if you don't use a shared material module. For example, if you have 10 components with it's own module, and every component uses the mat-card, mat-button or whatever. This means that the build size includes 10 times the same components. This should be avoided. But how? Avoiding modules in my app? Maybe there is a way in Angular. But Idk. Some devs create a shared module which contains all material components / modules. And importing it in every app module. In general, you'll use nearly all components of an framework in an app. This issue is about finding a way to load Material once for the whole app.

Use Case

Reduce build size and traffic. Improve performance and usability.

More information

You can use the webpack-bundle-analyzer

ng build --prod --stats-json && webpack-bundle-analyzer ./dist/demoapp/stats-es2015.json

Build a new app with routes and several modules. Lazy load routes with loadChildren.

Related trivia: In SCSS there are several ways to use other files. Either @import or @use. You should prefer @use. Because the file is only imported once. No matter how many times you use @use in your project. It's another point, don't be confused. This project already uses the right way. It's just a similar topic and the desired behavior of this framework in Angular at TS module level. I want to load Material only once. Having e.g. mat-card only one time in my build.

[crisbeto]

Closing the issue, because loading the framework is handled by your bundler, we don't have any control over it.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}