search

manfredsteyer / ngx-build-plus

Extend the Angular CLI's default build behavior without ejecting, e. g. for Angular Elements
1.19k stars 136 forks source link

Uncaught TypeError: Cannot read properties of undefined (reading 'create') #335

Closed adibbz closed 2 years ago

adibbz commented 2 years ago

Registering multiple apps and getting this error:

Screen Shot 2022-04-13 at 5 04 26 PM 
  ngDoBootstrap(appRef: ApplicationRef): void {
    const el = createCustomElement(AppComponent, { injector: this.injector });
    customElements.define('custom-element', el);

    const el2 = createCustomElement(CustomComponent, { injector: this.injector });
    customElements.define('custom-element-two', el2);
  }
"architect": {
        "build": {
          "builder": "ngx-build-plus:browser",
          "options": {
            "outputPath": "dist/ui-custom-element",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": true,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": [
              "node_modules/document-register-element/build/document-register-element.js",
              {
                "bundleName": "polyfill-webcomp-es5",
                "input": "node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"
              },
              {
                "bundleName": "polyfill-webcomp",
                "input": "node_modules/@webcomponents/webcomponentsjs/bundles/webcomponents-sd-ce-pf.js"
              },
              "node_modules/rxjs/bundles/rxjs.umd.js",
              "node_modules/@angular/core/bundles/core.umd.js",
              "node_modules/@angular/common/bundles/common.umd.js",
              "node_modules/@angular/common/bundles/common-http.umd.js",
              "node_modules/@angular/compiler/bundles/compiler.umd.js",
              "node_modules/@angular/elements/bundles/elements.umd.js",
              "node_modules/@angular/platform-browser/bundles/platform-browser.umd.js",
              "node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js"
            ],
            "allowedCommonJsDependencies": [
              "@solana/buffer-layout",
              "@toruslabs/openlogin",
              "@toruslabs/openlogin-ed25519",
              "@toruslabs/http-helpers"
            ]
          },
adibbz commented 2 years ago

Solution: This ended up not being an issue with ngx-build-plus or the included polyfills.

We were importing a deprecated package document-register-element that was causing the console errors. Removing import 'document-register-element'; from polyfills.ts fixed the console errors.

https://www.npmjs.com/package/document-register-element

abhi901abhi commented 1 year ago

@adibbz what is the solution for this?

**We have document register element at below locations in angular.json:** "projects.myWidgetBuilder.architect.build.options.scripts" and "projects.elements.architect.build.options.scripts"

"scripts": [ { "input": "node_modules/document-register-element/build/document-register-element.js" }

Do I need to remove these above lines from myWidgetBuilder and elements in angular.json?