How do I configure my Angular library to depend on Angular Material?

Question

I have installed Angular Material into my library and have created a shared resource module that imports and exports all of Materials components. Right now I have a folder that contains a module and a component. The module declaration/exports contains the component and the imports array imports the shared Material module.

For some reason the component will not create a story in storybook and will not pass any unit tests because it cannot find the MatRadioModule that was imported from the shared resource.

This is the error that I get:

Template parse errors: 'mat-radio-button' is not a known element: 1. If 'mat-radio-button' is an Angular component, then verify that it is part of this module. 2. If 'mat-radio-button' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

Here is the Material Module:

import { NgModule } from '@angular/core';

// Angular Material Components
import {MatCheckboxModule} from '@angular/material/checkbox';
import {MatButtonModule} from '@angular/material/button';
import {MatInputModule} from '@angular/material/input';
import {MatAutocompleteModule} from '@angular/material/autocomplete';
import {MatDatepickerModule} from '@angular/material/datepicker';
import {MatFormFieldModule} from '@angular/material/form-field';
import {MatRadioModule} from '@angular/material/radio';
import {MatSelectModule} from '@angular/material/select';
import {MatSliderModule} from '@angular/material/slider';
import {MatSlideToggleModule} from '@angular/material/slide-toggle';
import {MatMenuModule} from '@angular/material/menu';
import {MatSidenavModule} from '@angular/material/sidenav';
import {MatToolbarModule} from '@angular/material/toolbar';
import {MatListModule} from '@angular/material/list';
import {MatGridListModule} from '@angular/material/grid-list';
import {MatCardModule} from '@angular/material/card';
import {MatStepperModule} from '@angular/material/stepper';
import {MatTabsModule} from '@angular/material/tabs';
import {MatExpansionModule} from '@angular/material/expansion';
import {MatButtonToggleModule} from '@angular/material/button-toggle';
import {MatChipsModule} from '@angular/material/chips';
import {MatIconModule} from '@angular/material/icon';
import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
import {MatProgressBarModule} from '@angular/material/progress-bar';
import {MatDialogModule} from '@angular/material/dialog';
import {MatTooltipModule} from '@angular/material/tooltip';
import {MatSnackBarModule} from '@angular/material/snack-bar';
import {MatTableModule} from '@angular/material/table';
import {MatSortModule} from '@angular/material/sort';
import {MatPaginatorModule} from '@angular/material/paginator';


@NgModule({
  imports: [
    MatCheckboxModule,
    MatCheckboxModule,
    MatButtonModule,
    MatInputModule,
    MatAutocompleteModule,
    MatDatepickerModule,
    MatFormFieldModule,
    MatRadioModule,
    MatSelectModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatMenuModule,
    MatSidenavModule,
    MatToolbarModule,
    MatListModule,
    MatGridListModule,
    MatCardModule,
    MatStepperModule,
    MatTabsModule,
    MatExpansionModule,
    MatButtonToggleModule,
    MatChipsModule,
    MatIconModule,
    MatProgressSpinnerModule,
    MatProgressBarModule,
    MatDialogModule,
    MatTooltipModule,
    MatSnackBarModule,
    MatTableModule,
    MatSortModule,
    MatPaginatorModule
  ],
  exports: [
    MatCheckboxModule,
    MatCheckboxModule,
    MatButtonModule,
    MatInputModule,
    MatAutocompleteModule,
    MatDatepickerModule,
    MatFormFieldModule,
    MatRadioModule,
    MatSelectModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatMenuModule,
    MatSidenavModule,
    MatToolbarModule,
    MatListModule,
    MatGridListModule,
    MatCardModule,
    MatStepperModule,
    MatTabsModule,
    MatExpansionModule,
    MatButtonToggleModule,
    MatChipsModule,
    MatIconModule,
    MatProgressSpinnerModule,
    MatProgressBarModule,
    MatDialogModule,
    MatTooltipModule,
    MatSnackBarModule,
    MatTableModule,
    MatSortModule,
    MatPaginatorModule
  ]
})
export class MaterialModule { }

Here is the component module:

import { NgModule } from '@angular/core';
import { ButtonComponent } from './button.component';
import { FormsModule } from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { MaterialModule } from '../material.module';


@NgModule({
  declarations: [ButtonComponent],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    MaterialModule
  ],
  exports: [ButtonComponent]
})
export class ButtonModule { }

Here is the component with html:

import {Component} from '@angular/core';

/**
 * @title Radios with ngModel
 */
@Component({
  selector: 'nds-button',
  templateUrl: 'button.component.html',
  styleUrls: ['button.component.css'],
})
export class ButtonComponent {

}

<mat-radio-group aria-label="Select an option">
  <mat-radio-button value="1">Option 1</mat-radio-button>
  <mat-radio-button value="2">Option 2</mat-radio-button>
</mat-radio-group>

Now I'm just wondering why mat-radio-button would not be a known element?

I should also add that the build works, but failure comes when using Storybook and running my Jest unit tests.

Does this answer your question? [Add Angular Material to a custom library](https://stackoverflow.com/questions/53359301/add-angular-material-to-a-custom-library) — Edric, Jun 03 '20 at 03:27
No, none of that stuff worked for me unfortunately. I am not using an app and only want a library that uses Storybook for visualization. I tried adding "@angular/material": "~9.2.1" and "@angular/cdk": "~9.2.1" to peerDependencies and Dependencies, but neither worked. — Caleb Edwards, Jun 03 '20 at 15:58

score 0 · Answer 1 · answered Jun 03 '20 at 02:32

0

this question already has an answer here.

Generally speaking, you need to add @angular/material as a peer dependency of your library and then call the library from your component. Hope this helps.

answered Jun 03 '20 at 02:32

Qarun Qadir Bissoondial

194
13

I am placing @angular/material in as a dependency instead of peerDependency. I have no app associated with my library, as I am using Storybook for my visualization. Is there something else that I am missing? – Caleb Edwards Jun 03 '20 at 14:49

score 0 · Answer 2 · answered Jun 03 '20 at 18:51

0

Just needed to import the Material Module into the storybook and spec file. This is why it couldn't find the components in the tests or storybook

answered Jun 03 '20 at 18:51

Caleb Edwards

11
1
4

bravehurts · Answer 3 · 2023-04-06T16:08:43.133

Its because of the context.

You should read this from beginning till end. It's the answer to your question:

https://angularexperts.io/blog/angular-template-context/

I had the same error and managed my libraries component with the following Decoration:

@Component({
    standalone: true,
    imports: [
        MatButtonModule,
    ],

I did not declare, import or export anything in the my-lib.module.ts of my library

@NgModule({
    declarations: [],
    imports: [],
    exports: []
})

Important: Do not add the component to the declarations of your main app.modules.ts by fault. Only add the Library Module to the imports of the app.modules.ts:

@NgModule({
    declarations: [
        ...
        // <-- do not add the lib component here
    ],
    imports: [
        ...
        MyLibModule
    ]

How do I configure my Angular library to depend on Angular Material?

3 Answers3