Can't resolve '@angular/material/typings/'

Question

I'm making tests in an angular project and I'm getting an error on those two test files:

https://pastebin.com/bttxWtQT

https://pastebin.com/7VkirsF3

And this is the error I get when I press npm test https://pastebin.com/ncTg4WXM

Please give me your thoughts on this

I've tried:

npm install --save @angular/material

npm install --save @angular/cdk

ng add @angular/material

npm install --save @angular/typings

npm install typings

npm install types

But none works

Excerpt of the error message:

ERROR in ./src/app/app.component.spec.ts
Module not found: Error: Can't resolve '@angular/material/typings'     in '/home/alpha/git/epitome/src/app'
resolve '@angular/material/typings' in     '/home/alpha/git/epitome/src/app'
  Parsed request is a module
  using description file: /home/alpha/git/epitome/package.json     (relative path: ./src/app)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      looking for modules in /home/alpha/git/epitome/
        using description file:     /home/alpha/git/epitome/package.json (relative path: .)
          Field 'browser' doesn't contain a valid alias     configuration
          using description file:     /home/alpha/git/epitome/package.json (relative path:     ./@angular/material/typings)
            no extension
              Field 'browser' doesn't contain a valid alias     configuration
              /home/alpha/git/epitome/@angular/material/typings     doesn't exist
            .ts

Answer 1

You seem to have used the wrong imports. If you check the official material API for the sidenav you can see that the import should actually be import {MatSidenavModule} from '@angular/material/sidenav'; instead of import {MatSidenavModule} from '@angular/material/typings/sidenav';.

Notice the missing typings in the first import.