Hello does nx work wit…

Hello , does nx work with angular material on storybook ?

Responses:

Hey maaz, this is a community channel, we have no affiliation with nrwl and what they build. There are a few nrwlians around here that may have an answer tho.

Yes sorry i mean nx

i tried to add angular material to a storybook component but got an error

Well asked about the error then :)

The community will help if we can!

it had worked well in an application

okay , thanks

Hey Maaz yes you should be able to use angular, material and storybook together. If you post the error it will help us help you solve it.

Sure here it is ```Error: Template parse errors: ‘mat-card’ is not a known element:

1. If ‘mat-card’ is an Angular component, then verify that it is part of this module.
2. If ‘mat-card’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message. (“<p>sidebar works!</p> [ERROR ->]<mat-card> test </mat-card> “): ng:///DynamicModule/SidebarComponent.html@1:0 at syntaxError (http://localhost:4400/vendors~main.8faceb96432db6855895.bundle.js:8364:17) at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (http://localhost:4400/vendors~main.8faceb96432db6855895.bundle.js:18301:19) at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (http://localhost:4400/vendors~main.8faceb96432db6855895.bundle.js:34052:37) at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (http://localhost:4400/vendors~main.8faceb96432db6855895.bundle.js:34039:23) at http://localhost:4400/vendors~main.8faceb96432db6855895.bundle.js:33982:62 at Set.forEach (<anonymous>) at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (http://localhost:4400/vendors~main.8faceb96432db6855895.bundle.js:33982:19) at http://localhost:4400/vendors~main.8faceb96432db6855895.bundle.js:33892:19 at Object.then (http://localhost:4400/vendors~main.8faceb96432db6855895.bundle.js:8355:77) at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (http://localhost:4400/vendors~main.8faceb96432db6855895.bundle.js:33891:26)```

You need to import MatCardModule from @angular/material/card

I did it ```import { NgModule } from ‘@angular/core’; import { CommonModule } from ‘@angular/common’; import { SidebarComponent } from ‘./sidebar/sidebar.component’; import { MatCardModule } from ‘@angular/material/card’;

@NgModule({ imports: [CommonModule, MatCardModule], declarations: [SidebarComponent] }) export class TestModule {}```

In what components are you using the MatCard

SidebarComponent

<p>sidebar works!</p> <mat-card> test </mat-card>

This is an angular issue not an nx one. Maybe try the angular channel

ok , but it works in a normal app

I created a repo with the issue https://github.com/allwApps/nx-issue

Your repo doesn’t have any code in it. It’s just configuration files.

https://github.com/allwApps/nx-issue/tree/master/libs/test

you have to import the MatCardModule into your story in order for storybook to work

https://github.com/allwApps/nx-issue/blob/master/libs/test/src/lib/sidebar/sidebar.component.stories.ts#L10

Ah that is what I was missing. Never used storybook before.

the story does not know about TestModule it creates its own module

Thanks it was that :slightly_smiling_face: