Recommended Free Tools
In an Angular CLI workspace, the main configuration file is angular.json, located at the workspace root. It sets defaults for workspace projects and their CLI targets, including build, serve, and test. You can edit it directly or use ng config to read or change a specific setting.
Where is the Angular configuration file?
Look for angular.json at the top level of your Angular CLI workspace, usually alongside files such as package.json. Angular describes it as the workspace’s single CLI configuration file. Paths written in it are relative to the workspace root.
A workspace can contain one application or several applications and libraries. The names under projects do not always correspond directly to top-level folder names, particularly for the initial application.
What is angular.json used for?
angular.json supplies configuration defaults to Angular CLI tools. Its top-level properties can include workspace-wide settings such as version, newProjectRoot, cli, schematics, and projects. The cli section can configure behavior such as analytics, caching, package manager, schematic collections, and warnings.
#1 Best Overall
Each entry in projects describes an application or library. It can specify properties such as the project root, project type, source root, selector prefix, internationalization settings, schematics, and CLI targets. Project settings may override workspace-level defaults, and command-line options can override project defaults.
Targets define what CLI commands do
A project’s architect section contains targets such as build, serve, test, and lint. A target identifies a builder and can define default options plus named configurations. Angular also documents targets for e2e testing and i18n extraction; custom targets can be invoked with ng run.
Build options can cover assets, styles, and scripts. Styles and scripts may be specified as file paths or as objects that describe an entry point, bundle name, and injection behavior. The valid properties depend on the builder and Angular version in use, so check the schema for the project’s installed version.
How do I change an Angular CLI setting?
You can edit angular.json in a code editor or use the CLI command ng config [json-path] [value] [options]. Omit the value to read a setting; supply a value to update it. For example:
Rank #3
ng config projects.my-app.architect.build.options.outputPath
ng config projects.my-app.architect.build.options.outputPath dist/my-appReplace my-app with the project name shown under projects. The exact JSON path must match the structure in your workspace. Property names in the file use camelCase, even where command-line flags use dash-case.
The --global option accesses CLI configuration in the caller’s home directory rather than the workspace’s angular.json. Use it when changing a user-level CLI setting, not a project-specific build or serve default.
How do named configurations and environment files work?
A target can define named configurations, often including development and production, with additional names such as staging possible. Choose one with --configuration. Multiple configuration names can be comma-separated; if they set the same property, the later configuration’s value takes precedence. Command-line options can also override configured defaults.
For example, a build target can hold shared options and separate alternatives:
"configurations": {
"development": { "optimization": false },
"production": { "optimization": true }
}Use the property names and values accepted by the builder in your Angular version; this snippet illustrates the structure, not a complete configuration.
Use fileReplacements for build-time substitutions
A target configuration can include a fileReplacements array to substitute one file for another in that build. Angular says no files are replaced by default. Its ng generate environments command can set up environment configuration automatically; follow the generated structure for your project’s Angular version. These replacements are build-time substitutions, not runtime environment-variable changes.
How is angular.json different from tsconfig.json?
These files configure different parts of a workspace. angular.json controls Angular CLI workspace projects and targets; tsconfig.json provides base TypeScript compiler settings that project-specific TypeScript configuration files can inherit.
Quick Recap
| File | Primary purpose |
|---|---|
angular.json |
Angular CLI workspace, project, and target configuration |
tsconfig.json |
Base TypeScript settings, often inherited by project-specific configs |
package.json |
Project dependencies and package scripts |
package-lock.json |
Records installed package versions for npm |
What should I check if a configuration change does not work?
- Confirm the file and scope. Edit the workspace-root
angular.jsonfor project configuration;ng config --globaladdresses the caller’s home-directory CLI config instead. - Check the project and target path. Verify the project name under
projectsand locate the relevant target, such asbuildorserve, underarchitect. - Check which value wins. Project settings can supersede workspace defaults, a named configuration can change target options, later selected configurations take precedence for conflicting properties, and command-line options can override defaults.
- Validate against the installed builder. Option names and accepted values can vary by Angular version and builder; consult the matching schema and CLI reference.
- Check paths from the workspace root. Paths in
angular.jsonare interpreted relative to that root. - Keep TypeScript settings in the right file. Compiler configuration belongs in the applicable
tsconfigfile, not in an Angular CLI target.
Official Angular references
- Workspace configuration
- The ng config command
- Angular file structure
- Build
- Environments
- Builders
- ng generate environments
- Angular CLI reference
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
