diff --git a/aio/content/errors/NG0100.md b/aio/content/errors/NG0100.md index fe95eb1573..78ce635cf2 100644 --- a/aio/content/errors/NG0100.md +++ b/aio/content/errors/NG0100.md @@ -4,7 +4,7 @@ @shortDescription Expression has changed after it was checked @description -Angular throws an `ExpressionChangedAfterItHasBeenCheckedError` when an expression value has been changed after change detection has completed. Angular only throws this error in development mode. +Angular throws an `ExpressionChangedAfterItHasBeenCheckedError` when an expression value has been changed after change detection has completed. Angular only throws this error in development mode. In dev 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. @@ -13,8 +13,8 @@ This error commonly occurs when you’ve added template expressions or begun to @debugging 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. -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](https://angular.io/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. +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. -If you are binding to methods in the view, ensure that the invocation does not update any of the other bindings in the template. +If you are binding to methods in the view, ensure that the invocation does not update any of the other bindings in the template. -Read more about which solution is right for you in ['Everything you need to know about the "ExpressionChangedAfterItHasBeenCheckedError" error'](https://indepth.dev/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/). \ No newline at end of file +Read more about which solution is right for you in ['Everything you need to know about the "ExpressionChangedAfterItHasBeenCheckedError" error'](https://indepth.dev/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/). diff --git a/aio/content/errors/NG0200.md b/aio/content/errors/NG0200.md index 064b2a3c31..4965761fb3 100644 --- a/aio/content/errors/NG0200.md +++ b/aio/content/errors/NG0200.md @@ -4,9 +4,9 @@ @shortDescription Circular dependency in DI detected while instantiating a provider @description -A cyclic dependency exists when a [dependency of a service](https://angular.io/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. +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. @debugging -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](https://angular.io/guide/dependency-injection-in-action) the component, module, or service’s dependencies and identify the loop causing the problem. +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. 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. diff --git a/aio/content/errors/NG0201.md b/aio/content/errors/NG0201.md index b2eece989b..c5fd8069f1 100644 --- a/aio/content/errors/NG0201.md +++ b/aio/content/errors/NG0201.md @@ -4,12 +4,12 @@ @shortDescription No provider for {token} found! @description -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. +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. -Read more on providers in our [Dependency Injection guide](https://angular.io/guide/dependency-injection). +Read more on providers in our [Dependency Injection guide](guide/dependency-injection). @debugging -Work backwards from the object where the error states that a [provider](https://angular.io/guide/architecture-services) is missing: `No provider for ${this}!`. This is commonly thrown in [services](https://angular.io/tutorial/toh-pt4), which require non-existing providers. +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. 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. @@ -17,4 +17,4 @@ The most common solution is to add a provider in `@Injectable` using `providedIn ```typescript @Injectable({ providedIn: 'app' }) -``` \ No newline at end of file +``` diff --git a/aio/content/errors/NG0300.md b/aio/content/errors/NG0300.md index bbf49fbc47..3d91a5c783 100644 --- a/aio/content/errors/NG0300.md +++ b/aio/content/errors/NG0300.md @@ -1,13 +1,13 @@ -@name Selector Collision +@name Selector Collision @category runtime @videoUrl https://www.youtube.com/embed/z_3Z5mOm59I @shortDescription Multiple components match with the same tagname @description -Two or more components use the same [element selector](https://angular.io/guide/component-overview#specifying-a-components-css-selector). Because there can only be a single component associated with an element, selectors must be unique strings to prevent ambiguity for Angular. +Two or more components use the same [element selector](guide/component-overview#specifying-a-components-css-selector). Because there can only be a single component associated with an element, selectors must be unique strings to prevent ambiguity for Angular. @debugging -Use the element name from the error message to search for places where you’re using the same [selector declaration](https://angular.io/guide/architecture-components) in your codebase: +Use the element name from the error message to search for places where you’re using the same [selector declaration](guide/architecture-components) in your codebase: ```typescript @Component({ @@ -18,4 +18,4 @@ Use the element name from the error message to search for places where you’re Ensure that each component has a unique CSS selector. This will guarantee that Angular renders the component you expect. -If you’re having trouble finding multiple components with this selector tag name, check for components from imported component libraries, such as Angular Material. Make sure you're following the [best practices](https://angular.io/guide/styleguide#component-selectors) for your selectors to prevent collisions. +If you’re having trouble finding multiple components with this selector tag name, check for components from imported component libraries, such as Angular Material. Make sure you're following the [best practices](guide/styleguide#component-selectors) for your selectors to prevent collisions. diff --git a/aio/content/errors/NG0301.md b/aio/content/errors/NG0301.md index 1090e1e541..67135f6c1c 100644 --- a/aio/content/errors/NG0301.md +++ b/aio/content/errors/NG0301.md @@ -4,7 +4,7 @@ @shortDescription Export not found! @description -Angular can’t find a directive with `{{ PLACEHOLDER }}` export name. The export name is specified in the `exportAs` property of the directive decorator. This is common when using FormsModule or Material modules in templates, and you’ve forgotten to [import the corresponding modules](https://angular.io/guide/sharing-ngmodules). +Angular can’t find a directive with `{{ PLACEHOLDER }}` export name. The export name is specified in the `exportAs` property of the directive decorator. This is common when using FormsModule or Material modules in templates, and you’ve forgotten to [import the corresponding modules](guide/sharing-ngmodules).