如何在Angular应用程序中嵌入一个Angular元素？

Question

我有一个Angular元素，使用自定义标记名称- fancy-button 。如何在Angular应用程序中嵌入 fancy-button ？

我尝试了以下方法，但都没有成功-

1. 在 index.html/angular.json[scripts] 中导入angular-element脚本，并将fancy-button 嵌入 app.component.html （在Angular应用程序中运行的根组件）

2. 在 app.component.html 中导入angular-element脚本，并将fancy-button 嵌入 app.component.html （在Angular应用程序中运行的根组件）

谢谢

- Moazzam Khan

---

把 angular-element 脚本放在 angular.json 的 scripts 中怎么样？ - Chau Tran

@ChauTran 我尝试在脚本中包含它，但它不起作用。我觉得我漏掉了什么。 - Moazzam Khan

@MoazzamKhanany，你有找到任何解决方案吗？ - Pavankumar Shukla

@ PavanShukla 是的，但有点复杂。我会尝试在几天后在这里发布它。 - Moazzam Khan

@MoazzamKhan 你好，我们也遇到了同样的问题。请问您能分享一下解决方案吗？ - Utkarsh

Answer 1

我在 index.html 中添加了以下内容：

<script type="text/javascript" src="assets/cappapproot.js"></script>

（cappapproot.js 是我的 Angular Element js 的名称）

这导致了一个 Uncaught Error: Zone already loaded. 为了解决这个错误，在 pollyfills.ts 中我注释掉了这一行：

import 'zone.js/dist/zone';  // Included with Angular CLI.

- RichardZ

---

当我将它放置在index.html中时，它对我也起作用，但是对于任何其他组件（例如app.component.html），它都不起作用。 - Vivek

Answer 2

最终，我成功地在我的应用中实现了自定义元素。您需要执行以下步骤：

1. 在您选择的项目中的angular.json中添加脚本文件：

    ...,
    "projects": {
        "my-awesome-project": {
        ...,
        "architect": {
            "build": {
                "options":{
                    ...,
                    "scripts": [
                        ...,
                        "[path to your awesome Element js]/[awesome-element].js"
                    ],
                    ...
                 },
             ...
         },
         ...
     }

2. 在你的polyfills文件中，在文件末尾包含import 'zone.js/dist/zone'; // Included with Angular CLI.。 3. 在你想要包含Angular元素的module中，必须在decorator的schemas参数中添加CUSTOM_ELEMENTS_SCHEMA。

@NgModule({
  declarations: [...],
  imports: [
    CommonModule,
    ...
  ],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})

- afiugud

Answer 3

你确定你使用的是正确的元素名称吗？你能发布一下你的组件和用法吗？

- Steoates