Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

how can I add @angular/material to shared module? #8

Open
abadakhshan opened this issue Jul 7, 2019 · 6 comments
Open

how can I add @angular/material to shared module? #8

abadakhshan opened this issue Jul 7, 2019 · 6 comments

Comments

@abadakhshan
Copy link

abadakhshan commented Jul 7, 2019

How can I add external library like "@angular/material" to shared module?

@abadakhshan abadakhshan changed the title add @angular/material to shared module how can I add @angular/material to shared module? Jul 8, 2019
@ganeshmaa
Copy link

HI we are also looking the same..Can you please help us on this?

@abadakhshan
Copy link
Author

Hi @ganeshmaa

I have not found any solution completely yet!

I added

import { MatCheckboxModule } from '@angular/material';

to one of my plugins
and used

<mat-checkbox>Check me!</mat-checkbox>

in plugin html.

In this situation if you build the plugin you can see that generated bundle file contains "material" contents.

After that I try to add "material" to shared modules.
I added

'ng.material': material
to
https://github.com/alexzuza/angular-plugin-architecture/blob/master/src/app/services/plugin-loader/plugin-externals.ts#L8

and

'@angular/material/*': 'ng.material',
'@angular/material/checkbox': 'ng.material',
'@angular/material/core': 'ng.material',
'@angular/cdk': 'ng.cdk',
'@angular/cdk/observers': 'ng.cdk',

to
https://github.com/alexzuza/angular-plugin-architecture/blob/master/builders/plugin-builder/index.ts#L61

If you build the plugin again you can see that generated bundle file has lower size rather previous. but still contains some content from "material"

@gsuman2010
Copy link

gsuman2010 commented Sep 3, 2019

Is angular material ICON support? I have tried it above your comment but material icon is showing error. I have declare the module but still not display icon. Please share the solution for the material Icon.

@typeetfunc
Copy link

@ganeshmaa @abadakhshan Hi, do you find any solution of this problem?
@alexzuza FYI

@john-gouda
Copy link

You can achieve that through proxy dependency (explained below).

First of all it's not always a good idea to bother your main app to re-export all these dependencies upfront, especially if you don't them to perform First Meaningful Paint slowing app bootstrap.

Instead, you can create vendor plugin that wrap 3rd-party vendors in your case Material, below is Firebase wrapper that other app modules need to connect to Firebase. If you notice, a plugin with empty module that re-export needed types and classes of Firebase.

image

Alex already demonstrated how to set a plugin as a dependency to another plugin. Also his demo is utilizing Angular Libraries. Since a plugin is based on NG Library, you can pack and publish the wrapper to NPM and install it as a dependency to your plugin. Now instead of your component import Firebase from Firebase package, it will import it from your Firebase-Vendor-Wrapper (Proxy).

For demo purpose the map of dependency is static, but you can merge the core deps map with your plugin specific-deps in your case material-wrapper-plugin before the build, WebPack will ignore these dependencies and they will not be part of your final bundle.

While plugin-builder is building a plugin that depend on Firebase vendor lib, it will detect the import requests from @angular/fire, and with simple WebPack module redirect you can proxy the request to load from @firebase-vendors (your wrapper).

image

It might sound hard to grasp but it's so easy to implement.
Hope this helps.

@P-de-Jong
Copy link

@jfgouda Any chance you could give an example repo or something? Im trying to get this to work with your fork and the @angular/material libraries, but no success yet :(

Kinda stuck on this at the moment, so all help would be appreciated 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants