2

我正在尝试转换我的角度组件，以便它可以在角度和非角度环境中运行。

我已将我的元素添加为导出并将它们添加到自定义元素列表和条目组件列表中，以便它们将作为自定义元素导出。

下面是我的angular-liberary模块导出的代码

@NgModule({
  imports: [
    RouterModule,
    CommonModule,
    ReactiveFormsModule,
    NgbModule.forRoot(),
    CoreRoutingModule,
    FontAwesomeModule
  ],
  declarations: [
    HeaderComponent,
    FooterComponent,
    AlertsComponent,
    LoginComponent,
    ProfileComponent,
    PrivacyComponent,
    ChangeLocationModelComponent,
    CorouselComponent,
    FilterPipe,
    ContentLoadingComponent,
    AutoScrollDirective,
    ModelComponent
  ],
  exports: [
    HeaderComponent,
    FooterComponent,
    AlertsComponent,
    LoginComponent,
    ProfileComponent,
    PrivacyComponent,
    ChangeLocationModelComponent,
    CorouselComponent,
    ContentLoadingComponent,
    AutoScrollDirective,
    FontAwesomeModule
  ],
  entryComponents: [
    HeaderComponent,
    FooterComponent,
    AlertsComponent,
    LoginComponent,
    ProfileComponent,
    PrivacyComponent,
    ChangeLocationModelComponent,
    CorouselComponent,
    ContentLoadingComponent,
    ModelComponent
  ]
})
export class CoreModule {
  public static forRoot(): ModuleWithProviders {
    return {
      ngModule: CoreModule,
      providers: [
        AppService,
        AlertService,
        AppInitService,
        AuthGuardService,
        CoreService,
        EncryptionService,
        MapService,
        NoAuthGuardService,
        {
          provide: WINDOW,
          useFactory: windowFactory
        },
        UserService,
        GoogleAnalyticsService
      ]
    };
  }

  constructor(@Optional() @SkipSelf() parentModule: CoreModule, private injector: Injector) {
    if (parentModule) {
      throw new Error(
        'CoreModule is already loaded. Import it in the AppModule only');
    }
    customElements.define('cfs-header', createCustomElement(HeaderComponent, {injector}));
    customElements.define('cfs-footer', createCustomElement(FooterComponent, {injector}));
    customElements.define('cfs-alert', createCustomElement(AlertsComponent, {injector}));
    customElements.define('cfs-login', createCustomElement(LoginComponent, {injector}));
    customElements.define('cfs-profile', createCustomElement(ProfileComponent, {injector}));
    customElements.define('cfs-privacy', createCustomElement(PrivacyComponent, {injector}));
    customElements.define('cfs-change-location-model', createCustomElement(ChangeLocationModelComponent, {injector}));
    customElements.define('cfs-corousel', createCustomElement(CorouselComponent, {injector}));
    customElements.define('cfs-content-loading', createCustomElement(ContentLoadingComponent, {injector}));
    customElements.define('cfs-model', createCustomElement(ModelComponent, {injector}));

  }
}

然后在 app 模块中作为 forRoot() 导入。

当我从如下所示安装的 npm 导入时，它给了我以下错误

import {CoreModule} from '@candifood/core';
CoreModule.forRoot(),

// ERROR
DOMException: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry
    at new CoreModule (http://localhost:4200/main.js:1045:24)
    at _createClass (http://localhost:4200/vendor.js:43333:20)
    at _createProviderInstance$1 (http://localhost:4200/vendor.js:43303:26)
    at initNgModule (http://localhost:4200/vendor.js:43239:32)
    at new NgModuleRef_ (http://localhost:4200/vendor.js:43962:9)
    at createNgModuleRef (http://localhost:4200/vendor.js:43951:12)
    at Object.debugCreateNgModuleRef [as createNgModuleRef] (http://localhost:4200/vendor.js:45776:12)
    at NgModuleFactory_.push../node_modules/@angular/core/fesm5/core.js.NgModuleFactory_.create (http://localhost:4200/vendor.js:46478:25)
    at http://localhost:4200/vendor.js:39376:43
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:4200/polyfills.js:2704:26)

当我直接将它们作为内部模块导入如下时，会出现以下错误。

import { CoreModule } from '../../projects/somemodule/core/src/lib/core.module';
CoreModule.forRoot(),

// ERROR
Uncaught TypeError: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function.
    at NgElementImpl.NgElement [as constructor] (elements.js:391)
    at new NgElementImpl (elements.js:427)
    at EmulatedEncapsulationDomRenderer2.push../node_modules/@angular/platform-browser/fesm5/platform-browser.js.DefaultDomRenderer2.createElement (platform-browser.js:1204)
    at EmulatedEncapsulationDomRenderer2.push../node_modules/@angular/platform-browser/fesm5/platform-browser.js.EmulatedEncapsulationDomRenderer2.createElement (platform-browser.js:1312)
    at DebugRenderer2.push../node_modules/@angular/core/fesm5/core.js.DebugRenderer2.createElement (core.js:11100)
    at createElement (core.js:7823)
    at createViewNodes (core.js:10062)
    at callViewAction (core.js:10417)
    at execComponentViewsAction (core.js:10336)
    at createViewNodes (core.js:10129)

仍在调试，任何帮助将不胜感激。

4

0 回答 0