为什么我的 Angular SPA 没有识别 google 课堂分享按钮元素 (<g:sharetoclassroom>)？答案

【问题标题】：Why is my Angular SPA not identifying the google classroom share button element (<g:sharetoclassroom>)?为什么我的 Angular SPA 没有识别 google 课堂分享按钮元素 (<g:sharetoclassroom>)？
【发布时间】：2019-04-02 15:53:15
【问题描述】：

tl;博士尝试将 google 课堂分享按钮添加到我的网络应用程序（angular 5，spa）时，我收到以下错误：

Uncaught Error: Template parse errors:
':g:sharetoclassroom' is not a known element:
1. If ':g:sharetoclassroom' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
    </div>
    <div class="qr-code">
        [ERROR ->]<g:sharetoclassroom url="..." size="32"></g:sharetoclassroom>
    </div>
  </div>
"): ng:///AppModule/ShareLinkComponent.html@18:8

我想将google classroom share button 添加到我的网络应用程序中，但我不知道为什么无法识别共享按钮元素。我已将脚本 (<script src="https://apis.google.com/js/platform.js" async defer></script>) 添加到 index.html 中的 <head> 中。我已将分享按钮元素添加到其中一个组件中：

<!-- share-link.component.html -->

<mat-dialog-content>
  <div i18n class="share-link-text">
      Share the assessment link with your students.
  </div>
  <div class="share-container">
    <div class="share-to-classroom">
        <g:sharetoclassroom url="http://url-to-share" size="32"></g:sharetoclassroom>
    </div>
  </div>
</mat-dialog-content>

但是当我在本地运行代码时，我收到了错误':g:sharetoclassroom' is not a known element。我真的不明白发生了什么/缺少什么。 奇怪的是，当我将元素添加到 index.html（不在任何其他组件中）时，共享按钮实际上会出现并按预期工作。 任何人都知道加载第 3 方脚本/使用 gapi/使用不需要（看似）需要添加到 AppModule 中的第 3 方元素的任何问题？

我尝试将脚本直接放在组件中，将 NO_ERRORS_SCHEMA 添加到 @NgModule.schemas （这抑制了错误，但按钮根本没有出现，尺寸为 0x0...）。我没有创意，但会补充说我不是一个角度专家......

【问题讨论】：

标签： html angular google-classroom

【解决方案1】：

按照错误提示将以下内容添加到您的模块中。问题是 Angular 无法识别组件 g:sharetoclassroom，因为它是一个 web 组件，声明在 Angular 的范围之外。你需要通过NO_ERRORS_SCHEMA 告诉 Angular 这个。这基本上允许您在该模块中添加外部网络组件。

@NgModule({
…
schemas: [
   NO_ERRORS_SCHEMA
]
})

编辑：我看不到您的代码中加载了 webcomponent 的脚本。请确保在 webcomponent 标记之后执行此操作（没有 async 和 defer）。

【讨论】：

NO_ERRORS_SCHEMA 抑制了错误，并且该元素在技术上出现但尺寸为 0x0，当然不起作用。在 webcomponent 标签之后加载脚本是什么意思？我已经删除了async 和defer，脚本在index.html 的<head> 中。
Maya Iz，您解决上述问题了吗？你是怎么做到的？