docs: add embedded videos to error guides (#40453)

add embedded youtube videos
provide visual debugging for top errors

PR Close #40453

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

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

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

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

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).
 
+<div class="alert is-helpful">
+
+This is the runtime equivalent of a common compiler error [NG8003: No directive found with export](errors/NG8003).
+
+</div>
+
 @debugging
 Use the export name to trace the templates or modules using this export.
 

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: …’`.
+<div class="alert is-helpful">
+
+This is the compiler equivalent of a common runtime error `NG0304: '${tagName}' is not a known element: …`.
+
+</div>
 
 @debugging
 Use the element name in the error to find the file(s) where the element is being used. 

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

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.
 
+
+<div class="alert is-helpful">
+
+This is the compiler equivalent of a common runtime error [NG0301: Export Not Found](errors/NG0301).
+
+</div>
+
 @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). 
-

aio/src/styles/2-modules/_errors.scss

@@ -57,3 +57,17 @@
     }
   }
 }
+
+.error-video-container {
+  position: relative;
+  padding-bottom: 56.25%; /* 16:9 */
+  height: 0;
+
+  iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+}

aio/tools/transforms/angular-errors-package/tag-defs/videoUrl.js

@@ -0,0 +1,3 @@
+module.exports = function() {
+  return {name: 'videoUrl'};
+};

aio/tools/transforms/templates/error/error.template.html

@@ -5,6 +5,16 @@
   {$ github.githubEditLink(doc, versionInfo) $}
 </div>
 
+{% if doc.videoUrl.length %}
+<div class="error-video-container">
+  <iframe
+  src="{$ doc.videoUrl $}" 
+  frameborder="0" 
+  allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" 
+  allowfullscreen></iframe>
+</div>
+{% endif%}
+
 {% block content %}
 <div class="content">
   <h2>Description</h2>