diff --git a/aio/content/errors/NG0100.md b/aio/content/errors/NG0100.md index 46b2ffb900..fe95eb1573 100644 --- a/aio/content/errors/NG0100.md +++ b/aio/content/errors/NG0100.md @@ -1,5 +1,6 @@ @name Expression Changed After Checked @category runtime +@videoUrl https://www.youtube.com/embed/O47uUnJjbJc @shortDescription Expression has changed after it was checked @description diff --git a/aio/content/errors/NG0200.md b/aio/content/errors/NG0200.md index d5d8c83ca7..064b2a3c31 100644 --- a/aio/content/errors/NG0200.md +++ b/aio/content/errors/NG0200.md @@ -1,5 +1,6 @@ @name Circular Dependency in DI @category runtime +@videoUrl https://www.youtube.com/embed/CpLOm4o_FzM @shortDescription Circular dependency in DI detected while instantiating a provider @description diff --git a/aio/content/errors/NG0201.md b/aio/content/errors/NG0201.md index e9dfc3045b..ace46e22b7 100644 --- a/aio/content/errors/NG0201.md +++ b/aio/content/errors/NG0201.md @@ -1,5 +1,6 @@ @name No Provider Found @category runtime +@videoUrl https://www.youtube.com/embed/lAlOryf1-WU @shortDescription No provider for found injectorDetails @description diff --git a/aio/content/errors/NG0300.md b/aio/content/errors/NG0300.md index ddc7456b9c..bbf49fbc47 100644 --- a/aio/content/errors/NG0300.md +++ b/aio/content/errors/NG0300.md @@ -1,5 +1,6 @@ @name Selector Collision @category runtime +@videoUrl https://www.youtube.com/embed/z_3Z5mOm59I @shortDescription Multiple components match with the same tagname @description diff --git a/aio/content/errors/NG0301.md b/aio/content/errors/NG0301.md index 2fca2f99b4..1090e1e541 100644 --- a/aio/content/errors/NG0301.md +++ b/aio/content/errors/NG0301.md @@ -1,10 +1,17 @@ @name Export Not Found @category runtime +@videoUrl https://www.youtube.com/embed/fUSAg4kp2WQ @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). +
+ +This is the runtime equivalent of a common compiler error [NG8003: No directive found with export](errors/NG8003). + +
+ @debugging Use the export name to trace the templates or modules using this export. diff --git a/aio/content/errors/NG8001.md b/aio/content/errors/NG8001.md index 86d12270d5..9934179644 100644 --- a/aio/content/errors/NG8001.md +++ b/aio/content/errors/NG8001.md @@ -5,7 +5,11 @@ @description One or more elements cannot be resolved during compilation because the element is not defined by the HTML spec, or there is no component or directive with such element selector. -The runtime error for this is `NG0304: '${tagName}' is not a known element: …’`. +
+ +This is the compiler equivalent of a common runtime error `NG0304: '${tagName}' is not a known element: …`. + +
@debugging Use the element name in the error to find the file(s) where the element is being used. diff --git a/aio/content/errors/NG8002.md b/aio/content/errors/NG8002.md index 4172db84f3..cf924fdd29 100644 --- a/aio/content/errors/NG8002.md +++ b/aio/content/errors/NG8002.md @@ -1,5 +1,6 @@ @name Invalid Attribute @category compiler +@videoUrl https://www.youtube.com/embed/wfLkB3RsSJM @shortDescription Unknown attribute or input @description diff --git a/aio/content/errors/NG8003.md b/aio/content/errors/NG8003.md index 4e6d5e82de..0f1b1c4197 100644 --- a/aio/content/errors/NG8003.md +++ b/aio/content/errors/NG8003.md @@ -1,10 +1,18 @@ @name Missing Reference Target @category compiler +@videoUrl https://www.youtube.com/embed/fUSAg4kp2WQ @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. + +
+ +This is the compiler equivalent of a common runtime error [NG0301: Export Not Found](errors/NG0301). + +
+ @debugging Use the string name of the export not found to trace the templates or modules using this export. @@ -21,6 +29,3 @@ import { FormsModule } from '@angular/forms'; ``` If you recently added an import, you will need to restart your server to see these changes. - -This is a duplicate issue of a [NG0301: Export Not Found](https://angular.io/errors/NG0301). - diff --git a/aio/src/styles/2-modules/_errors.scss b/aio/src/styles/2-modules/_errors.scss index d4d1a5c9bd..b2bcac4bee 100644 --- a/aio/src/styles/2-modules/_errors.scss +++ b/aio/src/styles/2-modules/_errors.scss @@ -56,4 +56,18 @@ } } } +} + +.error-video-container { + position: relative; + padding-bottom: 56.25%; /* 16:9 */ + height: 0; + + iframe { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } } \ No newline at end of file diff --git a/aio/tools/transforms/angular-errors-package/tag-defs/videoUrl.js b/aio/tools/transforms/angular-errors-package/tag-defs/videoUrl.js new file mode 100644 index 0000000000..a99676dba6 --- /dev/null +++ b/aio/tools/transforms/angular-errors-package/tag-defs/videoUrl.js @@ -0,0 +1,3 @@ +module.exports = function() { + return {name: 'videoUrl'}; +}; diff --git a/aio/tools/transforms/templates/error/error.template.html b/aio/tools/transforms/templates/error/error.template.html index 514b8f1c32..46093c2503 100644 --- a/aio/tools/transforms/templates/error/error.template.html +++ b/aio/tools/transforms/templates/error/error.template.html @@ -5,6 +5,16 @@ {$ github.githubEditLink(doc, versionInfo) $} +{% if doc.videoUrl.length %} +
+ +
+{% endif%} + {% block content %}

Description