angular-element error when component used inside angular app and as custom element out side of angular

Question

I am trying to convet my angular component so that it will run in both angular and non angular environment.

I have added my elements as export and added them to custom element list and entry component list so that they will be exported as custom elements.

Below is the code of my angular-liberary module exports

@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}));

  }
}

Then imported as forRoot() in app module.

When I import from npm packaged installed like below, it gives me below error

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)

When I directly import them as internal module as below it gives below error.

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)

Still debugging, ay help will appreciate.