0

I have forked, cloned and modified the angular material repository to suit my needs. Code in the dev-app runs fine.

Now I want to use this module, more precisely the DragDropmodule of @angular/cdk, in another angular app I am working on.

I therefore ran gulp cdk:build-release and obtained the dist/releases/cdk folder containing built modules.

How do I use this compiled module's DragDropModule in my other project now? I tried npm link. This works to some extent as I can import the module now by

import { DragDropModule } from 'material2c/dist/releases/cdk/drag-drop';

However, trying ng serve gives a bunch of errors

ERROR in C:/Users/admin/Documents/material2/dist/releases/cdk/esm5/drag-drop.es5.js Module not found: Error: Can't resolve '@angular/cdk/bidi' in 'C:\Users\admin\Documents\material2\dist\releases\cdk\esm5' ERROR in C:/Users/admin/Documents/material2/dist/releases/cdk/esm5/drag-drop.es5.js Module not found: Error: Can't resolve '@angular/cdk/coercion' in 'C:\Users\admin\Documents\material2\dist\releases\cdk\esm5' ERROR in C:/Users/admin/Documents/material2/dist/releases/cdk/esm5/drag-drop.es5.js Module not found: Error: Can't resolve '@angular/cdk/platform' in 'C:\Users\admin\Documents\material2\dist\releases\cdk\esm5' ERROR in C:/Users/admin/Documents/material2/dist/releases/cdk/esm5/drag-drop.es5.js Module not found: Error: Can't resolve '@angular/cdk/scrolling' in 'C:\Users\admin\Documents\material2\dist\releases\cdk\esm5'

Any help appreciated :-)

mad
  • 3,493
  • 4
  • 23
  • 31
  • coud you create a github/stackblitz example for the same ? It will hepl us know where exactly the issue is coming from. Reading the consolable logs is not giving a full picture – Ankesh Dec 29 '18 at 17:48

1 Answers1

1

The import should remain the same if the project is correctly linked. Eg:

import { DragDropModule } from '@angular/cdk'

This is because npm link creates a link from the linked project to ./node_modules/@angular/cdk in the target project.

If you need to share the module around, you may be interested in running npm pack in the dist directory of the module, which should output a tarball that you can then npm install to your project and easily share with other people.

Michael
  • 2,189
  • 16
  • 23
  • Hi Michael, thanks for the answer. I had no luck linking it with npm/yarn directly. When doing `npm pack`, putting the tgz to the product folder and including it as a devDependency, it worked. Do you know why? – mad Dec 30 '18 at 13:29
  • Try running `npm link ../../path/to/dist/dir` in the project directory you're trying to link into – Michael Dec 30 '18 at 14:21
  • thanks, the trick was to allow preserving symlinks in the angular.json file. Described here: https://stackoverflow.com/a/53123513/537865 – mad Dec 30 '18 at 15:06