fix(docs-infra): use relative URLs for internal links on error pages (#40881)
Previously, some of the links on the error pages had URLs prefixed with `https://angular.io/`. This caused them to be treated as external URLs, which had the following downsides: - Links would always point to `angular.io` instead of the same version as the error page (e.g. `next.angular.io` or `v11.angular.io`). - Dgeni would not be able to check that the URLs are valid (i.e. point to existing pages). - An external link icon would incorrectly be shown next to the links on `angular.io`. This commit fixes the links to use relative URLs. PR Close #40881
This commit is contained in:
parent
51c7d32c09
commit
fb58a2bd54
|
@ -13,7 +13,7 @@ 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.
|
||||
|
||||
|
|
|
@ -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.
|
||||
|
|
|
@ -6,10 +6,10 @@
|
|||
@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.
|
||||
|
||||
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.
|
||||
|
||||
|
|
|
@ -4,10 +4,10 @@
|
|||
@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.
|
||||
|
|
|
@ -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).
|
||||
|
||||
<div class="alert is-helpful">
|
||||
|
||||
|
@ -15,7 +15,7 @@ This is the runtime equivalent of a common compiler error [NG8003: No directive
|
|||
@debugging
|
||||
Use the export name to trace the templates or modules using this export.
|
||||
|
||||
Ensure that all dependencies are [properly imported and declared in your NgModules](https://angular.io/guide/sharing-ngmodules). For example, if the export not found is `ngForm`, we need to import `FormsModule` and declare it in the list of imports in `*.module.ts` to resolve the error.
|
||||
Ensure that all dependencies are [properly imported and declared in your NgModules](guide/sharing-ngmodules). For example, if the export not found is `ngForm`, we need to import `FormsModule` and declare it in the list of imports in `*.module.ts` to resolve the error.
|
||||
|
||||
```typescript
|
||||
import { FormsModule } from '@angular/forms';
|
||||
|
|
|
@ -3,9 +3,9 @@
|
|||
@shortDescription No suitable injection token for parameter
|
||||
|
||||
@description
|
||||
There is no injection token for a constructor parameter at compile time. [InjectionTokens](https://angular.io/api/core/InjectionToken) are tokens that can be used in a Dependency Injection Provider.
|
||||
There is no injection token for a constructor parameter at compile time. [InjectionTokens](api/core/InjectionToken) are tokens that can be used in a Dependency Injection Provider.
|
||||
|
||||
@debugging
|
||||
Look at the parameter that throws the error and all uses of the class. This error is commonly thrown when a constructor defines parameters with primitive types like `string`, `number`, `boolean`, and `Object`.
|
||||
|
||||
Use the [@Injectable](https://angular.io/api/core/Injectable) method or [@Inject](https://angular.io/api/core/Inject) decorator from `@angular/core` to ensure that the type you are injecting is reified (has a runtime representation). Make sure to add a provider to this decorator so that you do not throw [NG0201: No Provider Found](https://angular.io/errors/NG0201).
|
||||
Use the [@Injectable](api/core/Injectable) method or [@Inject](api/core/Inject) decorator from `@angular/core` to ensure that the type you are injecting is reified (has a runtime representation). Make sure to add a provider to this decorator so that you do not throw [NG0201: No Provider Found](errors/NG0201).
|
||||
|
|
|
@ -16,6 +16,6 @@ Use the element name in the error to find the file(s) where the element is being
|
|||
|
||||
Check that the name and selector are correct. If the component is from a different module or import, check that the component is exported from its origin module and imported into the correct `*.modules.ts` file, and declared in the imports list.
|
||||
|
||||
When using custom elements or web components, ensure that you add [`CUSTOM_ELEMENTS_SCHEMA`](https://angular.io/api/core/CUSTOM_ELEMENTS_SCHEMA) to the app module.
|
||||
When using custom elements or web components, ensure that you add [`CUSTOM_ELEMENTS_SCHEMA`](api/core/CUSTOM_ELEMENTS_SCHEMA) to the app module.
|
||||
|
||||
If this does not resolve the error, check the imported libraries for any recent changes to the exports and properties you are using, and restart your server.
|
||||
|
|
|
@ -13,4 +13,4 @@ This error arises when attempting to bind to a property that does not exist. Any
|
|||
The runtime error for this is `NG0304: '${tagName}' is not a known element: …’`.
|
||||
|
||||
@debugging
|
||||
Look at documentation for the specific [binding syntax](https://angular.io/guide/binding-syntax) used. This is usually a typo or incorrect import. There may also be a missing direction with property selector ‘name’ or missing input.
|
||||
Look at documentation for the specific [binding syntax](guide/binding-syntax) used. This is usually a typo or incorrect import. There may also be a missing direction with property selector ‘name’ or missing input.
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
@shortDescription No directive found with export
|
||||
|
||||
@description
|
||||
Angular can’t find a directive with `{{ PLACEHOLDER }}` export name. This is common with a missing import or a missing [`exportAs`](https://angular.io/api/core/Directive#exportAs) on a directive.
|
||||
Angular can’t find a directive with `{{ PLACEHOLDER }}` export name. This is common with a missing import or a missing [`exportAs`](api/core/Directive#exportAs) on a directive.
|
||||
|
||||
|
||||
<div class="alert is-helpful">
|
||||
|
|
Loading…
Reference in New Issue