Module not found: Error: Can't resolve '@angular/material' when building dist for npm package

Question

I'm building an npm package that depends on @angular/material.

I've included in my package.json (hiding irrelevant info)

{
  "main": "dist/index.js",
  "module": "dist/index.js",
  "types": "./dist/index.d.ts",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "ngc"
  },
  "peerDependencies": {
    "@angular/core": ">=4.0.0 <5.0.0 || >=4.0.0-beta <5.0.0",
    "@angular/animations": "^5.2.0",
    "@angular/cdk": "^5.0.4",
    "@angular/material": "^5.0.4",
    "hammerjs": "^2.0.8",
  },
  "devDependencies": {
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.4.6",
    "@angular/compiler-cli": "^4.4.6",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/animations": "^5.2.0",
    "@angular/cdk": "^5.0.4",
    "@angular/material": "^5.0.4",
    "hammerjs": "^2.0.8",
    "core-js": "^2.4.1",
    "rollup": "^0.50.0",
    "rxjs": "^5.4.1",
    "typescript": "^2.6.1",
    "uglify-js": "^3.1.6",
    "zone.js": "^0.8.4"
  }
}

I build the package with ./node_modules/.bin/ngc without any problem. But when I use this package in my local project, I'm getting the following error:

ERROR in /Users/me/myPackage/dist/myPackage.module.js
Module not found: Error: Can't resolve '@angular/material/slider/' in '/Users/me/myPackage/dist'
 @ /Users/me/myPackage/dist/morpheus.module.js 49:0-60
 @ /Users/me/myPackage/dist/index.js
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts
webpack: Failed to compile.

Have you tried deleting the `node_modules` folder and running `npm install` again? — Kim Kern, Jan 16 '18 at 23:29

score 0 · Answer 1 · answered Jan 17 '18 at 17:59

You need to move some dependencies from devDependencies to either dependencies or peerDependencies (according to your requirements). This regards dependencies, that need to be available in the project that uses your package. Also, you should not have them in both groups, as e. g. "@angular/material": "^5.0.4".

Most of your dependencies should probably be peerDependencies, such that those dependencies won't be installed multiple times in different versions in the project that uses your package.

For further information about the differences, have a look at this SO answer.

Module not found: Error: Can't resolve '@angular/material' when building dist for npm package

1 Answers1