search

imagekit-developer / imagekit-angular

Angular SDK for ImageKit.io client side file upload and URL generation
https://imagekit.io
18 stars 20 forks source link

Compilation fails due to missing generic type #60

Closed johnnygerard closed 1 year ago

johnnygerard commented 1 year ago

The compilation error is related to a deprecated API: ModuleWithProviders type without a generic.

Angular error:

Error: node_modules/imagekitio-angular/imagekitio-angular/imagekitio-angular.module.d.ts:4:52 - 
error NG6005: ImagekitioAngularModule.forRoot returns a ModuleWithProviders type without a generic type argument.
Please add a generic type argument to the ModuleWithProviders type.
If this occurrence is in library code you don't control, please contact the library authors.

4     static forRoot(config: ImageKitConfiguration): ModuleWithProviders;

TypeScript error:

Error: node_modules/imagekitio-angular/imagekitio-angular/imagekitio-angular.module.d.ts:4:52 - 
error TS2314: Generic type 'ModuleWithProviders<T>' requires 1 type argument(s).

4     static forRoot(config: ImageKitConfiguration): ModuleWithProviders;
johnnygerard commented 1 year ago

For additional context, I ran into this issue while following the Angular quick start guide.

Environment Angular CLI: 16.0.0 Node: 18.16.0

endersaka commented 1 year ago

I can confirm same error:

npm start

> smartphotocropper@0.0.0 start
> ng serve

? 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
✔ Browser application bundle generation complete.

Initial Chunk Files   | Names         |  Raw Size
vendor.js             | vendor        |   2.31 MB |
polyfills.js          | polyfills     | 333.00 kB |
styles.css, styles.js | styles        | 230.76 kB |
main.js               | main          |  47.65 kB |
runtime.js            | runtime       |   6.53 kB |

                      | Initial Total |   2.92 MB

Build at: 2023-06-26T06:59:12.211Z - Hash: a48caa0a7ed0885c - Time: 15158ms

Warning: D:\Documents\Dev\projects\ai\imagekit\smartphotocropper\src\app\app.module.ts depends on 'imagekitio-angular'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Error: node_modules/imagekitio-angular/imagekitio-angular/imagekitio-angular.module.d.ts:4:52 - error NG6005: ImagekitioAngularModule.forRoot returns a ModuleWithProviders type without a generic type argument. Please add a generic type argument to the ModuleWithProviders type. If this occurrence is in library code you don't control, please contact the library authors.

4     static forRoot(config: ImageKitConfiguration): ModuleWithProviders;
                                                     ~~~~~~~~~~~~~~~~~~~

Error: node_modules/imagekitio-angular/imagekitio-angular/imagekitio-angular.module.d.ts:4:52 - error TS2314: Generic type 'ModuleWithProviders<T>' requires 1 type argument(s).

4     static forRoot(config: ImageKitConfiguration): ModuleWithProviders;
                                                     ~~~~~~~~~~~~~~~~~~~

Error: src/app/app.component.html:428:25 - error NG8002: Can't bind to 'ngSwitch' since it isn't a known property of 'div'.

428   <div class="terminal" [ngSwitch]="selection.value">
                            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/app.component.ts:5:16
    5   templateUrl: './app.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AppComponent.

Error: src/app/app.component.html:484:1 - error NG8001: 'router-outlet' is not a known element:
1. If 'router-outlet' is an Angular component, then verify that it is part of this module.
2. If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

484 <router-outlet></router-outlet>
    ~~~~~~~~~~~~~~~

  src/app/app.component.ts:5:16
    5   templateUrl: './app.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AppComponent.

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

× Failed to compile.
endersaka commented 1 year ago

From further investigation I found this page ModuleWithProviders Migration, though, honestly I am not so familiar with Angular framework and so I don't know if I would be able to fix it myself in a reasonable time frame.

endersaka commented 1 year ago

I tried to compile stefanodenti's fork with no success.

npm run build

> imagekitio-angular@2.0.0 build /mnt/e/Documents/Dev/GitHub/stefanodenti/imagekit-angular/sdk
> rimraf dist && ng-packagr -p lib/package.json && npm run assets

Building Angular library
Generating bundle for imagekitio-angular
Cleaning bundle build directory
Processing assets
Running ngc

BUILD ERROR
Error at /mnt/e/Documents/Dev/GitHub/stefanodenti/imagekit-angular/sdk/lib/.ng_pkg_build/imagekitio-angular/ts/src/imagekitio-angular/imagekitio-angular.module.ts:17:50: Type 'ModuleWithProviders' is not generic.
Error: Error at /mnt/e/Documents/Dev/GitHub/stefanodenti/imagekit-angular/sdk/lib/.ng_pkg_build/imagekitio-angular/ts/src/imagekitio-angular/imagekitio-angular.module.ts:17:50: Type 'ModuleWithProviders' is not generic.
    at new UserError (/mnt/e/Documents/Dev/GitHub/stefanodenti/imagekit-angular/sdk/node_modules/@angular/tsc-wrapped/src/tsc.js:27:28)
    at check (/mnt/e/Documents/Dev/GitHub/stefanodenti/imagekit-angular/sdk/node_modules/@angular/tsc-wrapped/src/tsc.js:93:15)
    at Tsc.typeCheck (/mnt/e/Documents/Dev/GitHub/stefanodenti/imagekit-angular/sdk/node_modules/@angular/tsc-wrapped/src/tsc.js:173:9)
    at /mnt/e/Documents/Dev/GitHub/stefanodenti/imagekit-angular/sdk/node_modules/@angular/tsc-wrapped/src/main.js:122:23

npm ERR! code ELIFECYCLE
npm ERR! errno 111
npm ERR! imagekitio-angular@2.0.0 build: `rimraf dist && ng-packagr -p lib/package.json && npm run assets`
npm ERR! Exit status 111
npm ERR!
npm ERR! Failed at the imagekitio-angular@2.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/nojrotit/.npm/_logs/2023-08-02T10_01_14_914Z-debug.log

File /home/nojrotit/.npm/_logs/2023-08-02T10_01_14_914Z-debug.log.

0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli   '/home/nojrotit/.nvm/versions/node/v14.21.3/bin/node',
1 verbose cli   '/home/nojrotit/.nvm/versions/node/v14.21.3/bin/npm',
1 verbose cli   'run',
1 verbose cli   'build'
1 verbose cli ]
2 info using npm@6.14.18
3 info using node@v14.21.3
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle imagekitio-angular@2.0.0~prebuild: imagekitio-angular@2.0.0
6 info lifecycle imagekitio-angular@2.0.0~build: imagekitio-angular@2.0.0
7 verbose lifecycle imagekitio-angular@2.0.0~build: unsafe-perm in lifecycle true
8 verbose lifecycle imagekitio-angular@2.0.0~build: PATH: /home/nojrotit/.nvm/versions/node/v14.21.3/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/mnt/e/Documents/Dev/GitHub/stefanodenti/imagekit-angular/sdk/node_modules/.bin:/home/nojrotit/.config/composer/vendor/bin:/home/nojrotit/.nvm/versions/node/v14.21.3/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/usr/lib/wsl/lib:/mnt/c/Program Files/NVIDIA GPU Computing Toolkit/CUDA/v11.6/bin:/mnt/c/Program Files/NVIDIA GPU Computing Toolkit/CUDA/v11.6/libnvvp:/mnt/c/Program Files (x86)/Common Files/Oracle/Java/javapath:/mnt/c/windows/system32:/mnt/c/windows:/mnt/c/windows/System32/Wbem:/mnt/c/windows/System32/WindowsPowerShell/v1.0/:/mnt/c/windows/System32/OpenSSH/:/mnt/d/Program Files/Microsoft VS Code/bin:/mnt/d/Program Files/Git/cmd:/mnt/d/Program Files/xampp/php:/mnt/c/ProgramData/ComposerSetup/bin:/mnt/c/Program Files (x86)/NVIDIA Corporation/PhysX/Common:/mnt/c/Program Files/NVIDIA Corporation/NVIDIA NvDLISR:/mnt/c/Program Files/dotnet/:/mnt/d/Program Files (x86)/Java/jre1.8.0_341/bin:/mnt/d/Program Files:/mnt/c/Program Files:/mnt/d/Program Files/Meld/:/mnt/c/Program Files/NVIDIA Corporation/Nsight Compute 2022.1.1/:/mnt/c/Program Files (x86)/WinSCP/:/mnt/c/ProgramData/chocolatey/bin:/mnt/d/Program Files/nodejs/:/mnt/d/Program Files/Amazon/AWSCLIV2/:/mnt/c/Program Files/Docker/Docker/resources/bin:/mnt/d/Users/ender/anaconda3/bin:/mnt/d/Users/ender/AppData/Roaming/npm:/mnt/c/ProgramData/DockerDesktop/version-bin:/mnt/d/Users/ender/anaconda3/bin:/mnt/d/Users/ender/anaconda3/bin:/mnt/d/Users/ender/anaconda3/condabin:/mnt/d/zlib/dll_x64:/mnt/d/xmllib/bin:/mnt/d/Ruby27-x64/bin:/mnt/c/Users/ender/AppData/Local/Microsoft/WindowsApps:/mnt/c/Users/ender/AppData/Roaming/Composer/vendor/bin:/mnt/c/Users/ender/AppData/Local/GitHubDesktop/bin:/mnt/c/Users/ender/.dotnet/tools:/mnt/c/Users/ender/AppData/Roaming/npm:/mnt/c/Users/ender/.dotnet/tools:/mnt/c/Program Files/NVIDIA/CUDNN/8.8/bin:/snap/bin
9 verbose lifecycle imagekitio-angular@2.0.0~build: CWD: /mnt/e/Documents/Dev/GitHub/stefanodenti/imagekit-angular/sdk
10 silly lifecycle imagekitio-angular@2.0.0~build: Args: [
10 silly lifecycle   '-c',
10 silly lifecycle   'rimraf dist && ng-packagr -p lib/package.json && npm run assets'
10 silly lifecycle ]
11 silly lifecycle imagekitio-angular@2.0.0~build: Returned: code: 111  signal: null
12 info lifecycle imagekitio-angular@2.0.0~build: Failed to exec build script
13 verbose stack Error: imagekitio-angular@2.0.0 build: `rimraf dist && ng-packagr -p lib/package.json && npm run assets`
13 verbose stack Exit status 111
13 verbose stack     at EventEmitter.<anonymous> (/home/nojrotit/.nvm/versions/node/v14.21.3/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:332:16)
13 verbose stack     at EventEmitter.emit (events.js:400:28)
13 verbose stack     at ChildProcess.<anonymous> (/home/nojrotit/.nvm/versions/node/v14.21.3/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:400:28)
13 verbose stack     at maybeClose (internal/child_process.js:1088:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:296:5)
14 verbose pkgid imagekitio-angular@2.0.0
15 verbose cwd /mnt/e/Documents/Dev/GitHub/stefanodenti/imagekit-angular/sdk
16 verbose Linux 5.10.16.3-microsoft-standard-WSL2
17 verbose argv "/home/nojrotit/.nvm/versions/node/v14.21.3/bin/node" "/home/nojrotit/.nvm/versions/node/v14.21.3/bin/npm" "run" "build"
18 verbose node v14.21.3
19 verbose npm  v6.14.18
20 error code ELIFECYCLE
21 error errno 111
22 error imagekitio-angular@2.0.0 build: `rimraf dist && ng-packagr -p lib/package.json && npm run assets`
22 error Exit status 111
23 error Failed at the imagekitio-angular@2.0.0 build script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 111, true ]
endersaka commented 1 year ago

Forget the above comment. It was something wrong in the PATH that caused WSL Ubuntu to run the ng installed on Windows. Though I still have problems.

After creating an NVM ambient with Node 14. and ng 1.4. (as described in DEVELOPMENT.md) I executed ng --version and got.

ng --version
Node.js version v14.21.3 detected.
The Angular CLI requires a minimum of v16.13.

Please update your Node.js version or visit https://nodejs.org/ for additional instructions.
imagekitio commented 1 year ago

Fixed in version 2.0.1