Question

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

我尝试了以下方法，但没有一种方法有效 -

index.html/angular.json[scripts]中导入的角度元素脚本和fancy-button中嵌入的app.component.html（角度应用程序中运行的根组件）
app.component.html中的导入角度元素脚本以及fancy-button中嵌入的app.component.html（角度应用程序中运行的根组件）

由于

Answer 1

在Index.Html中，我添加了：

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

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

这导致“未捕获的错误：区域已加载”。错误。

要解决此错误，我在pollyfills.ts中对此行进行了注释：

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

Answer 2

最后，我设法在我的应用程序中实现了自定义元素。您应该执行以下步骤：

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

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

在您的 polyfills 文件中，在文件末尾包含 import 'zone.js/dist/zone'; // Included with Angular CLI.。
在要包含 module 的 Angular element 中，您必须在 CUSTOM_ELEMENTS_SCHEMA 的 schemas 参数中添加 decorator：

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

Answer 3

您绝对确定使用正确的元素名称吗？您可以发布组件和使用情况吗？

如何在角度应用中嵌入角度元素？

3 个答案: