Folder structure for Angular and Nodejs

Question

I am going to create an app which deals with Angular5(front-end), Nodejs(middle-end) and MongoDB(back-end).

Below is the folder structure:

Package.json: "start": "ng build & node server.js"

Now when I am start the app by npm start, It throws the following error:

"Unable to find any apps in .angular-cli.json."

I hope node server is looking for this file to load angular codes. But it lies inside angular folder.

If I place both angular and node codes in same place, it works well.

But it looks more clumsy and a bit confusing. I don't want to compromise with my folder structure.

Can anyone please help to achieve the app working on the same folder structure that I would prefer?

Thanks in advance.

can you check if you have another package .json or .angular-cli.json in the parent directories? There are cases where this can create problems with the project detection — Arash, Apr 05 '18 at 05:03
@Arash pls find the angular.cli.json code: { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "project": { "name": "angular" }, "apps": [ { "root": "src", "outDir": "dist", "assets": [ "assets", "favicon.ico" ], — Sta-Dev, Apr 05 '18 at 05:07
"index": "index.html", "main": "main.ts", "polyfills": "polyfills.ts", "test": "test.ts", "tsconfig": "tsconfig.app.json", "testTsconfig": "tsconfig.spec.json", "prefix": "app", "styles": [ "styles.css" ], — Sta-Dev, Apr 05 '18 at 05:08
"scripts": [], "environmentSource": "environments/environment.ts", "environments": { "dev": "environments/environment.ts", "prod": "environments/environment.prod.ts" } } ], "e2e": { "protractor": { "config": "./protractor.conf.js" } }, — Sta-Dev, Apr 05 '18 at 05:08
@Arash there is only one package.json file and node_modules folder that kept common for both angular and node. — Sta-Dev, Apr 05 '18 at 05:09
have you created angular app using angular cli (ng new ) if so , check if there is any file in src folder , — Arash, Apr 05 '18 at 05:11
@Arash yes. angular app is created using angular cli (ng new) only. the src folder contains the necessary angular files. — Sta-Dev, Apr 05 '18 at 05:15
try ng serve , and see if the angular project is working as standalone — Arash, Apr 05 '18 at 05:17
That's why it's not working because .angular-cli.json file is inside the angular folder and you trying to run from the parent folder. You need to put that file in mean folder and change all required path inside the angular-cli.json file — Parth Savadiya, Apr 05 '18 at 06:26
@I.George plz upvote it, so others will notice it and useful for them also — Parth Savadiya, Apr 05 '18 at 06:53

score 0 · Answer 1 · answered Apr 05 '18 at 05:18

0

it might be that your global @angular/cli installation got corrupt. You may try a cache clean and reinstall..

npm cache clean
npm -g i @angular/cli

answered Apr 05 '18 at 05:18

Arash

3,458
7
32
50

I have done. but still no luck. getting the same error "Unable to find any apps in `.angular-cli.json`." – Sta-Dev Apr 05 '18 at 05:23

score 0 · Answer 2 · answered Apr 05 '18 at 05:27

0

If you use angular cli for creating the project, then looks something wrong in the package.json, (as I seen your comment on the previous answer)

first uninstall angular cli if already install by using npm uninstall -g @angular/cli, then npm install -g @angular/cli after cli installation ng new [project name /folder name]

cd [project name /folder name]
ng serve --open

try once.

answered Apr 05 '18 at 05:27

Jose G Varanam

767
8
19

angular works fine. But my problem is how to combine it with node since both angular and node having node_modules folder and package.json file. see my folder structure in the post. i wish to know whether that structure is possible or good one? – Sta-Dev Apr 05 '18 at 05:52

score 0 · Answer 3 · answered Jun 26 '19 at 07:08

I got this same error in my current project and was confused because I'm running the application / ng serve in one terminal, but got this when I tried to generate a component from another terminal. .angular-cli.json was already there and correct. So what gives?

I realized that I used the shortcut to open VisualStudio Code's internal terminal -- which opened the terminal to the *root of the project * (like most IDEs). The project contains other things in addition to the Angular application folder that has the .angular-cli.json file in question. I just had to cd to the right folder and run ng g c again and things were fine.

In my case it was just a silly error. I thought I'd come back to share in order to save people a real headache for something so simple. I see that Shiva actually has mentioned this above, but I thought I would give a bit more detail so it doesn't get overlooked.

Reference URL: How to generate .angular-cli.json file in Angular Cli?

Folder structure for Angular and Nodejs

3 Answers3