Question

我正在开发一个角度项目，该项目在某个时候还包含Angular中的外部组件。

我可以轻松地将其加载到项目的index.html中，但是，当尝试将其加载到模块中时，它无法识别标记。

例如：

Index.html：

<script src = "https: //componenturl.com \"> </script>
<extrnal-component> </extrnal-component>

但是，在组件中执行相同的操作会给我带来以下错误：

“外部成分”不是已知元素。

如何正确加载此组件？

Answer 1

可以进行以下检查：

我可以看到一个拼写错误。它说extrnal-component，而不是external-component。

您是从同一模块调用它吗？如果是这样，您是否在模块的声明中声明了该组件？

@NgModule({
    declarations: [ExternalComponent],
    imports: [...],
})

ExternalComponent是其他模块的一部分吗？如果是这样，您是否在其模块的声明以及其导出中声明了它？

@NgModule({
    declarations: [ExternalComponent],
    imports: [...],
    exports: [ExternalComponent],
})

Answer 2

您是否已在应用程序模块中注册了该组件？

假定组件类在ifle“ ../components/external/external.component”中声明。

import { ExtrnalComponent } from "../components/external/external.component"

@NgModule({
    declarations: [
        ...
        ExtrnalComponent
    ],
    imports: [
       ....
    ],
    bootstrap: [AppComponent]

})
export class AppModule {
}

Answer 3

我通过在我的组件中动态添加标签来解决了这个问题。

comp.component.ts

import { Component, OnInit, ChangeDetectorRef, Renderer2, ElementRef, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';

...
constructor(
   private elementRef: ElementRef, 
   private renderer: Renderer2,
   @Inject(DOCUMENT) private document
){}

...

const child = document.createElement('extrnal-component');
this.renderer.appendChild(this.elementRef.nativeElement, child);

我将脚本标签加载到component.html的末尾，这样它可以正常工作

谢谢大家

Angular 8-在Angular模块中加载外部组件angular

3 个答案: