ng-universal icon indicating copy to clipboard operation
ng-universal copied to clipboard

The @nestjs/ng-universal package is not installing correctly in angular 13 getting Package subpath './schematics/utils' is not defined by "exports" in

Open KiamboJyms opened this issue 3 years ago • 25 comments

I'm submitting a...

I have tried to install @nestjs/ng-universal in an an angular 13 project. After running ng add @nestjs/ng-universal ` the package seems to install and it says Package successfully installed but then brings in an error

An unhandled exception occurred: Package subpath './schematics/utils' is not defined by "exports" in C:\Users\ADMIN\kiambol\node_modules@nguniversal\express-engine\package.json See "C:\Users\ADMIN\AppData\Local\Temp\ng-1gySjP\angular-errors.log" for further details.

Looking at the angular-errors.log file, the full error is:

[error] Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './schematics/utils' is not defined by "exports" in C:\Users\ADMIN\kiambol\node_modules@nguniversal\express-engine\package.json at throwExportsNotFound (internal/modules/esm/resolve.js:299:9) at packageExportsResolve (internal/modules/esm/resolve.js:522:3) at resolveExports (internal/modules/cjs/loader.js:449:36) at Function.Module._findPath (internal/modules/cjs/loader.js:489:31) at Function.Module._resolveFilename (internal/modules/cjs/loader.js:875:27) at Function.Module._load (internal/modules/cjs/loader.js:745:27) at Module.require (internal/modules/cjs/loader.js:961:19) at require (internal/modules/cjs/helpers.js:92:18) at Object. (C:\Users\ADMIN\kiambol\node_modules@nestjs\ng-universal\schematics\install\index.js:15:17) at Module._compile (internal/modules/cjs/loader.js:1072:14)

Expected behaviour The package was expected to install correctly install all dependencies and create the server files. It does not create the server folder and the server file.

I wanted to test the npm package that uses @nguniversal/express-engine and used ng add to see if my project is correctly configured and found out that @nguniversal/express-engine works correctly. I came in to a conclusion that the nestjs universal package might not be compatible with angular 13 yet.

Am I doing anything wrong?

I had tried to create new projects to test it and still arrived at the same error. Please help out I like using Nestjs though it seems at the moment am going to do the current server rendered angular project with @nguniversal/express-engine

Tools I am using Nodejs version 14.17.6, Angular 13 and Windows 11

KiamboJyms avatar Nov 20 '21 11:11 KiamboJyms

+1

ggarg2 avatar Nov 23 '21 09:11 ggarg2

I've found that maybe the error is because of @nestjs/ng-universal v6.0.0 and I made the following tests:

Using @angular/cli@13 and then ng add @nestjs/ng-universal@6 produced the error. Using @angular/cli@12 and then ng add @nestjs/ng-universal@6 produced the error. Using @angular/cli@12 and then ng add @nestjs/ng-universal@5 had no error. Using @angular/cli@13 and then ng add @nestjs/ng-universal@5 had no error.

Maybe that will help.

D-LUSiON avatar Nov 24 '21 10:11 D-LUSiON

I get the same error. I'm using Nodejs 16.13.0, Angular 13 and Ubuntu 20.04

mattndr avatar Nov 26 '21 18:11 mattndr

I've found that maybe the error is because of @nestjs/ng-universal v6.0.0 and I made the following tests:

Using @angular/cli@13 and then ng add @nestjs/ng-universal@6 produced the error. Using @angular/cli@12 and then ng add @nestjs/ng-universal@6 produced the error. Using @angular/cli@12 and then ng add @nestjs/ng-universal@5 had no error. Using @angular/cli@13 and then ng add @nestjs/ng-universal@5 had no error.

Maybe that will help.

Your forth option will also produce an because the dependencies do not match that is angular 12 and angular 13. @nestjs/ng-universal@5 use angular 12 and you are trying to add it to an angular 13 project.

KiamboJyms avatar Nov 27 '21 09:11 KiamboJyms

Has anybody from the team had a look at this issue yet?

ashwingairola avatar Nov 29 '21 05:11 ashwingairola

It seems that ng add will take some time to be sorted to enable it to configure @nestjs/ng-universal.

Before then; how do I install and configure @nestjs/ng-universal manually for @angular/cli@13.

KiamboJyms avatar Dec 11 '21 12:12 KiamboJyms

Has anybody from the team had a look at this issue yet?

KiamboJyms avatar Dec 24 '21 17:12 KiamboJyms

@KiamboJyms Did you ever get this working? Based on the Stack Overflow question here, it is still broken:

https://stackoverflow.com/questions/70052219/angular-13-does-not-work-with-nestjs-ng-universal-but-works-correctly-with-ngu

Exac avatar Jan 06 '22 18:01 Exac

Okay, I notice in your response you say it does not work for you, but following the instructions from HiDDeN, I was able to get it to work. I believe you missed the last step:

and by updating the packages it should revert the changes before running npm run dev:ssr.

Exac avatar Jan 08 '22 04:01 Exac

@kamilmysliwiec could you take a look at this?

natejgardner avatar Jan 13 '22 15:01 natejgardner

If I understood correctly then this issue should be soon resolved by @nguniversal\express-engine. This seems to be the fix: https://github.com/angular/universal/issues/2491 and it is currently available as v13.1.0-next.1

6matko avatar Feb 01 '22 21:02 6matko

If I understood correctly then this issue should be soon resolved by @nguniversal\express-engine. This seems to be the fix: angular/universal#2491 and it is currently available as v13.1.0-next.1

as far as I understand, that is a different error

Mephiztopheles avatar Feb 04 '22 19:02 Mephiztopheles

Hi, I'm having the same problem also. However, for my case, angular universal was already installed beforehand.

juliusgambe avatar Feb 08 '22 00:02 juliusgambe

I found a way to fix the schematics issue.

First you need to follow the top answer here on Stackoverflow: https://stackoverflow.com/questions/70052219/angular-13-does-not-work-with-nestjs-ng-universal-but-works-correctly-with-ngu . This makes it possible to install the NestJS ng-universal schematic (at least it did for me).

Now if you run the following commands: npm run build:ssr and then the npm run serve:ssr it should produce an error (for me it was an IDBIndex error). I then fixed this error by following a fix I found on GitHub: https://github.com/angular/universal/issues/2475#issuecomment-1002451877 . Basically you need to make a custom webpack file and configure the angular.json accordingly.

For me (aside from some Buffer deprecation warnings) the server works perfectly.

Kvaara avatar Mar 04 '22 23:03 Kvaara

@6matko i tried to install ng add @nguniversal/[email protected] and then installed ng add @nestjs/ng-universal but i get the same error

jearangoo avatar May 01 '22 23:05 jearangoo

Almost year later, same problem..

@angular-devkit/architect       0.1401.0
@angular-devkit/build-angular   14.1.0
@angular-devkit/core            14.1.0
@angular-devkit/schematics      14.0.7
@angular/cli                    14.0.7
@schematics/angular             14.0.7
rxjs                            7.5.6
typescript                      4.7.4

node v16.13.1

ng add @nestjs/ng-universal
ℹ Using package manager: npm
✔ Package information loaded.

The package @nestjs/[email protected] will be installed and executed.
Would you like to proceed? Yes
✔ Packages successfully installed.
Package subpath './schematics/utils' is not defined by "exports" in **\node_modules\@nguniversal\express-engine\package.json

pazdernikpavel avatar Jul 29 '22 19:07 pazdernikpavel

have same problem, please tell anyone got solution on this

UJadhav01 avatar Aug 13 '22 11:08 UJadhav01

The same problem here. It would be nice if someone from nestjs team take a look at this issue.

ducdv98 avatar Sep 01 '22 15:09 ducdv98

the same here with Angular 14 !!!

its-dibo avatar Oct 07 '22 12:10 its-dibo

Getting the same error on Angular fresh Angular 14 project

Node: 16.18.0
Package Manager: npm 8.19.2
OS: darwin x64

Angular: 14.2.6
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1402.6
@angular-devkit/build-angular   14.2.6
@angular-devkit/core            14.2.6
@angular-devkit/schematics      14.2.6
@schematics/angular             14.2.6
rxjs                            7.5.7
typescript                      4.7.4```

Commands to reproduce:

ng new tmsweb --style scss --routing true
cd ./tmsweb
ng add @nestjs/ng-universal

Output:

➜  ~ ng new tmsweb --style scss --routing true
CREATE tmsweb/README.md (1068 bytes)
CREATE tmsweb/.editorconfig (274 bytes)
CREATE tmsweb/.gitignore (548 bytes)
CREATE tmsweb/angular.json (3138 bytes)
CREATE tmsweb/package.json (1047 bytes)
CREATE tmsweb/tsconfig.json (863 bytes)
CREATE tmsweb/.browserslistrc (600 bytes)
CREATE tmsweb/karma.conf.js (1433 bytes)
CREATE tmsweb/tsconfig.app.json (287 bytes)
CREATE tmsweb/tsconfig.spec.json (333 bytes)
CREATE tmsweb/.vscode/extensions.json (130 bytes)
CREATE tmsweb/.vscode/launch.json (474 bytes)
CREATE tmsweb/.vscode/tasks.json (938 bytes)
CREATE tmsweb/src/favicon.ico (948 bytes)
CREATE tmsweb/src/index.html (300 bytes)
CREATE tmsweb/src/main.ts (372 bytes)
CREATE tmsweb/src/polyfills.ts (2338 bytes)
CREATE tmsweb/src/styles.scss (80 bytes)
CREATE tmsweb/src/test.ts (749 bytes)
CREATE tmsweb/src/assets/.gitkeep (0 bytes)
CREATE tmsweb/src/environments/environment.prod.ts (51 bytes)
CREATE tmsweb/src/environments/environment.ts (658 bytes)
CREATE tmsweb/src/app/app-routing.module.ts (245 bytes)
CREATE tmsweb/src/app/app.module.ts (393 bytes)
CREATE tmsweb/src/app/app.component.scss (0 bytes)
CREATE tmsweb/src/app/app.component.html (23115 bytes)
CREATE tmsweb/src/app/app.component.spec.ts (1097 bytes)
CREATE tmsweb/src/app/app.component.ts (219 bytes)
✔ Packages installed successfully.
    Successfully initialized git.
➜  ~ cd tmsweb
➜  tmsweb git:(master) ng add @nestjs/ng-universal
? Would you like to share pseudonymous usage data about this project with the Angular Team
at Google under Google's Privacy Policy at https://policies.google.com/privacy. For more
details and how to change this setting, see https://angular.io/analytics. Yes

Thank you for sharing pseudonymous usage data. Should you change your mind, the following
command will disable this feature entirely:

    ng analytics disable

Global setting: enabled
Local setting: enabled
Effective status: enabled
ℹ Using package manager: npm
âš  Unable to find compatible package. Using 'latest' tag.
âš  Package has unmet peer dependencies. Adding the package may not succeed.

The package @nestjs/[email protected] will be installed and executed.
Would you like to proceed? Yes
✔ Packages successfully installed.
Package subpath './schematics/utils' is not defined by "exports" in node_modules/@nguniversal/express-engine/package.json 

kielsoft avatar Oct 17 '22 15:10 kielsoft

Same error with Angular 14.2.10. None of the mentioned "fix" worked for me.

hafnerpw avatar Nov 12 '22 07:11 hafnerpw

Running Angular 14.0.5 , exact same error on my end

HayleTeam avatar Nov 26 '22 04:11 HayleTeam

The same error for Angular 15 (and NX repo)

Tilesto avatar Dec 25 '22 13:12 Tilesto

Temporary workaround:

  1. Install manually npm i -D @nguniversal/express-engine
  2. Go to node_modules/@nguniversal/express-engine/package.json
  3. Add line "./schematics/utils": "./schematics/utils/index.js" to "exports"
  4. Run ng add @nestjs/ng-universal

sviat9440 avatar Feb 24 '23 06:02 sviat9440

Still having this issue. @sviat9440's answer helped me get past the first bump. 🙂

Angular: 16.0.4 NX: 16.3.2 node: 18.15.0 npm: 9.5.0 pnpm: 8.2.0 @nestjs/ng-universal: 7.1.1

rujorgensen avatar Jun 08 '23 13:06 rujorgensen