Angular 12 Schematics throws error: Cannot find module 'bluebird'

[mraible]

🐞 Bug report

Command (mark with an x)

• add

Is this a regression?

Yes.

Description

I created OktaDev Schematics as a way to add authentication with Okta to new apps that are created with a framework's respective CLI (e.g., Angular CLI, Create React App, Vue CLI, etc.).

Yesterday, I discovered it doesn't work with Angular CLI v12 RC1.

$ ng add @oktadev/schematics
ℹ Using package manager: npm
✔ Found compatible package version: @oktadev/[email protected].
✔ Package information loaded.

The package @oktadev/[email protected] will be installed and executed.
Would you like to proceed? Yes
✔ Package successfully installed.
? What is your OIDC app's issuer URL? foo
? What is your OIDC app's client ID? bar
Cannot find module 'bluebird'
Require stack:
- /Users/mraible/foo/node_modules/@schematics/update/node_modules/pacote/extract.js
- /Users/mraible/foo/node_modules/@schematics/update/node_modules/pacote/index.js
- /Users/mraible/foo/node_modules/@schematics/update/update/npm.js
- /Users/mraible/foo/node_modules/schematics-utilities/dist/package_update/npm.js
- /Users/mraible/foo/node_modules/schematics-utilities/dist/package_update/index.js
- /Users/mraible/foo/node_modules/schematics-utilities/dist/index.js
- /Users/mraible/foo/node_modules/@oktadev/schematics/src/add-auth/index.js
- /Users/mraible/foo/node_modules/@angular-devkit/schematics/tools/export-ref.js
- /Users/mraible/foo/node_modules/@angular-devkit/schematics/tools/index.js
- /Users/mraible/foo/node_modules/@angular/cli/utilities/json-schema.js
- /Users/mraible/foo/node_modules/@angular/cli/models/command-runner.js
- /Users/mraible/foo/node_modules/@angular/cli/lib/cli/index.js
- /usr/local/lib/node_modules/@angular/cli/lib/init.js
- /usr/local/lib/node_modules/@angular/cli/bin/ng

🔬 Minimal Reproduction

Steps to reproduce:

npm i -g @angular/cli@next
ng new foo --routing --style css
ng add @oktadev/schematics

It doesn't happen if I use Angular CLI v11.2.11.

$ ng add @oktadev/schematics
ℹ Using package manager: npm
✔ Found compatible package version: @oktadev/[email protected].
✔ Package information loaded.
✔ Package successfully installed.
? What is your OIDC app's issuer URL? foo
? What is your OIDC app's client ID? bar
            ✅️ Added '@okta/okta-angular' into dependencies
            🔍 Installing packages...
CREATE src/app/auth-routing.module.ts (1174 bytes)
CREATE src/app/home/home.component.html (186 bytes)
CREATE src/app/home/home.component.spec.ts (1027 bytes)
CREATE src/app/home/home.component.ts (638 bytes)
CREATE src/app/home/home.component.css (0 bytes)
CREATE src/app/shared/okta/auth.interceptor.ts (1019 bytes)
UPDATE src/app/app.module.ts (475 bytes)
UPDATE package.json (1276 bytes)
UPDATE src/app/app.component.spec.ts (1386 bytes)
UPDATE src/app/app.component.ts (603 bytes)
✔ Packages installed successfully.
Execution time: 19 s.

🔥 Exception or Error

Cannot find module 'bluebird'
Require stack:
- /Users/mraible/foo/node_modules/@schematics/update/node_modules/pacote/extract.js
- /Users/mraible/foo/node_modules/@schematics/update/node_modules/pacote/index.js

🌍 Your Environment

Angular CLI: 12.0.0-rc.1
Node: 14.16.1
Package Manager: npm 7.11.2
OS: darwin x64

Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1200.0-rc.1 (cli-only)
@angular-devkit/core         12.0.0-rc.1 (cli-only)
@angular-devkit/schematics   12.0.0-rc.1 (cli-only)
@schematics/angular          12.0.0-rc.1 (cli-only)

Anything else relevant?

I commented here yesterday, but figured it might be better to open a new issue.

/cc @mgechev

[clydin]

From the log output, it appears that the schematics-utilities package may not be compatible with v12.
It seems to be depending on older, unsupported versions of the Angular packages.
From the version 2.0.3 package.json:

  "dependencies": {
    "@angular-devkit/core": "^8.3.8",
    "@angular-devkit/schematics": "^8.3.8",
    "@schematics/angular": "^8.3.8",
    "@schematics/update": "^0.803.8",
    "rxjs": "^6.4.0",
    "typescript": "^3.6.3"
  },

[mraible]

Adding @nitayneeman to this thread since they're the maintainer of schematics-utilities.

Nitay, do you have a plan to make things work with Angular 12?

[nitayneeman]

@mraible There is a plan to upgrade the dependencies to v10 but just bumping them isn't so straightforward since there were breaking changes.

It can be considered to align with v12 directly but again depending on the amount of breaking changes/complexity they bring up. Probably will happen in the next major version of schematic-utilities.

Honestly my capacity is pretty limited, so any help would be much appreciated.

[alan-agius4]

Closing this issue. Since this is not actionable by the Angular tooling team.

[mraible]

@nitayneeman Thanks for your honesty. I think I can remove schematics-utilities and replace it with @angular/cdk. See oktadev/schematics#569 for more info.

[alan-agius4]

@mraible,

Please be aware that both of the below entrypoints are private APIs and can be changed or removed without warning at anytime include private versions.

Moreover, the CDK is not meant to be used in Schematics. It’s intention is to be used for component development. In this case you are just using a private utility function that is using in their schematics.

import { addPackageJsonDependency, NodeDependency, NodeDependencyType } from '@schematics/angular/utility/dependencies';
import { addModuleImportToModule } from '@angular/cdk/schematics';

[mraible]

@alan-agius4 Thanks for the advice. I believe schematics-utilities just copies those classes and freezes them in a sense. Hopefully, with OktaDev's Schematics robust CI process, I'll be notified when the CDK changes anything. In the meantime, are you aware of any public utilities that make it easy to add a module import to a module?

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}