Search code examples
node.jsangularangular-material2angular-cdk

use modified angular cdk module in other project locally


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 :-)


Solution

  • 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.