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

[abadakhshan]

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

[ganeshmaa]

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

[abadakhshan]

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]

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]

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

[john-gouda]

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.

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).

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

[P-de-Jong]

@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 👍