Angular Project Structure with separate package.json files

Question

I saw this Project Structure in Angular with Node.js as backend, where the Angular node modules and package.json were in the "app" folder, while the node.js' node modules and package.json were in the root of the project. (watch picture)

How do i get the requested outcome?

@VighneshRaut How to get Angular nodemodules and package.json separated from Node.js nodemodules and package.json, like shown in the picture — Raku
– Raku, Commented May 30, 2020 at 13:54
@AakashGarg Yes but when i import node.js in the project, it just get's thrown into the same node modules and package.json as Angular — Raku
– Raku, Commented May 30, 2020 at 13:59

vighnesh153 · Accepted Answer · 2020-05-30 13:58:03Z

1

Create the root directory.
From within the directory, run 'npm init'
To create the server file, run 'touch server.js'
Then, to create the angular app, from inside the root directory, run 'ng new app-name'

answered May 30, 2020 at 13:58

vighnesh153

5,5103 gold badges26 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Aakash Garg · Accepted Answer · 2020-05-30 14:01:12Z

0

Step 1 :- Run npm i @angular/cli@latest in command prompt

Step 2 :- create a empty folder.

Step 3 :- go to your newly created folder inside command prompt.

Step 4 :- run npm init

Step 5 :- then run ng new my-app

Step 6 :- then run touch server.js

answered May 30, 2020 at 14:01

Aakash Garg

11k2 gold badges11 silver badges29 bronze badges

Comments

Fateh Mohamed · Accepted Answer · 2020-05-30 14:09:56Z

0

I recommand that you use NX https://nx.dev/, it will give you a perfect structure and many benefits of monorepos, you can have multiple angular apps and a node backend taht you can it as an app like this

ng g node-app backend-api

You will have a structure like this:

apps/
  angularApp-1/
  angularApp-1-e2e/
  angularApp-2/
  angularApp-2-e2e/
  api/ //your node app
   src/
     app/
     assets/
     environemnts/
     main.ts
   jest.config.js
   tsconfig.app.json
   tsconfig.spec.json
  tslint.json 
libs/

tools/
angular.json
nx.json
package.json
tsconfig.json
tslint.json

answered May 30, 2020 at 14:09

Fateh Mohamed

21.5k5 gold badges46 silver badges56 bronze badges

Comments

BillyN · Accepted Answer · 2020-05-30 14:16:04Z

The node_modules folders should be seperated between the Angular front end and the Node backend. E.g A standard project structure for a full stack angaulr/node app should be something like.

.
├── ProjectName
|   ├── angular-app-name
|   └── server

For a Project structure like this run

mkdir ProjectName //Create project root directory
mkdir server //Create node server folder
cd server
npm init //Initialize npm
touch server.js //Create server js file for node backenk
cd .. //Back to Project root
ng new {app-name} //Create angular project

From what I can tell you want something like this, with your angular app sitting within the node backend.

.
├── ProjectName
|   ├── angular-app-name
|   └── server.js
|   └── node_modules

mkdir ProjectName //Create project root directory
npm init //Initialize npm
touch server.js //Create server js file for node backenk
ng new {app-name} //Create angular project

I personally think the more standard project-> backend/frontend structure makes more sense, but both will work fine.

Collectives™ on Stack Overflow

Angular Project Structure with separate package.json files

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related