Spec with Angular 7 broke when using angular-material

#1

hello, everyone.
I’m having trouble in my job because the specs generated by angular 7 are broking if I use some tags of angular material.

I created a project from zero, copyed the html from angular material, and when I run the spec, it says:
"mat-card-list is not a known element’.
Please, enyone can help me? thanks.

Steps I did:

1 - created the project with the command: ng new project1
2 - created a new component with the command: ng g c comp1
3 - copied and pasted the code below from angular-material:

<mat-nav-list>
   <a mat-list-item href="..." *ngFor="let link of links"> {{ link }} </a>
</mat-nav-list>

4 - run the specific test from this component with the command: ng test

and I’m having this message on the browser:
‘mat-form-field’ is not a known element. If ‘mat-form-field’ is an Angular component, then verify that it is part of this module.

#2

I suspect that you’re missing an import in the appropriate module.

1 Like
#3

Good day @fredericobsb,

Are the testing made for the file you’re creating?

I know that you did copy the spec file but does it align with what you have in your component?
By that I mean that the elements you’re testing are found in the component?

#4

good morning, @geek4ctrl.
So, I created a project from nothing, following the speps:

1 -ng new project1.
Afther this, I created a component with the command:
2 - ng generate component comp1.

-> when we create a component with the comand above, the “spec” file is created automatically.
in this point, if I run “ng test”, the spec run OK!

After this, I copied the code bellow from Angular material’s page
(https://material.angular.io/components/list/overview):

<mat-nav-list>
   <a mat-list-item href="..." *ngFor="let link of links"> {{ link }} </a>
</mat-nav-list>

After this, if I run the spec, it brokes with the message:
“mat-nav-list is not a known element”.

So, I dont know what to do with this damn error…Please, help me!

#5

But I have JUST one module: “app.module.ts”.

#6

It still sounds like you’re failing to import the MatListModule or matNavList. You could be missing imports in your module, your component, or your spec.

2 Likes
#7

Just like ArielLeslie is suggesting in order to use Angular Material you need to import its modules into your app module. This essentially says your project that is using some published “libraries” from outside.

Now to be a bit more technical about what’s happening:

  • An Angular Project has been implemented called Angular Material
  • The project is having multiple modules within it
  • When installing Angular Material you should import any of the modules in Angular Material related to the selector or “tag” you are using
  • Usually each selector or tag in angular material is linked to a module so it’s easier to track which ones you have and you don’t
  • To check what module you have to import you can check the docs under the API tab

Good luck :slight_smile:

1 Like
#8

Hello, everyone!
I have solved the problem following the steps bellow:

1 - I created another component from zero and put in it the ‘html’ code of the previous page in this page of the component I created.
2 - I imported ‘MatListModule’ in AppComponent and it worked well.

In fact, the error was the missing of the import of this component, like other guys said above.
Thanks for all help you gave to me.
good week for all of us. \o/

1 Like