2_Angular Material Installation - mukeshrathore/base-project GitHub Wiki

To install angular Material, we will first install it in app and then declare it in lib peer dependencies.

Installing Angular Material in App

ng add @angular/material --project=base-app
Please note here we are specifying version number same as angular core in package.json under base-app
Below are some of the configs asked by npm tool while adding angular material

? Choose a prebuilt theme name, or "custom" for a custom theme: Custom
? Set up global Angular Material typography styles? Yes
? Set up browser animations for Angular Material? Yes

Please note we are using 9.2 to have compliance with installation of angular application version 9.1 in case we are installing lower version then we need to use material version accordingly.

Adding peerDependencies to Lib

Adding CDK and material as peerDependency to lib "@angular/cdk": "^9.2.0", "@angular/material": "^9.2.0"

Creating Shared modules for angular material

ng g m material -- creating material module under lib project where all modules related to material components are imported and then material module is imported and lately exported from lib module.

Import and export any material module in shared module under Library

In our case, we are mentioning 'MatButtonModule' under import and exports in shared module. Please note mentioning imported module in exports is very much required if you want to use 'MatButtonModule' in base-app

Build Lib

Please note we are running build command from lib folder otherwise use -- project flag in case you are outside of lib folder ng build --watch --watch flag is used to build the lib in watch mode which in-turn checks for changes in lib and build automatically

if you are getting error like error NG3001: Unsupported private class MaterialModule. This class is visible to consumers via LibModule -> MaterialModule, but is not exported from the top-level library entrypoint. then please export you module through public-api.ts.

Please note If you exported any service, module or component, etc in NgModule make sure to include them in public_api.ts or else angular 9 will throw error.

Importing Lib Module in base-app

No need to import other modules or component in app.modules.ts. Just mention 'NgLibModule' in imports array after 'BrowserAnimationsModule' under app.module.ts.
Your statement will be import {MaterialModule,LibModule} from 'lib'
Please note we are using 'lib' as library name and its path as it is. we don't have to mention any relative path.

Using mat-button in Application Component

<button mat-button>Click Me</button> point to note here is we are not importing any material module in app directly but its getting imported from library.