Cannot find module 'schematics-utilities' when using ng add

[shanmukhateja]

I've recently added ng add support to angular-datatables project and my PR for it had been merged recently but I'm getting the following error when trying to install the package to clean Angular project.

Error: An unhandled exception occurred: Cannot find module 'schematics-utilities'

Stack Trace:

[error] Error: Cannot find module 'schematics-utilities'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
    at Function.Module._load (internal/modules/cjs/loader.js:562:25)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (/home/suryateja/myproject/node_modules/angular-datatables/schematics/src/ng-add/index.js:4:32)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at new ExportStringRef (/home/suryateja/myproject/node_modules/@angular-devkit/schematics/tools/export-ref.js:18:25)
    at NodeModulesEngineHost._resolveReferenceString (/home/suryateja/myproject/node_modules/@angular-devkit/schematics/tools/node-module-engine-host.js:94:21)
    at NodeModulesEngineHost.createSchematicDescription (/home/suryateja/myproject/node_modules/@angular-devkit/schematics/tools/file-system-engine-host-base.js:179:34)
    at SchematicEngine.createSchematic (/home/suryateja/myproject/node_modules/@angular-devkit/schematics/src/engine/engine.js:219:38)

Steps to Reproduce:

1. Create a empty Angular project: ng new myproject
2. Run the ng add command:

   cd myproject
   ng add angular-datatables

[nitayneeman]

Hey,

This library is merely a collection of utilities for working with Schematics, nothing more. You apparently need to bundle the dist files of your package in a consumable way (and schematics-utilities provides you some handy functions that might assist). This means, you should publish your package with sort of schematics directory.

Actually I wrote a post that covers this: https://nitayneeman.com/posts/making-an-addable-angular-package-using-schematics

Also, you can check out the following project - which demonstrates a concrete package with ng-add: https://github.com/nitayneeman/angular-addable-package-example

[shanmukhateja]

Hey!

I used the very same article as reference to create the ng-add schematics to angular-datatables and I think I understand the problem now.

In your post, you're using webpack to "bundle" all the necessary code into schematics/ng-add/index.js in such a way that we wouldn't need schematics-utilities package.

Any chance this could be done without introducing webpack? The project uses rollup to bundle the lib.

I tried rollup with this config:

rollup.schm.conf.js

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import json from '@rollup/plugin-json';

export default {
  input: './ng-add/index.js',
  output: {
    file: 'bundles/bundle.js',
    name: 'angular.datatables.schematics',
    format: 'cjs'
  },
  external: [
    '@angular/core',
    '@angular/platform-browser',
    '@angular-devkit/core',
    '@angular-devkit/schematics',
    '@schematics/cli',
    'chokidar',
    '@angular/common',
    'rxjs',
    'jquery'
  ],
  plugins: [
    commonjs(),
    resolve({
      preferBuiltins: true,
      mainFields: [''],
    }),
    json()
  ]
}

However, the output file is 18MB in size. Some help please?

[Antarus66]

Hi there! Regretfully, I have the same problem. Has anyone resolved this?

[shanmukhateja]

A workaround for now is to install schematics-utilities using:

npm i -D schematics-utilities

Adter job's done, remove the package.

[shanmukhateja]

I'm closing this issue as we moved away from using this package and implementing the necessary minimal functionality based on ngx-bootstrap and we do not face this issue anymore.