I am trying to create a new application using ig new.
I have uninstalled and re-installed both Angular and igniteui several times in an attempt to match versions.
I consistently get the following error:
This version of CLI is only compatible with Angular versions ^19.0.0, but Angular version 18.2.13 was found instead.
Below is a copy & paste of my experience.
What do I need to do to get ig new to work?
Thanks in advance,
Walter
C:\Projects>npm i igniteui-angular@18.2.8
added 38 packages in 6s
6 packages are looking for funding run `npm fund` for details
C:\Projects>ig new
? Enter a name for your project: CUSA-2? Choose framework: Angular? Choose the type of project: Ignite UI for AngularPsst! Did you know you can also use our schematics package with Angular CLI to create and modify your projects?Read more at: www.infragistics.com/.../cli-overview? Choose project template: Side navigation + login? Choose the theme for the project: Default Generating project structure.√ Project structure generated.√ Git Initialized and Project 'CUSA-2' Committed
? Choose an action: Complete & RunThe project will be created using a Trial version of Ignite UI for Angular.You can always run the upgrade-packages command once it's created.? Would you like to upgrade to the licensed feed now? Yes? Choose app host port: 4200Build started.Installing npm packagesPackages installed successfullyStarting project.
> cusa-2@0.0.0 start> ng serve -o --port=4200
This version of CLI is only compatible with Angular versions ^19.0.0,but Angular version 18.2.13 was found instead.Please visit the link below to find instructions on how to update Angular.https://update.angular.dev/The new command threw error - ErrorMessage: Command failed: npm start -- --port=4200Stack: Error: Command failed: npm start -- --port=4200 at checkExecSyncError (node:child_process:890:11) at execSync (node:child_process:962:15) at Util.execSync (C:\Users\wjz\AppData\Roaming\npm\node_modules\igniteui-cli\node_modules\@igniteui\cli-core\util\Util.js:318:49) at execSyncNpmStart (C:\Users\wjz\AppData\Roaming\npm\node_modules\igniteui-cli\lib\commands\start.js:44:25) at Object.<anonymous> (C:\Users\wjz\AppData\Roaming\npm\node_modules\igniteui-cli\lib\commands\start.js:125:21) at Generator.next (<anonymous>) at fulfilled (C:\Users\wjz\AppData\Roaming\npm\node_modules\igniteui-cli\lib\commands\start.js:28:58)
C:\Projects>ng version
_ _ ____ _ ___ / \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _| / △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | | / ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | | /_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___| |___/
Angular CLI: 18.2.12Node: 20.11.1Package Manager: npm 10.2.4OS: win32 x64
Angular: undefined...
Package Version------------------------------------------------------@angular-devkit/architect 0.1802.12 (cli-only)@angular-devkit/core 18.2.12 (cli-only)@angular-devkit/schematics 18.2.12 (cli-only)@schematics/angular 18.2.12 (cli-only)
C:\Projects>ig -v _____ _ _ _ _ _____ _____ _ _____|_ _| (_) | | | | |_ _| / ____| | |_ _| | | __ _ _ __ _| |_ ___ | | | | | | | | | | | | | | / _` | '_ \| | __/ _ \ | | | | | | | | | | | | _| || (_| | | | | | || __/ | |__| |_| |_ | |____| |____ _| |_|_____\__, |_| |_|_|\__\___| \____/|_____| \_____|______|_____| __/ | |___/
Ignite UI CLI version: 14.3.6OS: Windows
note - I accidentally reported my own post as abusive. Maybe you should add a verification to that step
My original post was using node version 20.11.1
I tried this on a different laptop with node 18.18.2 and I got a different bunch of errors:
Microsoft Windows [Version 10.0.22000.2538](c) Microsoft Corporation. All rights reserved.
C:\Users\wjz>ng version
Angular CLI: 17.2.2Node: 18.18.2Package Manager: npm 10.8.3OS: win32 x64
Angular:...
Package Version------------------------------------------------------@angular-devkit/architect 0.1702.2 (cli-only)@angular-devkit/core 17.2.2 (cli-only)@angular-devkit/schematics 17.2.2 (cli-only)@schematics/angular 17.2.2 (cli-only)
C:\Users\wjz>cd \projects
C:\Projects>ng new CUSA-1? Which stylesheet format would you like to use? SCSS [ https://sass-lang.com/documentation/syntax#scss ]? Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? NoCREATE CUSA-1/angular.json (2867 bytes)CREATE CUSA-1/package.json (1075 bytes)CREATE CUSA-1/README.md (1086 bytes)CREATE CUSA-1/tsconfig.json (936 bytes)CREATE CUSA-1/.editorconfig (290 bytes)CREATE CUSA-1/.gitignore (590 bytes)CREATE CUSA-1/tsconfig.app.json (277 bytes)CREATE CUSA-1/tsconfig.spec.json (287 bytes)CREATE CUSA-1/.vscode/extensions.json (134 bytes)CREATE CUSA-1/.vscode/launch.json (490 bytes)CREATE CUSA-1/.vscode/tasks.json (980 bytes)CREATE CUSA-1/src/main.ts (256 bytes)CREATE CUSA-1/src/favicon.ico (15086 bytes)CREATE CUSA-1/src/index.html (304 bytes)CREATE CUSA-1/src/styles.scss (81 bytes)CREATE CUSA-1/src/app/app.component.html (20239 bytes)CREATE CUSA-1/src/app/app.component.spec.ts (945 bytes)CREATE CUSA-1/src/app/app.component.ts (316 bytes)CREATE CUSA-1/src/app/app.component.scss (0 bytes)CREATE CUSA-1/src/app/app.config.ts (235 bytes)CREATE CUSA-1/src/app/app.routes.ts (80 bytes)CREATE CUSA-1/src/assets/.gitkeep (0 bytes)√ Packages installed successfully. Successfully initialized git.
C:\Projects>CD CUSA-1
C:\Projects\CUSA-1>ng serve -o --port=4215Initial chunk files | Names | Raw sizepolyfills.js | polyfills | 88.09 kB |main.js | main | 22.17 kB |styles.css | styles | 96 bytes |
| Initial total | 110.35 kB
Application bundle generation complete. [2.754 seconds]
Watch mode enabled. Watching for file changes... ➜ Local: http://localhost:4215/ ➜ press h + enter to show help
^CC:\Projects\CUSA-1>
C:\Projects\CUSA-1>nvm list
23.1.0 * 18.18.2 (Currently using 64-bit executable)
C:\Projects\CUSA-1>cd ..
C:\Projects>dir cus* Volume in drive C has no label. Volume Serial Number is AC23-71A8
Directory of C:\Projects
12/16/2024 12:12 PM <DIR> CUSA-1 0 File(s) 0 bytes 1 Dir(s) 21,237,968,896 bytes free
C:\Projects>cd CUSA-1
C:\Projects\CUSA-1>ng serve -o --port=4200Initial chunk files | Names | Raw sizepolyfills.js | polyfills | 88.09 kB |main.js | main | 22.17 kB |styles.css | styles | 96 bytes |
Application bundle generation complete. [2.827 seconds]
Watch mode enabled. Watching for file changes... ➜ Local: http://localhost:4200/ ➜ press h + enter to show help^CC:\Projects\CUSA-1>
/ Building...X [ERROR] TS6053: File 'C:/Projects/CUSA-2/src/polyfills.ngtypecheck.ts' not found. The file is in the program because: Root file specified for compilation [plugin angular-compiler]
X [ERROR] TS6053: File 'C:/Projects/CUSA-2/src/polyfills.ts' not found. The file is in the program because: Root file specified for compilation [plugin angular-compiler]
X [ERROR] TS4111: Property 'text' comes from an index signature, so it must be accessed with ['text']. [plugin angular-compiler]
src/app/app.component.ts:51:27: 51 │ name: route.data.text, ╵ ~~~~
X [ERROR] TS2305: Module '"angular-auth-oidc-client"' has no exported member 'OidcConfigService'. [plugin angular-compiler]
src/app/authentication/authentication.module.ts:5:21: 5 │ import { AuthModule, OidcConfigService } from 'angular-auth-oidc-cl... ╵ ~~~~~~~~~~~~~~~~~
X [ERROR] TS2554: Expected 1 arguments, but got 0. [plugin angular-compiler]
src/app/authentication/authentication.module.ts:32:15: 32 │ AuthModule.forRoot(), ╵ ~~~~~~~~~
An argument for 'passedConfig' was not provided.
node_modules/angular-auth-oidc-client/lib/auth.module.d.ts:14:19: 14 │ ...static forRoot(passedConfig: PassedInitialConfig): ModuleWithPr... ╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
X [ERROR] TS-996008: Component LoginBarComponent is standalone, and cannot be declared in an NgModule. Did you mean to import it instead? [plugin angular-compiler]
src/app/authentication/authentication.module.ts:44:4: 44 │ LoginBarComponent, ╵ ~~~~~~~~~~~~~~~~~
X [ERROR] TS-996008: Component LoginComponent is standalone, and cannot be declared in an NgModule. Did you mean to import it instead? [plugin angular-compiler]
src/app/authentication/authentication.module.ts:45:4: 45 │ LoginComponent, ╵ ~~~~~~~~~~~~~~
X [ERROR] TS-996008: Component LoginDialogComponent is standalone, and cannot be declared in an NgModule. Did you mean to import it instead? [plugin angular-compiler]
src/app/authentication/authentication.module.ts:46:4: 46 │ LoginDialogComponent, ╵ ~~~~~~~~~~~~~~~~~~~~
X [ERROR] TS-996008: Component ProfileComponent is standalone, and cannot be declared in an NgModule. Did you mean to import it instead? [plugin angular-compiler]
src/app/authentication/authentication.module.ts:47:4: 47 │ ProfileComponent, ╵ ~~~~~~~~~~~~~~~~
X [ERROR] TS-996008: Component RedirectComponent is standalone, and cannot be declared in an NgModule. Did you mean to import it instead? [plugin angular-compiler]
src/app/authentication/authentication.module.ts:48:4: 48 │ RedirectComponent, ╵ ~~~~~~~~~~~~~~~~~
X [ERROR] TS-996008: Component RegisterComponent is standalone, and cannot be declared in an NgModule. Did you mean to import it instead? [plugin angular-compiler]
src/app/authentication/authentication.module.ts:49:4: 49 │ RegisterComponent ╵ ~~~~~~~~~~~~~~~~~
X [ERROR] TS-996004: Can't be exported from this NgModule, as it must be imported first [plugin angular-compiler]
src/app/authentication/authentication.module.ts:59:4: 59 │ LoginBarComponent, ╵ ~~~~~~~~~~~~~~~~~
src/app/authentication/authentication.module.ts:60:4: 60 │ LoginComponent, ╵ ~~~~~~~~~~~~~~
src/app/authentication/authentication.module.ts:61:4: 61 │ RedirectComponent, ╵ ~~~~~~~~~~~~~~~~~
src/app/authentication/authentication.module.ts:62:4: 62 │ RegisterComponent, ╵ ~~~~~~~~~~~~~~~~~
src/app/authentication/authentication.module.ts:63:4: 63 │ LoginDialogComponent, ╵ ~~~~~~~~~~~~~~~~~~~~
src/app/authentication/authentication.module.ts:64:4: 64 │ ProfileComponent ╵ ~~~~~~~~~~~~~~~~
src/app/authentication/providers/base-oidc-provider.ts:3:2: 3 │ OidcConfigService, ╵ ~~~~~~~~~~~~~~~~~
X [ERROR] TS2305: Module '"angular-auth-oidc-client"' has no exported member 'OpenIDImplicitFlowConfiguration'. [plugin angular-compiler]
src/app/authentication/providers/base-oidc-provider.ts:5:2: 5 │ OpenIDImplicitFlowConfiguration ╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
X [ERROR] TS2693: 'AuthWellKnownEndpoints' only refers to a type, but is being used as a value here. [plugin angular-compiler]
src/app/authentication/providers/base-oidc-provider.ts:32:39: 32 │ const authWellKnownEndpoints = new AuthWellKnownEndpoints(); ╵ ~~~~~~~~~~~~~~~~~~~~~~
X [ERROR] TS2339: Property 'setupModule' does not exist on type 'OidcSecurityService'. [plugin angular-compiler]
src/app/authentication/providers/base-oidc-provider.ts:34:29: 34 │ this.oidcSecurityService.setupModule(openIDImplicitFlowConfigu... ╵ ~~~~~~~~~~~
X [ERROR] TS2339: Property 'onAuthorizationResult' does not exist on type 'OidcSecurityService'. [plugin angular-compiler]
src/app/authentication/providers/base-oidc-provider.ts:54:31: 54 │ ... this.oidcSecurityService.onAuthorizationResult.subscribe(() => { ╵ ~~~~~~~~~~~~~~~~~~~~~
X [ERROR] TS2339: Property 'authorizedImplicitFlowCallback' does not exist on type 'OidcSecurityService'. [plugin angular-compiler]
src/app/authentication/providers/base-oidc-provider.ts:59:31: 59 │ this.oidcSecurityService.authorizedImplicitFlowCallback(); ╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
X [ERROR] TS4111: Property 'id' comes from an index signature, so it must be accessed with ['id']. [plugin angular-compiler]
src/app/authentication/providers/facebook-provider.ts:30:30: 30 │ id: newResponse.id, ╵ ~~
X [ERROR] TS4111: Property 'name' comes from an index signature, so it must be accessed with ['name']. [plugin angular-compiler]
src/app/authentication/providers/facebook-provider.ts:31:32: 31 │ name: newResponse.name, ╵ ~~~~
X [ERROR] TS4111: Property 'first_name' comes from an index signature, so it must be accessed with ['first_name']. [plugin angular-compiler]
src/app/authentication/providers/facebook-provider.ts:32:38: 32 │ given_name: newResponse.first_name, ╵ ~~~~~~~~~~
X [ERROR] TS4111: Property 'last_name' comes from an index signature, so it must be accessed with ['last_name']. [plugin angular-compiler]
src/app/authentication/providers/facebook-provider.ts:33:39: 33 │ family_name: newResponse.last_name, ╵ ~~~~~~~~~
X [ERROR] TS4111: Property 'email' comes from an index signature, so it must be accessed with ['email']. [plugin angular-compiler]
src/app/authentication/providers/facebook-provider.ts:34:33: 34 │ email: newResponse.email, ╵ ~~~~~
X [ERROR] TS4111: Property 'picture' comes from an index signature, so it must be accessed with ['picture']. [plugin angular-compiler]
src/app/authentication/providers/facebook-provider.ts:35:35: 35 │ picture: newResponse.picture, ╵ ~~~~~~~
X [ERROR] TS2322: Type 'string | undefined' is not assignable to type 'string'. Type 'undefined' is not assignable to type 'string'. [plugin angular-compiler]
src/app/authentication/providers/facebook-provider.ts:36:14: 36 │ externalToken: FB.getAuthResponse()[accessToken] ╵ ~~~~~~~~~~~~~
X [ERROR] TS2531: Object is possibly 'null'. [plugin angular-compiler]
src/app/authentication/providers/facebook-provider.ts:36:29: 36 │ externalToken: FB.getAuthResponse()[accessToken] ╵ ~~~~~~~~~~~~~~~~~~~~
X [ERROR] TS4111: Property 'sub' comes from an index signature, so it must be accessed with ['sub']. [plugin angular-compiler]
src/app/authentication/providers/google-provider.ts:12:19: 12 │ id: userData.sub, ╵ ~~~
src/app/authentication/providers/google-provider.ts:13:21: 13 │ name: userData.name, ╵ ~~~~
src/app/authentication/providers/google-provider.ts:14:22: 14 │ email: userData.email, ╵ ~~~~~
X [ERROR] TS4111: Property 'given_name' comes from an index signature, so it must be accessed with ['given_name']. [plugin angular-compiler]
src/app/authentication/providers/google-provider.ts:15:27: 15 │ given_name: userData.given_name, ╵ ~~~~~~~~~~
X [ERROR] TS4111: Property 'family_name' comes from an index signature, so it must be accessed with ['family_name']. [plugin angular-compiler]
src/app/authentication/providers/google-provider.ts:16:28: 16 │ family_name: userData.family_name, ╵ ~~~~~~~~~~~
src/app/authentication/providers/google-provider.ts:17:24: 17 │ picture: userData.picture, ╵ ~~~~~~~
X [ERROR] TS2551: Property 'getToken' does not exist on type 'OidcSecurityService'. Did you mean 'getIdToken'? [plugin angular-compiler]
src/app/authentication/providers/google-provider.ts:18:46: 18 │ externalToken: this.oidcSecurityService.getToken() ╵ ~~~~~~~~
'getIdToken' is declared here.
node_modules/angular-auth-oidc-client/lib/oidc.security.service.d.ts:132:4: 132 │ getIdToken(configId?: string): Observable<string>; ╵ ~~~~~~~~~~
X [ERROR] TS4114: This member must have an 'override' modifier because it overrides a member in the base class 'BaseOidcProvider'. [plugin angular-compiler]
src/app/authentication/providers/microsoft-provider.ts:13:9: 13 │ public config() { ╵ ~~~~~~
X [ERROR] TS4111: Property 'oid' comes from an index signature, so it must be accessed with ['oid']. [plugin angular-compiler]
src/app/authentication/providers/microsoft-provider.ts:36:19: 36 │ id: userData.oid, ╵ ~~~
src/app/authentication/providers/microsoft-provider.ts:37:21: 37 │ name: userData.name, ╵ ~~~~
src/app/authentication/providers/microsoft-provider.ts:38:22: 38 │ email: userData.email, ╵ ~~~~~
src/app/authentication/providers/microsoft-provider.ts:39:46: 39 │ externalToken: this.oidcSecurityService.getToken() ╵ ~~~~~~~~
src/app/authentication/services/external-auth.service.ts:4:9: 4 │ import { OidcConfigService, OidcSecurityService } from 'angular-aut... ╵ ~~~~~~~~~~~~~~~~~
X [ERROR] TS-992003: No suitable injection token for parameter 'oidcConfigService' of class 'ExternalAuthService'. Consider using the @Inject decorator to specify an injection token. [plugin angular-compiler]
src/app/authentication/services/external-auth.service.ts:34:12: 34 │ private oidcConfigService: OidcConfigService, ╵ ~~~~~~~~~~~~~~~~~
This type does not have a value, so it cannot be used as injection token.
src/app/authentication/services/external-auth.service.ts:34:31: 34 │ private oidcConfigService: OidcConfigService, ╵ ~~~~~~~~~~~~~~~~~
Watch mode enabled. Watching for file changes...Terminate batch job (Y/N)? ^C
Hello,
Thank you for providing the detailed information. I was able to reproduce the behavior you described, and I have logged the issue here for further investigation: https://github.com/IgniteUI/igniteui-cli/issues/1362
Our development team will review, discuss, and examine the problem to implement a fix. I recommend watching the GitHub issue to stay updated on its progress. Once resolved, the fix will be included in a future release.
When the next version becomes available, please make sure to update the IgniteUI CLI to take advantage of the resolution.
Thank you for your patience and understanding! Please let me know if you need any further assistance in the meantime.
Regards,
Georgi Anastasov
Associate Software Developer
Infragistics