An Angular workspace is an application or library created by the Angular CLI. If your project contains subprojects, you can configure multiple projects in angular.json projects

The overall structure of JSON

The following properties are at the top level of the file and are used to configure the workspace. CLI default Settings at the workspace level can be overridden by project-level Settings, which in turn can be overridden by Settings on the command line.

  • $schema: Used to validate the JSON data format
  • Version: The version of the configuration file (note the non-project version).
  • New Project Troot: Used to create a new project location when usedng generate application/libraryWhen a new project is created, it is automatically placed in this directory
  • DefaultProject: The default value is executed by the userng new projectNameWhen theprojectNameThe name of the

    If there are multiple projects in the workspace, it is best for defaultProject to specify them, or for each projectng serve 或 ng buildYou need to specify the project nameng serve --project=projectName

  • Projects: For each project (application or library) in the workspace, the key is the name of the project and the value is the specific configuration item. The initial application created with the ng new projectName command is listed in the projects directory

    "projects": { "projectName": { ... }... }

PROJECTS- project configuration option

Each project has the following top-level configuration properties under projects:<project_name>.

"projects": { "projectName1": { "root": "", "sourceRoot": "src", "projectType": "application", "prefix": "app", "schematics": {}, "architect": {} }, "projectName2": { ... }}
  • Root: The root folder of the project, relative to the workspace folder. The value of the initial application is null because it is at the top level of the workspace.
  • SourceRoot: The root folder of the project’s source files
  • ProjectType:"application" 或 "library" , but not the Library, which is a module that can be shared by many applications
  • Prefix: A prefix for a component or directive. You can customize it to serve as an application or ribbon identifier.
  • Architect: Configuration options for the project builder

  • Schematics: Default options for customizing ng generate subcommands, such as:

    "schematics": {
   "@schematics/angular:component": {
      "style": "scss",
      "changeDetection": "OnPush"
   },
   "@schematics/angular:directive": {
      "skipTests": true
   }
}

    Indicates that the component created by executing ng generate component uses SCSS as CSS language by default, and uses OnPush as detection policy. Ng generate directive –skipTests=true ng generate directive –skipTests=true

Architect configuration options

The ng run command can run some predefined targets, and you can define your own targets

"architect": {
  "build": { },
  "serve": { },
  "e2e" : { },
  "test": { },
  "lint": { },
  "extract-i18n": { },
  "server": { },
  "app-shell": { }
}
  • Architect/buildng buildCommand options to configure default values
  • Architect /serve overrides the build defaults and isng serveThe command provides additional server defaults. In addition tong buildIn addition to the options available for the command, options related to the development server have been added.
  • In the above two, for example, specific please refer to https://angular.cn/guide/work…

Each build target has the following attributes:

  • Builder: The NPM package for the build tool used to build this target. The defaultng build 为 @angular-devkit/build-angular:browser.ng serve 为 @angular-devkit/build-angular:dev-server

  • Options: Depending on the configuration items required for the current Builder, different component tools will have different configurations. The default options are as follows:

    "Options ": {"outputPath": "dist/projectName", // Output file path "index":" SRC /index.html", "main": "SRC /main.ts", "polyfills":" SRC /polyfills. Ts ", "tsConfig": "tsconfig.app.json", "aot": true, // Whether to build assets in aot: [// static resource path "SRC /favicon.ico"," SRC /assets" // can also contain an object {"glob": "**/*", // wildcard with input path as the base "input": "SRC /assets/", // or "./node_modules/some-package/images" "output": "/assets/", "ignore": ["**/*.svg"], // list of globs to exclude}], "styles": If you want to bootstrap with the CSS "SRC /styles. SCSS ", // it can also be an object {"input": "SRC /external-module/styles.scss", "inject": false, // whether to inject index.html "bundleName": "External-module" // name the bundle}], "scripts": [], // import JS path, jQuery can import here, as well as styles can also contain an object "stylePreProcessorOptions ": {"includePaths": [" SRC /style-paths/variables.scss"]}, // You can import variables.scss from any position in your project without relative paths: // Before @import '.. /style-paths/variables'; Now @ import 'variables'; "customWebpackConfig": { "path": ". / webpack. Config. Js "/ / extension webpack script, you can now in webpack. Config. Js developed in webpack}," allowedCommonJsDependencies ": ["lodash"] // If the Angular CLI detects that your browser-side application relies on CommonJS modules, it will issue a warning. To disable these warnings, you can add these CommonJS module name to allowedCommonJsDependencies}

    Options could do the same thing

    "options": {
   "browserTarget": "projectName:build"
}

    With the browserTarget property, you don’t need anything else, If I add this to Projects > ProjectName > Architect > Serve > Options then I am using Projects > ProjectName > Architect > Build > Options If the build and serve configuration are the same, you just add this, you don’t have to redefine the configuration

  • Configurations: Configurations that you can use to set configuration items for different target environments, such as:

    "configurations": {
  "dev": {},
  "quality" : {},
  "preprod" : {},
  "product" : {}
}

    -configuration=product/dev/preprod configurations -configuration=product/dev/preprod configurations -configuration=product/dev/preprod configurations -configuration=product/dev/preprod configurations -configuration=product/dev/preprod configurations

    "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "SRC/environments/environment. The product. Ts" / / here you can specify a different environment in the project of different configuration, can define baseUrl}], for example, "optimization" : True, // can be Boolean or object "outPuthHashing ": "all", // package the file with the hash "sourceMap": False, // Generate the sourceMap file, which will slow the packaging can be Boolean or the object "extractCss": true, // Extract the CSS from the global style into the CSS file instead of the JS file. "NamedChunks ": false, // replace chunKid with chunkName to maintain the ability to cache "extractLicenses": True, // Use to manage the license agreement for 3rd party plug-ins by extracting all licenses into a separate file "vendorChunk": false, // Do not separate 3rd party plug-ins "buildOptimizer": True, // Whether to optimize the compiler "Classification ": [{"type": "initial"," MaximumWarning ": "2MB "," MaximumError ": "5MB"}, {"type": "anyComponentStyle", "maximumWarning": "6kb", "maximumError": "10kb" } ]

    You can do that

    "Configurations ": {"dev": {"browserTarget": "upgrade:build:dev"//

    Budgets,

    • Type: Valid values are: bundle (size of specific package), initial (initial size of application), allScript (total size of all scripts), all (total size of entire application), anyComponentStyle (size of anyComponentStyle file). AnyScript (the size of any script), any (the size of any file).
    • Name: The name of the package to be restricted (whentype=bundle).
    • Baseline: An absolute value representing the size of a base, used as a base for a scale value.
    • MaximumWarning: A warning is given when the size exceeds this threshold percentage of the baseline or a specific size.
    • MaximumError: An error is reported when the size exceeds this threshold percentage of the baseline or a specific size.
    • MinimumWarning: Give a warning when the size is less than this threshold percentage of the baseline or a specific size.
    • MinimumError: An error is reported when the size is less than this threshold percentage of the baseline or a specific size.
    • Warning: A warning is given when the size is at or below this threshold percentage of the baseline.
    • Error: An error is reported when the size is at or below this threshold percentage of the baseline.

This is my understanding and sharing of the angular.json parameters. Please feel free to comment and discuss if there are any errors. If you think it’s a good one, leave it and go