Angular 项目结构，带有单独的 package.json 文件

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?

Answer 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'

Answer 2

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

Answer 3

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

Answer 4

The node_modules folders should be seperated between the Angular front end and the Node backend. Eg 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.