package.json in Angular | Level 0 to Infinity

1. Introduction to package.json

package.json is one of the most important files in an Angular project. It describes the project, stores useful commands, and lists the packages needed to run and build the app.

Simple meaning: package.json is the project identity card plus command center plus dependency list.

package.json
├── project name
├── project version
├── npm scripts
├── dependencies
├── devDependencies
└── package manager information

2. Why package.json Is Important

Angular cannot work properly without package information. The project needs Angular packages, build tools, TypeScript, testing tools, formatting tools, and useful npm scripts.

Project Identity Stores the project name, version, and private/public status.

Command Center Stores scripts like start, build, test, and deploy commands.

Package List Stores Angular, TypeScript, Tailwind, testing, and deployment packages.

If you understand package.json, you can understand how an Angular project is started, built, tested, and deployed.

3. Basic package.json Structure

A simple Angular package.json looks like this:

{
  "name": "my-angular-app",
  "version": "0.0.0",
  "scripts": {
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/core": "^21.2.0",
    "@angular/common": "^21.2.0",
    "@angular/router": "^21.2.0"
  },
  "devDependencies": {
    "@angular/cli": "^21.2.10",
    "typescript": "~5.9.2"
  }
}

4. Your Current Angular package.json

Your current project is named:

programmers-picnic-angular-demo

It already includes Angular packages, Tailwind packages, Vitest, Prettier, and angular-cli-ghpages. That means the project already has the package needed for GitHub Pages deployment.

Your Current Scripts

"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "watch": "ng build --watch --configuration development",
  "test": "ng test"
}

Recommended Updated Scripts for Your Domain

"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "watch": "ng build --watch --configuration development",
  "test": "ng test",
  "build:github": "ng build --configuration production --base-href /",
  "deploy:github": "ng deploy --base-href=/"
}

Since your final URL is https://angular.learnwithchampak.live/, your base href should be /.

5. name, version, private, and packageManager

These fields describe the project.

{
  "name": "programmers-picnic-angular-demo",
  "version": "0.0.0",
  "private": true,
  "packageManager": "npm@10.9.3"
}

Field	Meaning	Beginner Explanation
`name`	Project/package name.	This is the identity of your Angular project.
`version`	Current project version.	Usually starts from `0.0.0` for new apps.
`private`	Prevents accidental publishing to npm.	For Angular apps, keep it `true`.
`packageManager`	Package manager and version.	Your project says it uses npm.

6. scripts: The Command Center

The scripts section lets us create shortcut commands. Instead of typing long commands again and again, we can use npm run.

Example Scripts

"scripts": {
  "start": "ng serve",
  "build": "ng build",
  "test": "ng test"
}

How to Run Scripts

npm start
npm run build
npm test

Some scripts have special shortcuts. For example, npm start can run the start script. For custom scripts like deploy:github, use npm run deploy:github.

Recommended Scripts for Your Angular Project

"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "watch": "ng build --watch --configuration development",
  "test": "ng test",
  "build:github": "ng build --configuration production --base-href /",
  "deploy:github": "ng deploy --base-href=/"
}

Run Locally

npm start

Build for Custom Domain

npm run build:github

Deploy to Custom Domain

npm run deploy:github

7. dependencies: Packages Needed by the App

dependencies are packages that the Angular application needs to run.

"dependencies": {
  "@angular/common": "^21.2.0",
  "@angular/compiler": "^21.2.0",
  "@angular/core": "^21.2.0",
  "@angular/forms": "^21.2.0",
  "@angular/platform-browser": "^21.2.0",
  "@angular/router": "^21.2.0",
  "rxjs": "~7.8.0",
  "tslib": "^2.3.0"
}

Package	Purpose
`@angular/core`	Main Angular features like components and dependency injection.
`@angular/common`	Common Angular directives, pipes, and utilities.
`@angular/forms`	Template-driven and reactive forms.
`@angular/router`	Angular page routing and navigation.
`@angular/platform-browser`	Runs Angular apps in the browser.
`rxjs`	Reactive programming library used by Angular.
`tslib`	Runtime helpers for TypeScript output.

Install a Normal Dependency

npm install package-name

Example

npm install rxjs

8. devDependencies: Packages Needed for Development

devDependencies are packages used while developing, building, formatting, testing, or deploying.

"devDependencies": {
  "@angular/build": "^21.2.10",
  "@angular/cli": "^21.2.10",
  "@angular/compiler-cli": "^21.2.0",
  "@tailwindcss/postcss": "^4.1.12",
  "angular-cli-ghpages": "^3.0.3",
  "jsdom": "^28.0.0",
  "postcss": "^8.5.3",
  "prettier": "^3.8.1",
  "tailwindcss": "^4.1.12",
  "typescript": "~5.9.2",
  "vitest": "^4.0.8"
}

Package	Purpose
`@angular/cli`	Provides the `ng` command.
`@angular/build`	Build tooling for Angular apps.
`@angular/compiler-cli`	Angular compiler integration with TypeScript.
`typescript`	TypeScript language support.
`tailwindcss`	Utility CSS framework.
`@tailwindcss/postcss`	Tailwind integration with PostCSS.
`postcss`	CSS processing tool.
`prettier`	Code formatting tool.
`vitest`	Testing framework.
`jsdom`	DOM simulation for tests.
`angular-cli-ghpages`	Deployment helper for GitHub Pages.

Install a Development Dependency

npm install -D package-name

Example

npm install -D prettier

9. Version Symbols: ^ and ~

Package versions often have symbols before them. These symbols tell npm how much it can update the package.

Symbol	Example	Simple Meaning
`^`	`^21.2.0`	Allow compatible updates within the same major version.
`~`	`~5.9.2`	Allow smaller patch-level updates.
No symbol	`21.2.0`	Use this exact version.
`*`	`*`	Allow any version. Avoid this in serious projects.

Do not randomly change package versions. Angular packages should usually stay aligned with each other.

10. package.json vs package-lock.json

package.json describes the package rules. package-lock.json stores the exact versions installed.

File	Purpose	Edit Manually?
`package.json`	Stores scripts and dependency version ranges.	Yes, carefully.
`package-lock.json`	Stores exact installed dependency versions.	No, usually let npm manage it.

Install from package.json

npm install

Clean Install from package-lock.json

npm ci

npm ci is commonly used in automated build systems because it installs from the lock file cleanly.

11. Important npm Commands

npm reads package.json and performs actions.

Command	Meaning	When to Use
`npm install`	Install all packages listed in package.json.	After cloning a project.
`npm start`	Run the start script.	To run Angular locally.
`npm run build`	Run the build script.	To build the project.
`npm test`	Run the test script.	To run tests.
`npm run deploy:github`	Run custom deploy script.	To deploy to GitHub Pages.
`npm install package-name`	Add a runtime dependency.	When app needs a new package.
`npm install -D package-name`	Add a development dependency.	When build/test/dev tools are needed.
`npm uninstall package-name`	Remove a package.	When a package is no longer needed.

12. package.json in an Angular Project

In Angular, package.json connects npm commands with Angular CLI commands.

Example

npm start

runs:

ng serve

13. Deployment Scripts for angular.learnwithchampak.live

Your final Angular site URL is:

https://angular.learnwithchampak.live/

Because this is a custom domain root, the correct base href is:

Add These Scripts

"build:github": "ng build --configuration production --base-href /",
"deploy:github": "ng deploy --base-href=/"

Complete Scripts Section

"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "watch": "ng build --watch --configuration development",
  "test": "ng test",
  "build:github": "ng build --configuration production --base-href /",
  "deploy:github": "ng deploy --base-href=/"
}

Build Command

npm run build:github

Deploy Command

npm run deploy:github

Do not use --base-href=/programmers-picnic-angular-demo/ for your custom domain. Use --base-href=/.

14. Safe Editing Rules

package.json is powerful. One missing comma can break the project.

Rule	Reason
Always keep valid JSON.	No comments, no trailing commas, all keys in double quotes.
Do not delete Angular dependencies randomly.	The app may stop compiling.
Commit before major package changes.	You can return to a working version.
Use `npm install` instead of manually adding unknown packages.	npm updates both package.json and lock file correctly.
Keep Angular package versions aligned.	Mismatched Angular package versions can cause errors.

Validate package.json

npm install

If package.json has invalid JSON, npm will show an error.

15. Expert-Level package.json

Expert developers use package.json for workflow automation.

Professional Scripts

"scripts": {
  "start": "ng serve",
  "start:open": "ng serve --open",
  "start:4300": "ng serve --port 4300",
  "build": "ng build",
  "build:prod": "ng build --configuration production",
  "build:github": "ng build --configuration production --base-href /",
  "watch": "ng build --watch --configuration development",
  "test": "ng test",
  "format": "prettier --write .",
  "deploy:github": "ng deploy --base-href=/"
}

Expert Workflow

npm install
npm start
npm run build:github
npm run deploy:github

CI/CD Style Workflow

npm ci
npm run build:github

In professional projects, scripts make development consistent for the whole team.

16. Common package.json Mistakes

Mistake	Problem	Fix
Missing comma between fields	Invalid JSON.	Add comma between properties.
Trailing comma after last item	Invalid JSON.	Remove the final comma.
Using single quotes	JSON requires double quotes.	Use double quotes.
Deleting `@angular/core`	Angular app will break.	Do not remove core packages.
Using wrong base href	Blank site or broken assets after deploy.	Use `/` for custom domain root.
Manually editing package-lock.json	Can corrupt installed package state.	Let npm manage it.

17. Student Assignment

Open your Angular project’s package.json and complete these tasks.

Task 1: Find Project Name

"name": "programmers-picnic-angular-demo"

Task 2: Find Scripts

"scripts": {
  "start": "ng serve",
  "build": "ng build",
  "test": "ng test"
}

Task 3: Add Deployment Scripts

"build:github": "ng build --configuration production --base-href /",
"deploy:github": "ng deploy --base-href=/"

Task 4: Run Commands

npm install
npm start
npm run build:github
npm run deploy:github

Final learning: package.json controls how your Angular project is installed, started, built, tested, and deployed.

Final Summary

Question	Answer
What is package.json?	The main npm project configuration file.
Where are npm commands stored?	Inside `scripts`.
Where are Angular runtime packages stored?	Inside `dependencies`.
Where are build and development tools stored?	Inside `devDependencies`.
How do we run the Angular app locally?	`npm start`
How do we deploy for angular.learnwithchampak.live?	`npm run deploy:github`
What base href should the custom domain use?	`/`
Should beginners edit package-lock.json manually?	No.

package.json in Angular: Level 0 to Infinity

1. Introduction to package.json

2. Why package.json Is Important

3. Basic package.json Structure

4. Your Current Angular package.json

Your Current Scripts

Recommended Updated Scripts for Your Domain

5. name, version, private, and packageManager

6. scripts: The Command Center

Example Scripts

How to Run Scripts

Recommended Scripts for Your Angular Project

Run Locally

Build for Custom Domain

Deploy to Custom Domain

7. dependencies: Packages Needed by the App

Install a Normal Dependency

Example

8. devDependencies: Packages Needed for Development

Install a Development Dependency

Example

9. Version Symbols: ^ and ~

10. package.json vs package-lock.json

Install from package.json

Clean Install from package-lock.json

11. Important npm Commands

12. package.json in an Angular Project

Example

13. Deployment Scripts for angular.learnwithchampak.live

Add These Scripts

Complete Scripts Section

Build Command

Deploy Command

14. Safe Editing Rules

Validate package.json

15. Expert-Level package.json

Professional Scripts

Expert Workflow

CI/CD Style Workflow

16. Common package.json Mistakes

17. Student Assignment

Task 1: Find Project Name

Task 2: Find Scripts

Task 3: Add Deployment Scripts

Task 4: Run Commands

Final Summary