search

kamilkisiela / apollo-angular

A fully-featured, production ready caching GraphQL client for Angular and every GraphQL server 🎁
https://apollo-angular.com
MIT License
1.5k stars 311 forks source link

ng add is failing again #1848

Closed danielzgtg closed 1 year ago

danielzgtg commented 1 year ago

Describe the bug

ng add apollo-angular crashes even on a new project.

This seems to be a regression in v4 after #1760 fixed it in v3. No, this is Angular 14 so it's not the Angular 15 issue.

To Reproduce Steps to reproduce the behavior:

  1. ng new test123
  2. cd test123
  3. ng add apollo-angular
home@daniel-tablet1:/run/user/1000$ ng new test123
? Would you like to add Angular routing? No
? Which stylesheet format would you like to use? CSS
CREATE test123/README.md (1062 bytes)
CREATE test123/.editorconfig (274 bytes)
CREATE test123/.gitignore (548 bytes)
CREATE test123/angular.json (2927 bytes)
CREATE test123/package.json (1040 bytes)
CREATE test123/tsconfig.json (863 bytes)
CREATE test123/.browserslistrc (600 bytes)
CREATE test123/karma.conf.js (1424 bytes)
CREATE test123/tsconfig.app.json (287 bytes)
CREATE test123/tsconfig.spec.json (333 bytes)
CREATE test123/.vscode/extensions.json (130 bytes)
CREATE test123/.vscode/launch.json (474 bytes)
CREATE test123/.vscode/tasks.json (938 bytes)
CREATE test123/src/favicon.ico (948 bytes)
CREATE test123/src/index.html (293 bytes)
CREATE test123/src/main.ts (372 bytes)
CREATE test123/src/polyfills.ts (2338 bytes)
CREATE test123/src/styles.css (80 bytes)
CREATE test123/src/test.ts (749 bytes)
CREATE test123/src/assets/.gitkeep (0 bytes)
CREATE test123/src/environments/environment.prod.ts (51 bytes)
CREATE test123/src/environments/environment.ts (658 bytes)
CREATE test123/src/app/app.module.ts (314 bytes)
CREATE test123/src/app/app.component.css (0 bytes)
CREATE test123/src/app/app.component.html (23083 bytes)
CREATE test123/src/app/app.component.spec.ts (959 bytes)
CREATE test123/src/app/app.component.ts (211 bytes)
✔ Packages installed successfully.
    Successfully initialized git.
home@daniel-tablet1:/run/user/1000$ cd test123
home@daniel-tablet1:/run/user/1000/test123$ ng add apollo-angular
ℹ Using package manager: npm
✔ Found compatible package version: apollo-angular@4.1.1.
✔ Package information loaded.

The package apollo-angular@4.1.1 will be installed and executed.
Would you like to proceed? Yes
✔ Packages successfully installed.
Cannot find module '/run/user/1000/test123/node_modules/apollo-angular/schematics/install/index'
Require stack:
- /run/user/1000/test123/node_modules/@angular/cli/src/command-builder/utilities/schematic-engine-host.js
- /run/user/1000/test123/node_modules/@angular/cli/src/command-builder/schematics-command-module.js
- /run/user/1000/test123/node_modules/@angular/cli/src/commands/add/cli.js
- /run/user/1000/test123/node_modules/@angular/cli/src/command-builder/command-runner.js
- /run/user/1000/test123/node_modules/@angular/cli/lib/cli/index.js
- /home/home/.nvm/versions/node/v18.10.0/lib/node_modules/@angular/cli/lib/init.js
home@daniel-tablet1:/run/user/1000/test123$ ng --version
Error: You need to specify a command before moving on. Use '--help' to view the available commands.
home@daniel-tablet1:/run/user/1000/test123$ ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/

Angular CLI: 14.2.10
Node: 18.10.0 (Unsupported)
Package Manager: npm 8.19.2 
OS: linux x64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1402.10
@angular-devkit/build-angular   14.2.10
@angular-devkit/core            14.2.10
@angular-devkit/schematics      14.2.10
@angular/cli                    14.2.10
@schematics/angular             14.2.10
rxjs                            7.5.7
typescript                      4.7.4

Warning: The current version of Node (18.10.0) is not supported by Angular.
home@daniel-tablet1:/run/user/1000/test123$ cat package.json
{
  "name": "test123",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^14.2.0",
    "@angular/common": "^14.2.0",
    "@angular/compiler": "^14.2.0",
    "@angular/core": "^14.2.0",
    "@angular/forms": "^14.2.0",
    "@angular/platform-browser": "^14.2.0",
    "@angular/platform-browser-dynamic": "^14.2.0",
    "@angular/router": "^14.2.0",
    "apollo-angular": "^4.1.1",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^14.2.10",
    "@angular/cli": "~14.2.10",
    "@angular/compiler-cli": "^14.2.0",
    "@types/jasmine": "~4.0.0",
    "jasmine-core": "~4.3.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "typescript": "~4.7.2"
  }
}

Expected behavior

It should finish without printing errors.

None of the other things I've added to other projects using ng add have crashed with this setup.

Environment:

test123@0.0.0 /run/user/1000/test123
├── @angular/cli@14.2.10
├── @angular/core@14.2.11
├── apollo-angular@4.1.1
└── typescript@4.7.4
PowerKiKi commented 1 year ago

I can indeed reproduce locally with ng 14.2, but strangely enough the CI will pass all tests with ng 14, 15 and node 16, 18. I am not quite sure where to go from there, so any help would be appreciated...

geromegrignon commented 1 year ago

I would downgrade the node version to 16. node 18 support starts with Angular 15.

danielzgtg commented 1 year ago

I have moved on to Angular 15 and Node 19.1.0. I can't downgrade my node at all. I have a lot of packages installed globally on my desktop, and my automated scripts assume there will only be one version installed in nvm. My own code also assumes Node is always the latest and will freely depend on latest API. Basically if I touch the version I might not even be able to log in anymore, similar to last time I changed my version of rust and ls and git subcommands stopped working. I would rather manually add the packages using npm i.

I narrowed down the reproduction to just ng g apollo-angular:ng-add. This will allow for faster testing. Attempting to work around this with ts-node gave an import error. I see there is schematics/install/index.ts.

Publishing .ts files to npm is considered harmful:

Other packages do not include .ts files in their packages published to npm. .d.ts files are fine as they don't run. @angular/cdk makes sure to compile their index.ts file into index.js before publishing. The root cause of our problems in this issue is that we need to also transpiling apollo-angular's index.ts into index.js.

PowerKiKi commented 1 year ago

Then it seems it is related to https://github.com/kamilkisiela/apollo-angular/discussions/1852

@kamilkisiela can you share something on why sources were included in the latest release ? was it a mistake ?

PowerKiKi commented 1 year ago

Solved in 4.2.0