在 Angular Elements 中导出和使用指令不是组件？ 角 12

如何解决在 Angular Elements 中导出和使用指令不是组件？ 角 12

好吧，我已经被这个问题难住了几天，我迷路了。有时试图将所有事情作为一个组件来做是行不通的，所以我需要指令。

我面临的问题是，当我尝试导出要在使用导出的 Angular Elements 项目的前端应用程序中使用的指令时，组件可以工作但指令不起作用，从而导致代码崩溃如下：>

elements.js:1 TypeError: Cannot read property 'type' of null
    at new So (elements.js:1)
    at xo.resolveComponentFactory (elements.js:1)
    at elements.js:1
    at Tu (elements.js:1)
    at new t (elements.js:1)
    at Object.t.ɵfac [as factory] (elements.js:1)
    at Ps.hydrate (elements.js:1)
    at Ps.get (elements.js:1)
    at elements.js:1
    at Set.forEach (<anonymous>)

或

elements.js:formatted:8942 TypeError: Cannot read property 'type' of null
    at new vs (elements.js:formatted:6305)
    at ms.resolveComponentFactory (elements.js:formatted:6284)
    at elements.js:formatted:8836
    at customElements.define.injector (elements.js:formatted:8837)
    at new e (elements.js:formatted:8917)
    at Object.e.ɵfac [as factory] (elements.js:formatted:8924)
    at fr.hydrate (elements.js:formatted:5139)
    at fr.get (elements.js:formatted:5008)
    at elements.js:formatted:5048
    at Set.forEach (<anonymous>)

这一行是这样的：

出于某种原因，t 为空。这只发生在指令中。组件运行良好，但我遇到的问题是 Angular 团队不想给我们一种方法来删除组件 host 元素，所以我被困在我没有的 DOM 容器标签上想要，但它与我想要使用的某些 CSS 框架并不能很好地配合使用。我尝试删除宿主元素并将子元素向上移动到 DOM 到宿主组件的父元素，但随后双向数据绑定不起作用。

为了提供一些上下文，我想创建一个可以像这样工作的 Angular 指令：

<div class="form-floating mb-3">
  <input type="email" my-directive-here class="form-control" id="floatingInput">
  <label for="floatingInput">Email address</label>
</div>

这样我就可以使用 input 向我的 my-directive-here 标签添加额外的功能，我将其导出为：

import { Directive } from '@angular/core';

@Directive({
  selector: '[MyDirectiveHere]'
})
export class TestDirective {

  constructor() { }

}

import { browserModule } from '@angular/platform-browser';
import { NgModule,Injector } from '@angular/core';
import { createCustomElement } from '@angular/elements';
import { FormsModule } from '@angular/forms';
import { TestDirective } from './test.directive';

@NgModule({
  declarations: [TestDirective],imports: [
    FormsModule,browserModule
  ],entryComponents: [TestDirective]
})
export class AppModule {
  constructor(private injector: Injector) {
    customElements.define('MyDirectiveHere',createCustomElement(TestDirective,{ injector: this.injector }));
  }
  ngdobootstrap() { }
}

很简单，但它崩溃了。欢迎任何想法！