CODEWITHSUNDEEP
angular
Kiran Hegana
Kiran Hegana

Reputation: 19

Getting error when adding "add ng-zorro-antd" to Project with Angular CLI: 14.0.4 version

I am new in Angular. I am creating Angular Project related to Ant Design. I have follow the following steps..

step 1 - npm install --location=global @angular/cli

step 2 - ng new PROJECT_NAME

step 3 - cd PROJECT_NAME

step 4 - ng add ng-zorro-antd .

After hitting the step 4 command I got an error:

Could not find project in workspace: undefined.

Above error occurs only when selecting "Choose template to create project: sidemenu" option.

When selecting the "Choose template to create project: blank" its work fine.

C:\Users\b\Kiran\angularsrc\T&E\Ant Design Projects\AntDefaultDemo2>ng add ng-zorro-antd
Skipping installation: Package already installed
? Enable icon dynamic loading [ Detail: https://ng.ant.design/components/icon/en ] Yes
? Set up custom theme file [ Detail: https://ng.ant.design/docs/customize-theme/en ] Yes
? Choose your locale code: en_US
? Choose template to create project: sidemenu
Could not find project in workspace: undefined

My Configurations are:

Angular CLI: 14.0.4
Node: 16.13.2
Package Manager: npm 8.1.2
OS: win32 x64

Angular: 14.0.4
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, material, platform-browser, platform-browser-dynamic
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1400.4
@angular-devkit/build-angular   14.0.4
@angular-devkit/core            14.0.4
@angular-devkit/schematics      14.0.4
@schematics/angular             14.0.4
rxjs                            7.5.5
typescript                      4.7.4

Upvotes: 0

Views: 2756

Answers (1)

Kiran Hegana
Kiran Hegana

Reputation: 19

Yes... I got an answer. An error occurred because version mismatch between '@angular/cli' and 'ng-zorror-ant'. My '@angular/cli' version was 14.0.5 and 'ng-zorror-ant' (means npm version which is given on https://ng.ant.design/docs/introduce/en site in Version section. This is the latest version) is 13.3.2. So I just downgrade the '@angular/cli' version 14.0.5 to 13.2.1.

So it is run without any error.

I used the following steps.

D:\Angular Works\AntDemo1>ng version

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


Angular CLI: 14.0.5
Node: 16.16.0
Package Manager: npm 8.13.2
OS: win32 x64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1400.5
@angular-devkit/build-angular   14.0.5
@angular-devkit/core            14.0.5
@angular-devkit/schematics      14.0.5
@schematics/angular             14.0.5
rxjs                            7.5.6
typescript                      4.7.4

 D:\Angular Works\AntDemo1>npm uninstall -g @angular/cli

removed 184 packages, and audited 1 package in 5s

found 0 vulnerabilities

D:\Angular Works\AntDemo1>npm cache clean --force
npm WARN using --force Recommended protections disabled.

D:\Angular Works\AntDemo1>cd..
D:\Angular Works>ng v
'ng' is not recognized as an internal or external command,
operable program or batch file.

D:\Angular Works>npm install -g @angular/[email protected]

added 197 packages in 1m

D:\Angular Works>ng v

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


Angular CLI: 13.2.1
Node: 16.16.0
Package Manager: npm 8.13.2
OS: win32 x64

Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1302.1 (cli-only)
@angular-devkit/core         13.2.1 (cli-only)
@angular-devkit/schematics   13.2.1 (cli-only)
@schematics/angular          13.2.1 (cli-only)

D:\Angular Works>ng new AntTest
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
CREATE AntTest/angular.json (3046 bytes)
CREATE AntTest/package.json (1071 bytes)
CREATE AntTest/README.md (1053 bytes)
CREATE AntTest/tsconfig.json (863 bytes)
CREATE AntTest/.editorconfig (274 bytes)
CREATE AntTest/.gitignore (548 bytes)
CREATE AntTest/.browserslistrc (600 bytes)
CREATE AntTest/karma.conf.js (1425 bytes)
CREATE AntTest/tsconfig.app.json (287 bytes)
CREATE AntTest/tsconfig.spec.json (333 bytes)
CREATE AntTest/.vscode/extensions.json (130 bytes)
CREATE AntTest/.vscode/launch.json (474 bytes)
CREATE AntTest/.vscode/tasks.json (938 bytes)
CREATE AntTest/src/favicon.ico (948 bytes)
CREATE AntTest/src/index.html (293 bytes)
CREATE AntTest/src/main.ts (372 bytes)
CREATE AntTest/src/polyfills.ts (2338 bytes)
CREATE AntTest/src/styles.css (80 bytes)
CREATE AntTest/src/test.ts (745 bytes)
CREATE AntTest/src/assets/.gitkeep (0 bytes)
CREATE AntTest/src/environments/environment.prod.ts (51 bytes)
CREATE AntTest/src/environments/environment.ts (658 bytes)
CREATE AntTest/src/app/app-routing.module.ts (245 bytes)
CREATE AntTest/src/app/app.module.ts (393 bytes)
CREATE AntTest/src/app/app.component.html (23364 bytes)
CREATE AntTest/src/app/app.component.spec.ts (1076 bytes)
CREATE AntTest/src/app/app.component.ts (211 bytes)
CREATE AntTest/src/app/app.component.css (0 bytes)
√ Packages installed successfully.
'git' is not recognized as an internal or external command,
operable program or batch file.

D:\Angular Works>cd AntTest

D:\Angular Works\AntTest>ng add ng-zorro-antd
i Using package manager: npm
√ Found compatible package version: [email protected].
√ Package information loaded.

The package [email protected] will be installed and executed.
Would you like to proceed? Yes
√ Package successfully installed.
? Enable icon dynamic loading [ Detail: https://ng.ant.design/components/icon/en ] Yes
? Set up custom theme file [ Detail: https://ng.ant.design/docs/customize-theme/en ] Yes
? Choose your locale code: en_US
? Choose template to create project: sidemenu
CREATE src/theme.less (342 bytes)
CREATE src/app/icons-provider.module.ts (482 bytes)
CREATE src/app/pages/welcome/welcome-routing.module.ts (352 bytes)
CREATE src/app/pages/welcome/welcome.component.html (0 bytes)
CREATE src/app/pages/welcome/welcome.component.ts (273 bytes)
CREATE src/app/pages/welcome/welcome.component.css (0 bytes)
CREATE src/app/pages/welcome/welcome.module.ts (314 bytes)
UPDATE package.json (1102 bytes)
UPDATE src/app/app.module.ts (1127 bytes)
UPDATE angular.json (3265 bytes)
UPDATE src/app/app-routing.module.ts (416 bytes)
UPDATE src/app/app.component.html (1592 bytes)
UPDATE src/app/app.component.ts (213 bytes)
UPDATE src/app/app.component.css (1245 bytes)
√ Packages installed successfully.

D:\Angular Works\AntTest>code .

Upvotes: 1

Related Questions