Nov 17, 2025 · Nov 17, 2025 · Nov 17, 2025 · Nov 17, 2025 · Nov 25, 2025 · Nov 25, 2025
diff --git a/docs/en/framework/ui/angular/pwa-configuration.md b/docs/en/framework/ui/angular/pwa-configuration.md

 So, Angular CLI updates some files and add a few others:

 - **ngsw-config.json** is where the [service worker configuration](https://angular.io/guide/service-worker-config) is placed. Not all PWAs have this file. It is specific to Angular.
 - **ngsw-config.json** is where the [service worker configuration](https://angular.dev/ecosystem/service-workers/config) is placed. Not all PWAs have this file. It is specific to Angular.
 - **manifest.webmanifest** is a [web app manifest](https://developer.mozilla.org/en-US/docs/Web/Manifest) and provides information about your app in JSON format.
 - **icons** are placeholder icons that are referred to in your web app manifest. We will replace these in a minute.
 - **angular.json** has following modifications:
  - `assets` include _manifest.webmanifest_.
  - `serviceWorker` is `true` in production build.
  - `ngswConfigPath` refers to _ngsw-config.json_.
 - **package.json** has _@angular/service-worker_ as a new dependency.
 - **app.config.ts**imports `ServiceWorkerModule` and registers aservice workerfilename.
 - **app.config.ts**The `provideServiceWorker` provider is imported to register theservice workerscript.
 - **index.html** has following modifications:
  - A `<link>` element that refers to _manifest.webmanifest_.
  - A `<meta>` tag that sets a theme color.
 }
 ```

 In case you want to cache other static files, please refer to the [service worker configuration document](https://angular.io/guide/service-worker-config#assetgroups) on Angular.io.
 In case you want to cache other static files, please refer to the [service worker configuration document](https://angular.dev/ecosystem/service-workers/config#assetgroups) on Angular.dev.

 ### 3.2 Set Data Groups

 This part is unique to your project. We recommend being very careful about which endpoints to cache. Please refer to [service worker configuration document](https://angular.io/guide/service-worker-config#datagroups) on Angular.io for details.
 This part is unique to your project. We recommend being very careful about which endpoints to cache. Please refer to [service worker configuration document](https://angular.dev/ecosystem/service-workers/config#datagroups) on Angular.dev for details.
diff --git a/docs/en/framework/ui/angular/quick-start.md b/docs/en/framework/ui/angular/quick-start.md
   - [Visual Studio IntelliCode](https://marketplace.visualstudio.com/items?itemName=visualstudioexptteam.vscodeintellicode)
   - [Path Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense)
   - [npm Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense)
   - [Angular10Snippets- TypeScript, Html, Angular Material, ngRx, RxJS & Flex Layout](https://marketplace.visualstudio.com/items?itemName=Mikael.Angular-BeastCode)
   - [Angular Snippets2025 - v20](https://marketplace.visualstudio.com/items?itemName=JMGomes.angular-latest-snippets)
   - [JavaScript (ES6) code snippets](https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets)
   - [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome)
   - [Git History](https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory)
   - [indent-rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow)

 - **app.config.ts** is the [root configuration](https://angular.dev/api/platform-browser/bootstrapApplication) that includes information about how parts of your application are related and what to run at the initiation of your application.
 - **route.provider.ts** is used for [modifying the menu](../angular/modifying-the-menu.md).
 - **assets** is for static files. A file (e.g. an image) placed in this folder will be available as is when the application is served.
 - **environments** includes one file per environment configuration. There are two configurations by default, but you may always introduce another one. These files are directly referred to in _angular.json_ and help you have different builds and application variables. Please refer to [configuring Angular application environments](https://angular.io/guide/build#configuring-application-environments) for details.
 - **environments** includes one file per environment configuration. There are two configurations by default, but you may always introduce another one. These files are directly referred to in _angular.json_ and help you have different builds and application variables. Please refer to [configuring Angular application environments](https://angular.dev/tools/cli/environments#angular-cli-configurations) for details.
 - **index.html** is the HTML page served to visitors and will contain everything required to run your application. Servers should be configured to redirect every request to this page so that the Angular router can take over. Do not worry about how to add JavaScript and CSS files to it, because Angular CLI will do it automatically.
 - **main.ts** bootstraps and configures Angular application to run in the browser. It is production-ready, so forget about it.
 - **polyfill.ts** is where you can add polyfills if you want to [support legacy browsers](https://angular.io/guide/browser-support).
 - **polyfill.ts** is where you can add polyfills if you want to [support legacy browsers](https://angular.dev/reference/versions#browser-support).
 - **style.scss** is the default entry point for application styles. You can change this or add new entry points in _angular.json_.
 - **test.ts** helps the unit test runner discover and bootstrap spec files.


 <img alt="New ABP Angular project home page" src="./images/quick-start---new-project-home-page.png" width="744px" style="max-width:100%">

 You may modify the behavior of the **start script** (in the package.json file) by changing the parameters passed to the `ng serve` command. For instance, if you do not want a browser window to open next time you run the script, remove `--open` from the end of it. Please check [ng serve documentation](https://angular.io/cli/serve) for all available options.
 You may modify the behavior of the **start script** (in the package.json file) by changing the parameters passed to the `ng serve` command. For instance, if you do not want a browser window to open next time you run the script, remove `--open` from the end of it. Please check [ng serve documentation](https://angular.dev/cli/serve) for all available options.

 ### Angular Live Development Server

 The development serverofAngular is based on [Webpack DevServer](https://webpack.js.org/configuration/dev-server/). It tracks changes to source files andsyncs the browserwindowafter an incrementalre-compilation every time <sup id="a-dev-server">[2](#f-dev-server)</sup> you make one. Your experience will be like this:
 The development serverruns viaAngular's Application Builder and uses a fast, moderndevserver under the hood. It tracks changes to source files andrefreshes the browser after an incremental compilation every time <sup id="a-dev-server">[2](#f-dev-server)</sup> you make one. Your experience will be like this:

 <img alt="Angular Live Development Server compiles again on template change and removes a button from the page displayed by the browser." src="./images/quick-start---angular-live-development-server.gif" width="818px" style="max-width:100%">


 <sup id="f-certificate-error"><b>1</b></sup> _If you see the error above when you run the Angular app, your browser might be blocking access to the API because of the self-signed certificate. Visit that address and allow access to it (once). When you see the Swagger interface, you are good to go._ <sup>[↩](#a-certificate-error)</sup>

 <sup id="f-dev-server"><b>2</b></sup> _Sometimes, depending on the file changed,Webpack may missthechange and cannot reflect it in thebrowser. For example,tsconfigfiles are notbeing tracked. In such a case, please restart the development server._ <sup>[↩](#a-dev-server)</sup>
 <sup id="f-dev-server"><b>2</b></sup> _Sometimes, depending on the file changed, thedevelopment server may not pick up thechange (for example,certain configurationfileslike tsconfigare notwatched). In such a case, please restart the development server._ <sup>[↩](#a-dev-server)</sup>

 ---

 ## How to Build the Angular Application

 An Angular application can have multiple [build targets](https://angular.io/guide/glossary#target), i.e. **configurations in angular.json** which define how [Architect](https://angular.io/guide/glossary#architect) will build applications and libraries. Usually, each build configuration has a separate environment variable file. Currently, the project has two: One for development and one for production.
 An Angular application can have multiple [build targets](https://angular.dev/tools/cli/cli-builder#target-configuration), i.e. **configurations in angular.json** which define how [Architect](https://angular.dev/reference/configs/workspace-config#build-target) will build applications and libraries. Usually, each build configuration has a separate environment variable file. Currently, the project has two: One for development and one for production.

 ```js
 // this is what environment variables look like
 } as Config.Environment;
 ```

 When you run the development server, variables defined in _environment.ts_ take effect. Similarly, in production mode, the default environment is replaced by _environment.prod.ts_ and completely different variables become effective. You may even [create a new build configuration](https://angular.dev/reference/configs/workspace-config#alternate-build-configurations) and set [file replacements](https://angular.io/guide/build#configure-target-specific-file-replacements) to use a completely new environment. For now, we will start a production build:
 When you run the development server, variables defined in _environment.ts_ take effect. Similarly, in production mode, the default environment is replaced by _environment.prod.ts_ and completely different variables become effective. You may even [create a new build configuration](https://angular.dev/reference/configs/workspace-config#alternate-build-configurations) and set [file replacements](https://angular.dev/tools/cli/environments#using-environment-specific-variables-in-your-app) to use a completely new environment. For now, we will start a production build:

 1. Open your terminal and navigate to the root Angular folder.
 2. Run `yarn` or `npm install` if you have not installed dependencies already.
 ```shell
 # please replace MyProjectName with your project name

 npx servor dist/MyProjectName index.html 4200 --browse
 npx servor dist/MyProjectName/browser index.html 4200 --browse
 ```

 This command will download and start a simple static server, a browser window at `http://localhost:4200` will open, and the compiled output of your project will be served.

 Of course, you need your application to run on an optimized web server and become available to everyone. This is quite straight-forward:

 1. Create a new static web server instance. You can use a service like [Azure App Service](https://azure.microsoft.com/en-us/services/app-service/web/), [Firebase](https://firebase.google.com/docs/hosting), [Netlify](https://www.netlify.com/), [Vercel](https://vercel.com/), or even [GitHub Pages](https://angular.io/guide/deployment#deploy-to-github-pages). Another option is maintaining own web server with [NGINX](https://www.nginx.com/), [IIS](https://www.iis.net/), [Apache HTTP Server](https://httpd.apache.org/), or equivalent.
 1. Create a new static web server instance. You can use a service like [Azure App Service](https://azure.microsoft.com/en-us/services/app-service/web/), [Firebase](https://firebase.google.com/docs/hosting), [Netlify](https://www.netlify.com/), [Vercel](https://vercel.com/), or even [GitHub Pages](https://angular.dev/tools/cli/deployment). Another option is maintaining own web server with [NGINX](https://www.nginx.com/), [IIS](https://www.iis.net/), [Apache HTTP Server](https://httpd.apache.org/), or equivalent.
 2. Copy the files from `dist/MyProjectName` <sup id="a-dist-folder-name">[1](#f-dist-folder-name)</sup> to a publicly served destination on the server via CLI of the service provider, SSH, or FTP (whichever is available). This step would be defined as a job if you have a CI/CD flow.
 3. [Configure the server](https://angular.io/guide/deployment#server-configuration) to redirect all requests to the _index.html_ file. Some services do that automatically. Others require you [to add a file to the bundle via assets](https://angular.io/guide/workspace-config#assets-configuration) which describes the server how to do the redirections. Occasionally, you may need to do manual configuration.
 3. [Configure the server](https://angular.dev/tools/cli/deployment#server-configuration) to redirect all requests to the _index.html_ file. Some services do that automatically. Others require you [to add a file to the bundle via assets](https://angular.dev/reference/configs/workspace-config) which describes the server how to do the redirections. Occasionally, you may need to do manual configuration.

 In addition, you can [deploy your application to certain targets using the Angular CLI](https://angular.io/guide/deployment#automatic-deployment-with-the-cli). Here are some deploy targets:
 In addition, you can [deploy your application to certain targets using the Angular CLI](https://angular.dev/tools/cli/deployment#automatic-deployment-with-the-cli). Here are some deploy targets:

 - [Azure](https://github.com/Azure/ng-deploy-azure#readme)
 - [Firebase](https://github.com/angular/angularfire#readme)
Original file line number	Diff line number	Diff line change
Expand Up		@@ -37,15 +37,15 @@ Here is the output of the command:

Copy link Contributor sumeyyeKurtulusNov 25, 2025 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. This screen shot could be updated as it still uses module structure.
		So, Angular CLI updates some files and add a few others:

		- ngsw-config.json is where the [service worker configuration](https://angular.io/guide/service-worker-config) is placed. Not all PWAs have this file. It is specific to Angular.
		- ngsw-config.json is where the [service worker configuration](https://angular.dev/ecosystem/service-workers/config) is placed. Not all PWAs have this file. It is specific to Angular.
		- manifest.webmanifest is a [web app manifest](https://developer.mozilla.org/en-US/docs/Web/Manifest) and provides information about your app in JSON format.
		- icons are placeholder icons that are referred to in your web app manifest. We will replace these in a minute.
		- angular.json has following modifications:
		- `assets` include _manifest.webmanifest_.
		- `serviceWorker` is `true` in production build.
		- `ngswConfigPath` refers to _ngsw-config.json_.
		- package.json has _@angular/service-worker_ as a new dependency.
		- app.config.tsimports `ServiceWorkerModule` and registers aservice workerfilename.
		- app.config.tsThe `provideServiceWorker` provider is imported to register theservice workerscript.
		- index.html has following modifications:
		- A `<link>` element that refers to _manifest.webmanifest_.
		- A `<meta>` tag that sets a theme color.
Expand DownExpand Up		@@ -342,8 +342,8 @@ Open _ngsw-config.json_ file and replace its content with this:
		}
		```

		In case you want to cache other static files, please refer to the [service worker configuration document](https://angular.io/guide/service-worker-config#assetgroups) on Angular.io.
		In case you want to cache other static files, please refer to the [service worker configuration document](https://angular.dev/ecosystem/service-workers/config#assetgroups) on Angular.dev.

		### 3.2 Set Data Groups

		This part is unique to your project. We recommend being very careful about which endpoints to cache. Please refer to [service worker configuration document](https://angular.io/guide/service-worker-config#datagroups) on Angular.io for details.
		This part is unique to your project. We recommend being very careful about which endpoints to cache. Please refer to [service worker configuration document](https://angular.dev/ecosystem/service-workers/config#datagroups) on Angular.dev for details.
Original file line number	Diff line number	Diff line change
Expand Up		@@ -22,9 +22,8 @@ Please follow the steps below to prepare your development environment for Angula
		- [Visual Studio IntelliCode](https://marketplace.visualstudio.com/items?itemName=visualstudioexptteam.vscodeintellicode)
		- [Path Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense)
		- [npm Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense)
		- [Angular10Snippets- TypeScript, Html, Angular Material, ngRx, RxJS & Flex Layout](https://marketplace.visualstudio.com/items?itemName=Mikael.Angular-BeastCode)
		- [Angular Snippets2025 - v20](https://marketplace.visualstudio.com/items?itemName=JMGomes.angular-latest-snippets)
		- [JavaScript (ES6) code snippets](https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets)
		- [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome)
		- [Git History](https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory)
		- [indent-rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow)

Expand DownExpand Up		@@ -84,10 +83,10 @@ Now let us take a look at the contents of the source folder.
		- app.config.ts is the [root configuration](https://angular.dev/api/platform-browser/bootstrapApplication) that includes information about how parts of your application are related and what to run at the initiation of your application.
		- route.provider.ts is used for [modifying the menu](../angular/modifying-the-menu.md).
		- assets is for static files. A file (e.g. an image) placed in this folder will be available as is when the application is served.
		- environments includes one file per environment configuration. There are two configurations by default, but you may always introduce another one. These files are directly referred to in _angular.json_ and help you have different builds and application variables. Please refer to [configuring Angular application environments](https://angular.io/guide/build#configuring-application-environments) for details.
		- environments includes one file per environment configuration. There are two configurations by default, but you may always introduce another one. These files are directly referred to in _angular.json_ and help you have different builds and application variables. Please refer to [configuring Angular application environments](https://angular.dev/tools/cli/environments#angular-cli-configurations) for details.
		- index.html is the HTML page served to visitors and will contain everything required to run your application. Servers should be configured to redirect every request to this page so that the Angular router can take over. Do not worry about how to add JavaScript and CSS files to it, because Angular CLI will do it automatically.
		- main.ts bootstraps and configures Angular application to run in the browser. It is production-ready, so forget about it.
		- polyfill.ts is where you can add polyfills if you want to [support legacy browsers](https://angular.io/guide/browser-support).
		- polyfill.ts is where you can add polyfills if you want to [support legacy browsers](https://angular.dev/reference/versions#browser-support).
		- style.scss is the default entry point for application styles. You can change this or add new entry points in _angular.json_.
		- test.ts helps the unit test runner discover and bootstrap spec files.

Expand All		@@ -106,11 +105,11 @@ Now that you know about the files and folders, we can get the application up and

		<img alt="New ABP Angular project home page" src="./images/quick-start---new-project-home-page.png" width="744px" style="max-width:100%">

		You may modify the behavior of the start script (in the package.json file) by changing the parameters passed to the `ng serve` command. For instance, if you do not want a browser window to open next time you run the script, remove `--open` from the end of it. Please check [ng serve documentation](https://angular.io/cli/serve) for all available options.
		You may modify the behavior of the start script (in the package.json file) by changing the parameters passed to the `ng serve` command. For instance, if you do not want a browser window to open next time you run the script, remove `--open` from the end of it. Please check [ng serve documentation](https://angular.dev/cli/serve) for all available options.

		### Angular Live Development Server

		The development serverofAngular is based on [Webpack DevServer](https://webpack.js.org/configuration/dev-server/). It tracks changes to source files andsyncs the browserwindowafter an incrementalre-compilation every time <sup id="a-dev-server">[2](#f-dev-server)</sup> you make one. Your experience will be like this:
		The development serverruns viaAngular's Application Builder and uses a fast, moderndevserver under the hood. It tracks changes to source files andrefreshes the browser after an incremental compilation every time <sup id="a-dev-server">[2](#f-dev-server)</sup> you make one. Your experience will be like this:

		<img alt="Angular Live Development Server compiles again on template change and removes a button from the page displayed by the browser." src="./images/quick-start---angular-live-development-server.gif" width="818px" style="max-width:100%">

Expand All		@@ -122,13 +121,13 @@ Please keep in mind that you should not use this server in production. To provid

		<sup id="f-certificate-error"><b>1</b></sup> _If you see the error above when you run the Angular app, your browser might be blocking access to the API because of the self-signed certificate. Visit that address and allow access to it (once). When you see the Swagger interface, you are good to go._ <sup>[↩](#a-certificate-error)</sup>

		<sup id="f-dev-server"><b>2</b></sup> _Sometimes, depending on the file changed,Webpack may missthechange and cannot reflect it in thebrowser. For example,tsconfigfiles are notbeing tracked. In such a case, please restart the development server._ <sup>[↩](#a-dev-server)</sup>
		<sup id="f-dev-server"><b>2</b></sup> _Sometimes, depending on the file changed, thedevelopment server may not pick up thechange (for example,certain configurationfileslike tsconfigare notwatched). In such a case, please restart the development server._ <sup>[↩](#a-dev-server)</sup>

		---

		## How to Build the Angular Application

		An Angular application can have multiple [build targets](https://angular.io/guide/glossary#target), i.e. configurations in angular.json which define how [Architect](https://angular.io/guide/glossary#architect) will build applications and libraries. Usually, each build configuration has a separate environment variable file. Currently, the project has two: One for development and one for production.
		An Angular application can have multiple [build targets](https://angular.dev/tools/cli/cli-builder#target-configuration), i.e. configurations in angular.json which define how [Architect](https://angular.dev/reference/configs/workspace-config#build-target) will build applications and libraries. Usually, each build configuration has a separate environment variable file. Currently, the project has two: One for development and one for production.

		```js
		// this is what environment variables look like
Expand DownExpand Up		@@ -161,7 +160,7 @@ export const environment = {
		} as Config.Environment;
		```

		When you run the development server, variables defined in _environment.ts_ take effect. Similarly, in production mode, the default environment is replaced by _environment.prod.ts_ and completely different variables become effective. You may even [create a new build configuration](https://angular.dev/reference/configs/workspace-config#alternate-build-configurations) and set [file replacements](https://angular.io/guide/build#configure-target-specific-file-replacements) to use a completely new environment. For now, we will start a production build:
		When you run the development server, variables defined in _environment.ts_ take effect. Similarly, in production mode, the default environment is replaced by _environment.prod.ts_ and completely different variables become effective. You may even [create a new build configuration](https://angular.dev/reference/configs/workspace-config#alternate-build-configurations) and set [file replacements](https://angular.dev/tools/cli/environments#using-environment-specific-variables-in-your-app) to use a completely new environment. For now, we will start a production build:

		1. Open your terminal and navigate to the root Angular folder.
		2. Run `yarn` or `npm install` if you have not installed dependencies already.
Expand All		@@ -180,18 +179,18 @@ Angular web applications run on the browser and require no server except for a [
		```shell
		# please replace MyProjectName with your project name

		npx servor dist/MyProjectName index.html 4200 --browse
		npx servor dist/MyProjectName/browser index.html 4200 --browse
		```

		This command will download and start a simple static server, a browser window at `http://localhost:4200` will open, and the compiled output of your project will be served.

		Of course, you need your application to run on an optimized web server and become available to everyone. This is quite straight-forward:

		1. Create a new static web server instance. You can use a service like [Azure App Service](https://azure.microsoft.com/en-us/services/app-service/web/), [Firebase](https://firebase.google.com/docs/hosting), [Netlify](https://www.netlify.com/), [Vercel](https://vercel.com/), or even [GitHub Pages](https://angular.io/guide/deployment#deploy-to-github-pages). Another option is maintaining own web server with [NGINX](https://www.nginx.com/), [IIS](https://www.iis.net/), [Apache HTTP Server](https://httpd.apache.org/), or equivalent.
		1. Create a new static web server instance. You can use a service like [Azure App Service](https://azure.microsoft.com/en-us/services/app-service/web/), [Firebase](https://firebase.google.com/docs/hosting), [Netlify](https://www.netlify.com/), [Vercel](https://vercel.com/), or even [GitHub Pages](https://angular.dev/tools/cli/deployment). Another option is maintaining own web server with [NGINX](https://www.nginx.com/), [IIS](https://www.iis.net/), [Apache HTTP Server](https://httpd.apache.org/), or equivalent.
		2. Copy the files from `dist/MyProjectName` <sup id="a-dist-folder-name">[1](#f-dist-folder-name)</sup> to a publicly served destination on the server via CLI of the service provider, SSH, or FTP (whichever is available). This step would be defined as a job if you have a CI/CD flow.
		3. [Configure the server](https://angular.io/guide/deployment#server-configuration) to redirect all requests to the _index.html_ file. Some services do that automatically. Others require you [to add a file to the bundle via assets](https://angular.io/guide/workspace-config#assets-configuration) which describes the server how to do the redirections. Occasionally, you may need to do manual configuration.
		3. [Configure the server](https://angular.dev/tools/cli/deployment#server-configuration) to redirect all requests to the _index.html_ file. Some services do that automatically. Others require you [to add a file to the bundle via assets](https://angular.dev/reference/configs/workspace-config) which describes the server how to do the redirections. Occasionally, you may need to do manual configuration.

		In addition, you can [deploy your application to certain targets using the Angular CLI](https://angular.io/guide/deployment#automatic-deployment-with-the-cli). Here are some deploy targets:
		In addition, you can [deploy your application to certain targets using the Angular CLI](https://angular.dev/tools/cli/deployment#automatic-deployment-with-the-cli). Here are some deploy targets:

		- [Azure](https://github.com/Azure/ng-deploy-azure#readme)
		- [Firebase](https://github.com/angular/angularfire#readme)
Expand Down