Issue using ig new with Angular Versions

355

Walter Zielenski posted 5 days ago

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 Angular
Psst! 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 & Run
The 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: 4200
Build started.
Installing npm packages
Packages installed successfully
Starting 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 - Error
Message: Command failed: npm start -- --port=4200
Stack: 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.12
Node: 20.11.1
Package Manager: npm 10.2.4
OS: 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.6
OS: Windows

Parents

No Data

Reply

355

Offline Walter Zielenski posted 5 days ago

note - I accidentally reported my own post as abusive. Maybe you should add a verification to that step
Cancel
Reply

Cancel

Children

355

Offline Walter Zielenski posted 5 days ago in reply to Walter Zielenski

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.2
Node: 18.18.2
Package Manager: npm 10.8.3
OS: 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)? No
CREATE 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=4215
Initial chunk files | Names | Raw size
polyfills.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

^C
C:\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=4200
Initial chunk files | Names | Raw size
polyfills.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.827 seconds]

Watch mode enabled. Watching for file changes...
➜ Local: http://localhost:4200/
➜ press h + enter to show help
^C
C:\Projects\CUSA-1>

C:\Projects\CUSA-1>cd ..

C:\Projects>ig new

? Enter a name for your project: CUSA-2
? Choose framework: Angular
? Choose the type of project: Ignite UI for Angular
Psst! 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 & Run
The 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: 4200
Build started.
Installing npm packages
Packages installed successfully
Starting project.

> cusa-2@0.0.0 start
> ng serve -o --port=4200

/ 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,
╵ ~~~~~~~~~~~~~~~~~

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:60:4:
60 │ LoginComponent,
╵ ~~~~~~~~~~~~~~

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:61:4:
61 │ RedirectComponent,
╵ ~~~~~~~~~~~~~~~~~

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:62:4:
62 │ 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:63:4:
63 │ LoginDialogComponent,
╵ ~~~~~~~~~~~~~~~~~~~~

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:64:4:
64 │ ProfileComponent
╵ ~~~~~~~~~~~~~~~~

X [ERROR] TS2305: Module '"angular-auth-oidc-client"' has no exported member 'OidcConfigService'. [plugin angular-compiler]

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,
╵ ~~~

X [ERROR] TS4111: Property 'name' comes from an index signature, so it must be accessed with ['name']. [plugin angular-compiler]

src/app/authentication/providers/google-provider.ts:13:21:
13 │ name: userData.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/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,
╵ ~~~~~~~~~~~

X [ERROR] TS4111: Property 'picture' comes from an index signature, so it must be accessed with ['picture']. [plugin angular-compiler]

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,
╵ ~~~

X [ERROR] TS4111: Property 'name' comes from an index signature, so it must be accessed with ['name']. [plugin angular-compiler]

src/app/authentication/providers/microsoft-provider.ts:37:21:
37 │ name: userData.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/microsoft-provider.ts:38:22:
38 │ email: userData.email,
╵ ~~~~~

X [ERROR] TS2551: Property 'getToken' does not exist on type 'OidcSecurityService'. Did you mean 'getIdToken'? [plugin angular-compiler]

src/app/authentication/providers/microsoft-provider.ts:39:46:
39 │ 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] TS2305: Module '"angular-auth-oidc-client"' has no exported member 'OidcConfigService'. [plugin angular-compiler]

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
Cancel
Reply

Cancel