Hello, I am creating new project using ignightui-cli, follow steps, but at the end it fails to build.. can you check the script and tell me how to fix it.. It used to work.... I would think that cli supposed to create all that needed in the project directory.. it seems it does not..
C:\_ng\new_ig1\Sample>ig --version _____ _ _ _ _ _____ _____ _ _____|_ _| (_) | | | | |_ _| / ____| | |_ _| | | __ _ _ __ _| |_ ___ | | | | | | | | | | | | | | / _` | '_ \| | __/ _ \ | | | | | | | | | | | | _| || (_| | | | | | || __/ | |__| |_| |_ | |____| |____ _| |_|_____\__, |_| |_|_|\__\___| \____/|_____| \_____|______|_____| __/ | |___/
Ignite UI CLI version: 8.0.3OS: Windows
C:\_ng\new_ig1\Sample>igStarting Step by step mode.For available commands, stop this execution and use --help.
? Enter a name for your project: pj1? 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: Default side navigation? Choose the theme for the project: Custom Generating project structure.√ Project structure generated.Git initialization failed. Install Git in order to automatically commit the project.
? Choose an action: Add component? Choose a group: Grids & Lists? Choose a component: Grid? Choose one: Custom Grid? Name your component: igGridUno? Choose features for the igx-grid Sorting, Filtering, Row Editing√ View 'igGridUno' added.
? 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 packagesError installing npm packages.Starting project.
> pj1@0.0.0 start> ng serve -o "--port=4200"
An unhandled exception occurred: Cannot find module '@angular-devkit/build-angular/package.json'Require stack:- C:\Users\gkheysin\AppData\Roaming\npm\node_modules\@angular\cli\node_modules\@angular-devkit\architect\node\node-modules-architect-host.js- C:\Users\gkheysin\AppData\Roaming\npm\node_modules\@angular\cli\node_modules\@angular-devkit\architect\node\index.js- C:\Users\gkheysin\AppData\Roaming\npm\node_modules\@angular\cli\models\architect-command.js- C:\Users\gkheysin\AppData\Roaming\npm\node_modules\@angular\cli\commands\serve-impl.js- C:\Users\gkheysin\AppData\Roaming\npm\node_modules\@angular\cli\node_modules\@angular-devkit\schematics\tools\export-ref.js- C:\Users\gkheysin\AppData\Roaming\npm\node_modules\@angular\cli\node_modules\@angular-devkit\schematics\tools\index.js- C:\Users\gkheysin\AppData\Roaming\npm\node_modules\@angular\cli\utilities\json-schema.js- C:\Users\gkheysin\AppData\Roaming\npm\node_modules\@angular\cli\models\command-runner.js- C:\Users\gkheysin\AppData\Roaming\npm\node_modules\@angular\cli\lib\cli\index.js- C:\Users\gkheysin\AppData\Roaming\npm\node_modules\@angular\cli\lib\init.js- C:\Users\gkheysin\AppData\Roaming\npm\node_modules\@angular\cli\bin\ngSee "C:\Users\gkheysin\AppData\Local\Temp\2\ng-qeQMki\angular-errors.log" for further details.(node:22508) UnhandledPromiseRejectionWarning: Error: Command failed: npm start -- --port=4200 at checkExecSyncError (child_process.js:643:11) at Object.execSync (child_process.js:679:15) at Function.execSync (C:\Users\gkheysin\AppData\Roaming\npm\node_modules\igniteui-cli\node_modules\@igniteui\cli-core\util\Util.js:273:36) at Object.<anonymous> (C:\Users\gkheysin\AppData\Roaming\npm\node_modules\igniteui-cli\lib\commands\start.js:82:41) at Generator.next (<anonymous>) at fulfilled (C:\Users\gkheysin\AppData\Roaming\npm\node_modules\igniteui-cli\lib\commands\start.js:5:58) at processTicksAndRejections (internal/process/task_queues.js:95:5)(Use `node --trace-warnings ...` to show where the warning was created)(node:22508) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see nodejs.org/.../cli.html. (rejection id: 1)(node:22508) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
C:\_ng\new_ig1\Sample>
Hello,
From what I could say based on the provided details, the issue is your Angular project can't find the required "@angular-devkit/build-angular" dependency necessary to build your project.
My suggestion is to delete the project's node_modules folder and run the following commands:
npm install
ng update
npm update
If these steps do not help you could try to install @angular-devkit/build-angular as dev dependency using 'npm install --save-dev @angular-devkit/build-angular'.
Let me know if I may be of any further assistance.
Sincerely,
Teodosia Hristodorova
Associate Software Developer
It used to work on my workstation, now it stopped...
wonder why.. is there a way to uninstall everything related and install all back.. cli supposed to created all dependency folders, but now it is getting stopped right at the beginning of the process (Error installing npm packages).. it seems like it is stopped working right after I was able to use angular-schematics for once.. now both stopped working.. even if I fix this upstream dependency conflict the ig template for the custom grid won't be created..
C:\_ng\new_ig1\pj1>npm installnpm ERR! code ERESOLVEnpm ERR! ERESOLVE unable to resolve dependency treenpm ERR!npm ERR! While resolving: pj1@0.0.0npm ERR! Found: jasmine-core@3.7.1npm ERR! node_modules/jasmine-corenpm ERR! dev jasmine-core@"~3.7.0" from the root projectnpm ERR!npm ERR! Could not resolve dependency:npm ERR! peer jasmine-core@">=3.8" from karma-jasmine-html-reporter@1.7.0npm ERR! node_modules/karma-jasmine-html-reporternpm ERR! dev karma-jasmine-html-reporter@"^1.5.0" from the root projectnpm ERR!npm ERR! Fix the upstream dependency conflict, or retrynpm ERR! this command with --force, or --legacy-peer-depsnpm ERR! to accept an incorrect (and potentially broken) dependency resolution.npm ERR!npm ERR! See C:\Users\gkheysin\AppData\Local\npm-cache\eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:npm ERR! C:\Users\gkheysin\AppData\Local\npm-cache\_logs\2021-07-28T14_51_48_099Z-debug.log
I have run npm install --save-dev @angular-devkit/build-angular then ig for the same effect..
How to debug this behavior.. ?
C:\_ng\new_ig1>npm install --save-dev @angular-devkit/build-angularnpm WARN deprecated urix@0.1.0: Please see github.com/.../urixnpm WARN deprecated resolve-url@0.2.1: github.com/.../resolve-urlnpm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.npm WARN deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See v8.dev/.../math-random for details.
added 1167 packages, and audited 1168 packages in 2m
85 packages are looking for funding run `npm fund` for details
5 moderate severity vulnerabilities
Some issues need review, and may require choosinga different dependency.
Run `npm audit` for details.
C:\_ng\new_ig1>igStarting Step by step mode.For available commands, stop this execution and use --help.
? Enter a name for your project: pjuno? 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: Default side navigation? Choose the theme for the project: Custom Generating project structure.√ Project structure generated.Git initialization failed. Install Git in order to automatically commit the project.
? Choose an action: Add component? Choose a group: Grids & Lists? Choose a component: Grid? Choose one: Custom Grid? Name your component: uno? Choose features for the igx-grid Sorting, Filtering, Row Editing√ View 'uno' added.
> pjuno@0.0.0 start> ng serve -o "--port=4200"
You seem to not be depending on "@angular/core" and/or "rxjs". This is an error.(node:4780) UnhandledPromiseRejectionWarning: Error: Command failed: npm start -- --port=4200 at checkExecSyncError (child_process.js:643:11) at Object.execSync (child_process.js:679:15) at Function.execSync (C:\Users\gkheysin\AppData\Roaming\npm\node_modules\igniteui-cli\node_modules\@igniteui\cli-core\util\Util.js:273:36) at Object.<anonymous> (C:\Users\gkheysin\AppData\Roaming\npm\node_modules\igniteui-cli\lib\commands\start.js:82:41) at Generator.next (<anonymous>) at fulfilled (C:\Users\gkheysin\AppData\Roaming\npm\node_modules\igniteui-cli\lib\commands\start.js:5:58) at processTicksAndRejections (internal/process/task_queues.js:95:5)(Use `node --trace-warnings ...` to show where the warning was created)(node:4780) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see nodejs.org/.../cli.html. (rejection id: 1)(node:4780) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
C:\_ng\new_ig1>
ng new create project without problems .. but ig still not working ...This is error log
[error] Error: Cannot find module '@angular-devkit/build-angular/package.json'Require stack:- C:\Users\gkheysin\AppData\Roaming\npm\node_modules\@angular\cli\node_modules\@angular-devkit\architect\node\node-modules-architect-host.js- C:\Users\gkheysin\AppData\Roaming\npm\node_modules\@angular\cli\node_modules\@angular-devkit\architect\node\index.js- C:\Users\gkheysin\AppData\Roaming\npm\node_modules\@angular\cli\models\architect-command.js- C:\Users\gkheysin\AppData\Roaming\npm\node_modules\@angular\cli\commands\serve-impl.js- C:\Users\gkheysin\AppData\Roaming\npm\node_modules\@angular\cli\node_modules\@angular-devkit\schematics\tools\export-ref.js- C:\Users\gkheysin\AppData\Roaming\npm\node_modules\@angular\cli\node_modules\@angular-devkit\schematics\tools\index.js- C:\Users\gkheysin\AppData\Roaming\npm\node_modules\@angular\cli\utilities\json-schema.js- C:\Users\gkheysin\AppData\Roaming\npm\node_modules\@angular\cli\models\command-runner.js- C:\Users\gkheysin\AppData\Roaming\npm\node_modules\@angular\cli\lib\cli\index.js- C:\Users\gkheysin\AppData\Roaming\npm\node_modules\@angular\cli\lib\init.js- C:\Users\gkheysin\AppData\Roaming\npm\node_modules\@angular\cli\bin\ng at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15) at Function.resolve (internal/modules/cjs/helpers.js:98:19) at WorkspaceNodeModulesArchitectHost.resolveBuilder (C:\Users\gkheysin\AppData\Roaming\npm\node_modules\@angular\cli\node_modules\@angular-devkit\architect\node\node-modules-architect-host.js:113:41) at ServeCommand.initialize (C:\Users\gkheysin\AppData\Roaming\npm\node_modules\@angular\cli\models\architect-command.js:80:63) at async ServeCommand.validateAndRun (C:\Users\gkheysin\AppData\Roaming\npm\node_modules\@angular\cli\models\command.js:121:22) at async Object.runCommand (C:\Users\gkheysin\AppData\Roaming\npm\node_modules\@angular\cli\models\command-runner.js:224:24) at async default_1 (C:\Users\gkheysin\AppData\Roaming\npm\node_modules\@angular\cli\lib\cli\index.js:70:31)
What I also noticed is that ng cli when creates new project put into package.json different version of angular
ng new :
"dependencies": { "@angular/animations": "~12.1.0-", "@angular/common": "~12.1.0-", "@angular/compiler": "~12.1.0-", "@angular/core": "~12.1.0-", "@angular/forms": "~12.1.0-", "@angular/platform-browser": "~12.1.0-", "@angular/platform-browser-dynamic": "~12.1.0-", "@angular/router": "~12.1.0-", "rxjs": "~6.6.0", "tslib": "^2.2.0", "zone.js": "~0.11.4" }, "devDependencies": { "@angular-devkit/build-angular": "~12.1.3", "@angular/cli": "~12.1.3", "@angular/compiler-cli": "~12.1.0-", "@types/jasmine": "~3.8.0", "@types/node": "^12.11.1", "jasmine-core": "~3.8.0", "karma": "~6.3.0", "karma-chrome-launcher": "~3.1.0", "karma-coverage": "~2.0.3", "karma-jasmine": "~4.0.0", "karma-jasmine-html-reporter": "~1.7.0", "typescript": "~4.3.2" }
ig
"dependencies": { "@angular/animations": "~12.0.0", "@angular/common": "~12.0.0", "@angular/compiler": "~12.0.0", "@angular/core": "~12.0.0", "@angular/forms": "~12.0.0", "@angular/platform-browser": "~12.0.0", "@angular/platform-browser-dynamic": "~12.0.0", "@angular/router": "~12.0.0", "@infragistics/igniteui-angular": "~12.0.0", "core-js": "^3.6.5", "hammerjs": "^2.0.8", "jszip": "^3.5.0", "minireset.css": "~0.0.4", "rxjs": "~6.6.0", "tslib": "^2.1.0", "web-animations-js": "^2.3.2", "zone.js": "~0.11.4" }, "devDependencies": { "@angular-devkit/build-angular": "~12.0.0", "@angular/cli": "~12.0.0", "@angular/compiler-cli": "~12.0.0", "@types/jasmine": "~3.6.0", "@types/node": "^12.11.1", "codelyzer": "^6.0.0", "igniteui-cli": "~8.0.3", "jasmine-core": "~3.7.0", "jasmine-spec-reporter": "~7.0.0", "karma": "~6.3.0", "karma-chrome-launcher": "~3.1.0", "karma-coverage": "~2.0.3", "karma-jasmine": "~4.0.0", "karma-jasmine-html-reporter": "^1.5.0", "protractor": "~7.0.0", "ts-node": "~9.1.1", "tslint": "~6.1.0", "typescript": "~4.2.3" }
ig naturally does not create the node_module folder in the pj folder..
It's hard to follow the exact steps you are executing on your side. From what I could see in the provided details I could say that the angular version and igniteui-angular should be the same. Into the provided package.json the angular version is 12.1 and the igniteui-angular is 12.0. This could lead to errors on your side and my suggestion is to install the correct angular version which is 12.0.
If you already have a created project, my suggestion is to delete its node_modules folder. You could do this by running 'rm -rf /node_modules' or directly from the project folder. After that run 'npm install' and 'ng update'.
In case there is an error related to the jasmine-core version please take a look at this thread where I have already suggested how such behavior could be fixed.
Additionally, I have created a new project using the CLI, and attached could be found the generated package.json file and a step-by-step gif.
8713.cli_created_project.zip
Hi Teodosia,
I downgrade angular to the exact version installed globally 12.0.0.. it did not help...
when I type ig it prompt me for the pj Name and after that it creates folder with the content I am attaching.. there is no node_modules there ... then after interactions apparently app folder created with all components but build fails with same message.. why node_modules failed to be added? can you check the folder content for possible clues..
igUno.zip
The message for the different version is just that - something to be aware of, but doesn't necessarily mean anything is wrong. The update process linked by @Teodosia will bump to the latest and should also update the Ignite UI for Angular package too. So the message will likely be gone for now at least.Explanation: As there are commands that make modifications such as adding new components, the Ignite UI CLI is included locally in the project (as a dev dependency). Commands inside the project are handed off to this local version. Doing this allows for projects that haven't been updated yet to whatever version you've installed globally (e.g. project is still using Angular 11 while your global version would use 12 or the other way around) and ensures the results produced are compatible with the project state.That's why you see the message and different version when you run outside the folder - in the latter case there's no project with local installation and thus the global one executes the command. The same principle is used in the Angular CLI and the same behavior can be observed when running `ng` commands btw :)
Here could be found a topic about updating that you might consider helpful. As it is mentioned there you could run 'ng update igniteui-cli'.
Please take a look at it and let me know if you need any further assistance.
How exactly to update .. if I would run npm install -g igniteui-cli it will update global version but in project folder
I still getting : Different igniteui-cli global and local version
Ignite UI CLI version: 8.0.4
although outside it gives me new version
Ignite UI CLI version: 8.1.0
Thanks for update!
Hello Michael,Late reply (misconfigured notifications on my end), but as with my previous post the Ignite UI CLI was updated the following week as expected, with updated templates for 12.1 (https://github.com/IgniteUI/igniteui-cli/releases) so you can grab new versions.PS: Through GitHub you could even subscribe to get notified of release if that interests you - there's a Custom condition for Releases under the Watch feature :)