Which one is @angular-devkit/build-angular:application equivalent in...

We have requirement to hide environment variables which are comes together in build files in angular application.

We found solution using @angular-builders/custom-webpack and dotenv libraries when gone through google search.

Below is project info,

**Angular version - 17.3.0

SSR - Enabled**

We use builder application from @angular-devkit/build-angular as it provides CSR and SSR features.

There is no equivalent builder available in @angular-builders/custom-webpack for @angular-devkit/build-angular:application

Do we have any other libraries same like above or how to achieve same using @angular-builders/custom-webpack?

Below is agular.json we are using,

{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"my-web-application": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss",
"standalone": false
},
"@schematics/angular:directive": {
"standalone": false
},
"@schematics/angularipe": {
"standalone": false
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:application",
"options": {
"outputPath": {
"base": "dist/my-web-application",
"browser": "."
},
"index": "src/index.html",
"browser": "src/main.ts",
"polyfills": [
"zone.js"
],
"tsConfig": "tsconfig.app.json",
"inlineStyleLanguage": "scss",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"server": "src/main.server.ts",
"prerender": false,
"ssr": {
"entry": "server.ts"
},
"stylePreprocessorOptions": {
"includePaths": [
"node_modules/"
]
}
},
"configurations": {
"production": {
"index": {
"input": "src/index.prod.html",
"output": "index.html"
},
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"budgets": [
{
"type": "initial",
"maximumWarning": "6mb",
"maximumError": "7mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "19kb",
"maximumError": "20kb"
}
],
"outputHashing": "all"
},
"development": {
"optimization": false,
"extractLicenses": false,
"sourceMap": true
},
"noSsr": {
"ssr": false,
"prerender": false
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"buildTarget": "my-web-application:buildroduction,noSsr"
},
"development": {
"buildTarget": "my-web-application:build:development,noSsr"
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"buildTarget": "my-web-application:build"
}
}
}
}
}
}

Continue reading...