Angular 2+, How to generate angular.json manually

Question

I had built Angular sample Tour of Heroes app as on https://github.com/garg10may/TourOfHeroes

now when I try to clone it and do ng serve it gives me an error

The serve command requires to be run in an Angular project, but a project definition could not be found.

From what I understand I didn't commit angular.json file hence it not recognizing the same. How can I generate the same?

Edit:

If I use angular.json file from another new project gives the error.

Could not find module "@angular-devkit/build-angular" from "/home/garg10may/TourOfHeroes".
Error: Could not find module "@angular-devkit/build-angular" from "/home/garg10may/TourOfHeroes".
    at Object.resolve (/usr/local/lib/node_modules/@angular/cli/node_modules/@angular-devkit/core/node/resolve.js:151:11)
    at WorkspaceNodeModulesArchitectHost.resolveBuilder (/usr/local/lib/node_modules/@angular/cli/node_modules/@angular-devkit/architect/node/node-modules-architect-host.js:31:40)
    at ServeCommand.initialize (/usr/local/lib/node_modules/@angular/cli/models/architect-command.js:135:55)
    at process._tickCallback (internal/process/next_tick.js:68:7)
    at Function.Module.runMain (internal/modules/cjs/loader.js:757:11)
    at startup (internal/bootstrap/node.js:283:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)

Trying to install the same:

garg10may@GCES15511:~/TourOfHeroes$ npm i @angular-devkit/build-angular --save-dev                                                                                                                                                  [24/1952]npm WARN checkPermissions Missing write access to /home/garg10may/TourOfHeroes/node_modules/@babel/types
npm WARN checkPermissions Missing write access to /home/garg10may/TourOfHeroes/node_modules/assert
npm WARN checkPermissions Missing write access to /home/garg10may/TourOfHeroes/node_modules/babel-code-frame
npm WARN checkPermissions Missing write access to /home/garg10may/TourOfHeroes/node_modules/@babel/generator
npm WARN checkPermissions Missing write access to /home/garg10may/TourOfHeroes/node_modules/@babel/traverse
npm WARN checkPermissions Missing write access to /home/garg10may/TourOfHeroes/node_modules/babel-generator
npm WARN checkPermissions Missing write access to /home/garg10may/TourOfHeroes/node_modules/body-parser
npm WARN checkPermissions Missing write access to /home/garg10may/TourOfHeroes/node_modules/express
npm WARN checkPermissions Missing write access to /home/garg10may/TourOfHeroes/node_modules/handlebars
npm WARN checkPermissions Missing write access to /home/garg10may/TourOfHeroes/node_modules/del/node_modules/globby
npm WARN checkPermissions Missing write access to /home/garg10may/TourOfHeroes/node_modules/del
npm WARN checkPermissions Missing write access to /home/garg10may/TourOfHeroes/node_modules/engine.io
npm WARN checkPermissions Missing write access to /home/garg10may/TourOfHeroes/node_modules/engine.io-client
npm WARN checkPermissions Missing write access to /home/garg10may/TourOfHeroes/node_modules/@angular-devkit/build-optimizer
npm WARN checkPermissions Missing write access to /home/garg10may/TourOfHeroes/node_modules/@angular/compiler-cli
npm WARN checkPermissions Missing write access to /home/garg10may/TourOfHeroes/node_modules/codelyzer
npm WARN checkPermissions Missing write access to /home/garg10may/TourOfHeroes/node_modules/@babel
npm WARN checkPermissions Missing write access to /home/garg10may/TourOfHeroes/node_modules
npm WARN checkPermissions Missing write access to /home/garg10may/TourOfHeroes/node_modules/engine.io-client/node_modules
npm WARN checkPermissions Missing write access to /home/garg10may/TourOfHeroes/node_modules/engine.io/node_modules
npm WARN checkPermissions Missing write access to /home/garg10may/TourOfHeroes/node_modules/@angular/compiler-cli/node_modules
npm WARN checkPermissions Missing write access to /home/garg10may/TourOfHeroes/node_modules/babel-code-frame/node_modules
npm WARN checkPermissions Missing write access to /home/garg10may/TourOfHeroes/node_modules/@angular-devkit
npm WARN checkPermissions Missing write access to /home/garg10may/TourOfHeroes/node_modules/del/node_modules
npm WARN checkPermissions Missing write access to /home/garg10may/TourOfHeroes/node_modules/@angular
npm WARN checkPermissions Missing write access to /home/garg10may/TourOfHeroes/node_modules/@types
npm ERR! path /home/garg10may/TourOfHeroes/node_modules/@babel/types
npm ERR! code EACCES
npm ERR! errno -13
npm ERR! syscall access
npm ERR! Error: EACCES: permission denied, access '/home/garg10may/TourOfHeroes/node_modules/@babel/types'
npm ERR!  { [Error: EACCES: permission denied, access '/home/garg10may/TourOfHeroes/node_modules/@babel/types']
npm ERR!   stack:
npm ERR!    'Error: EACCES: permission denied, access \'/home/garg10may/TourOfHeroes/node_modules/@babel/types\'',
npm ERR!   errno: -13,
npm ERR!   code: 'EACCES',
npm ERR!   syscall: 'access',
npm ERR!   path: '/home/garg10may/TourOfHeroes/node_modules/@babel/types' }
npm ERR!
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator (though this is not recommended).

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/garg10may/.npm/_logs/2019-06-07T06_33_30_442Z-debug.log
garg10may@GCES15511:~/TourOfHeroes$
garg10may@GCES15511:~/TourOfHeroes$
garg10may@GCES15511:~/TourOfHeroes$ sudo npm i @angular-devkit/build-angular --save-dev
npm ERR! path /home/garg10may/TourOfHeroes/node_modules/@babel/highlight
npm ERR! code EACCES
npm ERR! errno -13
npm ERR! syscall rename
npm ERR! Error: EACCES: permission denied, rename '/home/garg10may/TourOfHeroes/node_modules/@babel/highlight' -> '/home/garg10may/TourOfHeroes/node_modules/@babel/.highlight.DELETE'
npm ERR!  { [Error: EACCES: permission denied, rename '/home/garg10may/TourOfHeroes/node_modules/@babel/highlight' -> '/home/garg10may/TourOfHeroes/node_modules/@babel/.highlight.DELETE']
npm ERR!   cause:
npm ERR!    { Error: EACCES: permission denied, rename '/home/garg10may/TourOfHeroes/node_modules/@babel/highlight' -> '/home/garg10may/TourOfHeroes/node_modules/@babel/.highlight.DELETE'
npm ERR!      errno: -13,
npm ERR!      code: 'EACCES',  
npm ERR!      syscall: 'rename',
npm ERR!      path: '/home/garg10may/TourOfHeroes/node_modules/@babel/highlight',
npm ERR!      dest:
npm ERR!       '/home/garg10may/TourOfHeroes/node_modules/@babel/.highlight.DELETE' },
npm ERR!   stack:
npm ERR!    'Error: EACCES: permission denied, rename \'/home/garg10may/TourOfHeroes/node_modules/@babel/highlight\' -> \'/home/garg10may/TourOfHeroes/node_modules/@babel/.highlight.DELETE\'',
npm ERR!   errno: -13,
npm ERR!   code: 'EACCES',
npm ERR!   syscall: 'rename',
npm ERR!   path: '/home/garg10may/TourOfHeroes/node_modules/@babel/highlight',
npm ERR!   dest:
npm ERR!    '/home/garg10may/TourOfHeroes/node_modules/@babel/.highlight.DELETE',
npm ERR!   parent: 'angular-tour-of-heroes' }
npm ERR!
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator (though this is not recommended).

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/garg10may/.npm/_logs/2019-06-07T06_35_12_613Z-debug.log

Generate new project from Angular CLI and copy angular.json file... I think this should work — Krzysztof Raciniewski, Jun 07 '19 at 06:26
The tutorial should be sufficient to get you started. As it is, this question is unanswerable. — theMayer, Jun 07 '19 at 06:33
If the npm install of the devkit doesnt help, restart IDE. Also check the version of the build-angular kit. There are some known issues. Had this errors the last couple of days too because of a big merge of two projects. — liqSTAR, Jun 07 '19 at 06:33
We can't answer you without your file structure and the command you have ran (with the location of where you ran it). Please provide a [mcve]. — , Jun 07 '19 at 06:36
@VolodymyrBilyachat getting permission denied error even with sudo — garg10may, Jun 07 '19 at 06:36
@Maryannah you can have the github link and try to run `ng serve` on it. That's minimal reproducible example. — garg10may, Jun 07 '19 at 06:38

score 2 · Accepted Answer · edited Jun 07 '19 at 08:04

2

You would also need tsconfig.app.json along with angular.json copy over these files from a new project.

Now run

npm update --> npm install --> ng serve

Remember to run all commands as sudo.

edited Jun 07 '19 at 08:04

garg10may

5,794
11
50
91

answered Jun 07 '19 at 06:38

Gurpreet Singh

3,061
5
19
36

it throws permission denied error for babel, posted in quesiton – garg10may Jun 07 '19 at 06:52
@garg10may are you updating your angular app version ? – Gurpreet Singh Jun 07 '19 at 07:08
yes used sudo command, have angular 8 globally and angular 7 for app – garg10may Jun 07 '19 at 07:28
`@angular-devkit/build-angular` this is introducing in angular 6. – Gurpreet Singh Jun 07 '19 at 07:34
no, as you will see in my question posted the command I am using is with sudo, but somehow it always gets stuck on `babel` part, I tried chmod etc. but that doesn't help – garg10may Jun 07 '19 at 07:36
if its not working then delete your node module folder and run these commands `npm install` -> `ng update` -> `npm update` – Gurpreet Singh Jun 07 '19 at 07:39
`npm install` itself gets stuck on `babel` part even with sudo – garg10may Jun 07 '19 at 07:40
1

ok, I checked out the project again needed to add `angular.json` and `tsconfig.json` both were missing. Ran `npm update` --> `npm install` --> `ng serve` didin't get any error this time. I think `npm update` was the essential one which fixed all this. thx for suggesting that. – garg10may Jun 07 '19 at 08:02
In fact, the default Angular project uses both tsconfig.json and tsconfig.app.json. And if you want to run tests (you should), tslint, tsconfig.spec and karma are necessary too. I would keep them all to consider your app a proper Angular App. – rogerdossantos Jun 07 '19 at 08:18

score 1 · Answer 2 · answered Jun 07 '19 at 07:32

Just made a test. Created a new project with ng new and add all files (not only the angular.json) that were missing. The project ran nicely. Your question is probably duplicate from this one: Angular6: How can I generate a default angular.json file from command line

Angular 2+, How to generate angular.json manually

2 Answers2