You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Angular CLI saves a number of cachable operations on disk by default.
4
5
5
6
When you re-run the same build, the build system restores the state of the previous build and re-uses previously performed operations, which decreases the time taken to build and test your applications and libraries.
6
7
7
8
To amend the default cache settings, add the `cli.cache` object to your [Workspace Configuration](guide/workspace-config).
8
9
The object goes under `cli.cache` at the top level of the file, outside the `projects` sections.
@@ -18,27 +20,35 @@ The object goes under `cli.cache` at the top level of the file, outside the `pro
18
20
},
19
21
"projects": {}
20
22
}
21
-
```
23
+
24
+
</code-example>
22
25
23
26
For more information, see [cache options](guide/workspace-config#cache-options).
24
27
25
28
### Enabling and disabling the cache
26
-
Caching is enabled by default. To disable caching run the following command:
27
29
28
-
```bash
30
+
Caching is enabled by default.
31
+
To disable caching run the following command:
32
+
33
+
<code-exampleformat="shell"language="shell">
34
+
29
35
ng config cli.cache.enabled false
30
-
```
36
+
37
+
</code-example>
31
38
32
39
To re-enable caching, set `cli.cache.enabled` to `true`.
33
40
34
41
### Cache environments
42
+
35
43
By default, disk cache is only enabled for local environments.
36
44
37
45
To enable caching for all environments, run the following command:
38
46
39
-
```bash
47
+
<code-exampleformat="shell"language="shell">
48
+
40
49
ng config cli.cache.environment all
41
-
```
50
+
51
+
</code-example>
42
52
43
53
For more information, see `environment` in [cache options](guide/workspace-config#cache-options).
44
54
@@ -50,26 +60,33 @@ The Angular CLI checks for the presence and value of the `CI` environment variab
50
60
51
61
### Cache path
52
62
53
-
By default, `.angular/cache` is used as a base directory to store cache results. To change this path, run the following command:
63
+
By default, `.angular/cache` is used as a base directory to store cache results.
64
+
To change this path, run the following command:
65
+
66
+
<code-exampleformat="shell"language="shell">
54
67
55
-
```bash
56
68
ng config cli.cache.path ".cache/ng"
57
-
```
69
+
70
+
</code-example>
58
71
59
72
### Clearing the cache
60
73
61
74
To clear the cache, run one of the following commands.
62
75
63
76
To clear the cache on Unix-based operating systems:
64
77
65
-
```bash
78
+
<code-exampleformat="shell"language="shell">
79
+
66
80
rm -rf .angular/cache
67
-
```
81
+
82
+
</code-example>
68
83
69
84
To clear the cache on Windows:
70
85
71
-
```bash
86
+
<code-exampleformat="shell"language="shell">
87
+
72
88
rmdir /s /q .angular\cache
73
-
```
74
89
75
-
For more information, see [rm command](https://man7.org/linux/man-pages/man1/rm.1.html) and [rmdir command](https://docs.microsoft.com/en-us/windows-server/administration/windows-commands/rmdir).
90
+
</code-example>
91
+
92
+
For more information, see [rm command](https://man7.org/linux/man-pages/man1/rm.1.html) and [rmdir command](https://docs.microsoft.com/windows-server/administration/windows-commands/rmdir).
Copy file name to clipboardExpand all lines: aio/content/cli/index.md
+46-23Lines changed: 46 additions & 23 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -7,40 +7,47 @@ The Angular CLI is a command-line interface tool that you use to initialize, dev
7
7
Major versions of Angular CLI follow the supported major version of Angular, but minor versions can be released separately.
8
8
9
9
Install the CLI using the `npm` package manager:
10
-
<code-examplelanguage="bash">
11
-
npm install -g @angular/cli
10
+
11
+
<code-exampleformat="shell"language="shell">
12
+
13
+
npm install -g @angular/cli
14
+
12
15
</code-example>
13
16
14
-
For details about changes between versions, and information about updating from previous releases,
15
-
see the Releases tab on GitHub: https://github.com/angular/angular-cli/releases
17
+
For details about changes between versions, and information about updating from previous releases, see the Releases tab on GitHub: https://github.com/angular/angular-cli/releases
16
18
17
19
## Basic workflow
18
20
19
21
Invoke the tool on the command line through the `ng` executable.
20
22
Online help is available on the command line.
21
-
Enter the following to list commands or options for a given command (such as [generate](cli/generate)) with a short description.
23
+
Enter the following to list commands or options for a given command \(such as [generate](cli/generate)\) with a short description.
24
+
25
+
<code-exampleformat="shell"language="shell">
22
26
23
-
<code-examplelanguage="bash">
24
27
ng help
25
28
ng generate --help
29
+
26
30
</code-example>
27
31
28
32
To create, build, and serve a new, basic Angular project on a development server, go to the parent directory of your new workspace use the following commands:
29
33
30
-
<code-examplelanguage="bash">
34
+
<code-exampleformat="shell"language="shell">
35
+
31
36
ng new my-first-project
32
37
cd my-first-project
33
38
ng serve
39
+
34
40
</code-example>
35
41
36
42
In your browser, open http://localhost:4200/ to see the new application run.
37
43
When you use the [ng serve](cli/serve) command to build an application and serve it locally, the server automatically rebuilds the application and reloads the page when you change any of the source files.
38
44
39
45
<divclass="alert is-helpful">
40
46
41
-
When you run `ng new my-first-project` a new folder, named `my-first-project`, will be created in the current working directory. Since you want to be able to create files inside that folder, make sure you have sufficient rights in the current working directory before running the command.
47
+
When you run `ng new my-first-project` a new folder, named `my-first-project`, will be created in the current working directory.
48
+
Since you want to be able to create files inside that folder, make sure you have sufficient rights in the current working directory before running the command.
42
49
43
-
If the current working directory is not the right place for your project, you can change to a more appropriate directory by running `cd <path-to-other-directory>` first.
50
+
If the current working directory is not the right place for your project, you can change to a more appropriate directory by running `cd <path-to-other-directory>`.
44
51
45
52
</div>
46
53
@@ -58,52 +65,68 @@ You can edit the generated files directly, or add to and modify them using CLI c
58
65
Use the [ng generate](cli/generate) command to add new files for additional components and services, and code for new pipes, directives, and so on.
59
66
Commands such as [add](cli/add) and [generate](cli/generate), which create or operate on applications and libraries, must be executed from within a workspace or project folder.
60
67
61
-
* See more about the [Workspace file structure](guide/file-structure).
68
+
*See more about the [Workspace file structure](guide/file-structure).
62
69
63
70
### Workspace and project configuration
64
71
65
72
A single workspace configuration file, `angular.json`, is created at the top level of the workspace.
66
73
This is where you can set per-project defaults for CLI command options, and specify configurations to use when the CLI builds a project for different targets.
67
74
68
75
The [ng config](cli/config) command lets you set and retrieve configuration values from the command line, or you can edit the `angular.json` file directly.
69
-
Note that option names in the configuration file must use [camelCase](guide/glossary#case-types), while option names supplied to commands must be dash-case.
70
76
71
-
* See more about [Workspace Configuration](guide/workspace-config).
77
+
<divclass="alert is-helpful">
78
+
79
+
**NOTE**: <br />
80
+
Option names in the configuration file must use [camelCase](guide/glossary#case-types), while option names supplied to commands must be dash-case.
81
+
82
+
</div>
83
+
84
+
* See more about [Workspace Configuration](guide/workspace-config).
* Most commands, and some options, have aliases. Aliases are shown in the syntax statement for each command.
92
+
* Most commands, and some options, have aliases.
93
+
Aliases are shown in the syntax statement for each command.
80
94
81
-
* Option names are prefixed with a double dash (--).
82
-
Option aliases are prefixed with a single dash (-).
95
+
*Option names are prefixed with a double dash \(`--`\) characters.
96
+
Option aliases are prefixed with a single dash \(`-`\) character.
83
97
Arguments are not prefixed.
84
98
For example:
85
-
<code-examplelanguage="bash">
86
-
ng build my-app -c production
99
+
100
+
<code-exampleformat="shell"language="shell">
101
+
102
+
ng build my-app -c production
103
+
87
104
</code-example>
88
105
89
-
* Typically, the name of a generated artifact can be given as an argument to the command or specified with the --name option.
106
+
*Typically, the name of a generated artifact can be given as an argument to the command or specified with the `--name` option.
90
107
91
-
* Argument and option names can be given in either
92
-
[camelCase or dash-case](guide/glossary#case-types).
93
-
`--myOptionName` is equivalent to `--my-option-name`.
108
+
* Argument and option names can be given in either [camelCase or dash-case](guide/glossary#case-types).
109
+
`--myOptionName` is equivalent to `--my-option-name`.
94
110
95
111
### Boolean options
96
112
97
113
Boolean options have two forms: `--this-option` sets the flag to `true`, `--no-this-option` sets it to `false`.
98
114
If neither option is supplied, the flag remains in its default state, as listed in the reference documentation.
99
115
100
-
101
116
### Relative paths
102
117
103
118
Options that specify files can be given as absolute paths, or as paths relative to the current working directory, which is generally either the workspace or project root.
104
119
105
120
### Schematics
106
121
107
-
The [ng generate](cli/generate) and [ng add](cli/add) commands take as an argument the artifact or library to be generated or added to the current project.
122
+
The [ng generate](cli/generate) and [ng add](cli/add) commands take, as an argument, the artifact or library to be generated or added to the current project.
108
123
In addition to any general options, each artifact or library defines its own options in a *schematic*.
109
124
Schematic options are supplied to the command in the same format as immediate command options.
Copy file name to clipboardExpand all lines: aio/content/errors/NG0100.md
+25-6Lines changed: 25 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,17 +4,36 @@
4
4
@shortDescription Expression has changed after it was checked
5
5
6
6
@description
7
-
Angular throws an `ExpressionChangedAfterItHasBeenCheckedError` when an expression value has been changed after change detection has completed. Angular only throws this error in development mode.
8
7
9
-
In development mode, Angular performs an additional check after each change detection run, to ensure the bindings haven’t changed. This catches errors where the view is left in an inconsistent state. This can occur, for example, if a method or getter returns a different value each time it is called, or if a child component changes values on its parent. If either of these occur, this is a sign that change detection is not stabilized. Angular throws the error to ensure data is always reflected correctly in the view, which prevents erratic UI behavior or a possible infinite loop.
8
+
Angular throws an `ExpressionChangedAfterItHasBeenCheckedError` when an expression value has been changed after change detection has completed.
9
+
Angular only throws this error in development mode.
10
10
11
-
This error commonly occurs when you’ve added template expressions or begun to implement lifecycle hooks like `ngAfterViewInit` or `ngOnChanges`. It is also common when dealing with loading status and asynchronous operations, or a child component changes its parent bindings.
11
+
In development mode, Angular performs an additional check after each change detection run, to ensure the bindings haven't changed.
12
+
This catches errors where the view is left in an inconsistent state.
13
+
This can occur, for example, if a method or getter returns a different value each time it is called, or if a child component changes values on its parent.
14
+
If either of these occur, this is a sign that change detection is not stabilized
15
+
Angular throws the error to ensure data is always reflected correctly in the view, which prevents erratic UI behavior or a possible infinite loop.
16
+
17
+
This error commonly occurs when you've added template expressions or have begun to implement lifecycle hooks like `ngAfterViewInit` or `ngOnChanges`.
18
+
It is also common when dealing with loading status and asynchronous operations, or when a child component changes its parent bindings.
12
19
13
20
@debugging
14
-
The [source maps](https://developer.mozilla.org/en-US/docs/Tools/Debugger/How_to/Use_a_source_map) generated by the CLI are very useful when debugging. Navigate up the call stack until you find a template expression where the value displayed in the error has changed.
15
21
16
-
Ensure that there are no changes to the bindings in the template after change detection is run. This often means refactoring to use the correct [component lifecycle hook](guide/lifecycle-hooks) for your use case. If the issue exists within `ngAfterViewInit`, the recommended solution is to use a constructor or `ngOnInit` to set initial values, or use `ngAfterContentInit` for other value bindings.
22
+
The [source maps](https://developer.mozilla.org/docs/Tools/Debugger/How_to/Use_a_source_map) generated by the CLI are very useful when debugging.
23
+
Navigate up the call stack until you find a template expression where the value displayed in the error has changed.
24
+
25
+
Ensure that there are no changes to the bindings in the template after change detection is run.
26
+
This often means refactoring to use the correct [component lifecycle hook](guide/lifecycle-hooks) for your use case.
27
+
If the issue exists within `ngAfterViewInit`, the recommended solution is to use a constructor or `ngOnInit` to set initial values, or use `ngAfterContentInit` for other value bindings.
17
28
18
29
If you are binding to methods in the view, ensure that the invocation does not update any of the other bindings in the template.
19
30
20
-
Read more about which solution is right for you in ['Everything you need to know about the "ExpressionChangedAfterItHasBeenCheckedError" error'](https://indepth.dev/posts/1001/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error) and why this is useful at ['Angular Debugging "Expression has changed after it was checked": Simple Explanation (and Fix)'](https://blog.angular-university.io/angular-debugging/).
31
+
Read more about which solution is right for you in ['Everything you need to know about the "ExpressionChangedAfterItHasBeenCheckedError" error'](https://indepth.dev/posts/1001/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error) and why this is useful at ['Angular Debugging "Expression has changed after it was checked": Simple Explanation (and Fix)'](https://blog.angular-university.io/angular-debugging).
Copy file name to clipboardExpand all lines: aio/content/errors/NG0200.md
+17-3Lines changed: 17 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,9 +4,23 @@
4
4
@shortDescription Circular dependency in DI detected while instantiating a provider
5
5
6
6
@description
7
-
A cyclic dependency exists when a [dependency of a service](guide/hierarchical-dependency-injection) directly or indirectly depends on the service itself. For example, if `UserService` depends on `EmployeeService`, which also depends on `UserService`. Angular will have to instantiate `EmployeeService` to create `UserService`, which depends on `UserService`, itself.
7
+
8
+
A cyclic dependency exists when a [dependency of a service](guide/hierarchical-dependency-injection) directly or indirectly depends on the service itself.
9
+
For example, if `UserService` depends on `EmployeeService`, which also depends on `UserService`.
10
+
Angular will have to instantiate `EmployeeService` to create `UserService`, which depends on `UserService`, itself.
8
11
9
12
@debugging
10
-
Use the call stack to determine where the cyclical dependency exists. You will be able to see if any child dependencies rely on the original file by [mapping out](guide/dependency-injection-in-action) the component, module, or service’s dependencies and identify the loop causing the problem.
11
13
12
-
Break this loop (or circle) of dependency to resolve this error. This most commonly means removing or refactoring the dependencies to not be reliant on one another.
14
+
Use the call stack to determine where the cyclical dependency exists.
15
+
You will be able to see if any child dependencies rely on the original file by [mapping out](guide/dependency-injection-in-action) the component, module, or service's dependencies, and identifying the loop causing the problem.
16
+
17
+
Break this loop \(or circle\) of dependency to resolve this error.
18
+
This most commonly means removing or refactoring the dependencies to not be reliant on one another.
Copy file name to clipboardExpand all lines: aio/content/errors/NG0201.md
+17-4Lines changed: 17 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,17 +4,30 @@
4
4
@shortDescription No provider for {token} found!
5
5
6
6
@description
7
+
7
8
You see this error when you try to inject a service but have not declared a corresponding provider. A provider is a mapping that supplies a value that you can inject into the constructor of a class in your application.
8
9
9
10
Read more on providers in our [Dependency Injection guide](guide/dependency-injection).
10
11
11
12
@debugging
12
-
Work backwards from the object where the error states that a [provider](guide/architecture-services) is missing: `No provider for ${this}!`. This is commonly thrown in [services](tutorial/toh-pt4), which require non-existing providers.
13
+
14
+
Work backwards from the object where the error states that a [provider](guide/architecture-services) is missing: `No provider for ${this}!`.
15
+
This is commonly thrown in [services](tutorial/toh-pt4), which require non-existing providers.
13
16
14
17
To fix the error ensure that your service is registered in the list of providers of an `NgModule` or has the `@Injectable` decorator with a `providedIn` property at top.
15
18
16
19
The most common solution is to add a provider in `@Injectable` using `providedIn`:
0 commit comments