Angular 10 support

[hardikpatel043]

Does this package works with angular version "^10.0.0"?

I tried it and I have got below error.

core.umd.js:4484 ERROR Error: The selector "mf-home" did not match any elements
    at DefaultDomRenderer2.selectRootElement (platform-browser.umd.js:987)
    at locateHostElement (core.umd.js:7980)
    at ComponentFactory.create (core.umd.js:22844)
    at ApplicationRef.bootstrap (core.umd.js:29036)
    at core.umd.js:28736
    at Array.forEach (<anonymous>)
    at PlatformRef._moduleDoBootstrap (core.umd.js:28736)
    at core.umd.js:28704
    at ZoneDelegate.invoke (zone-evergreen.js:364)
    at Object.onInvoke (core.umd.js:28133)

Here is my package.json

"dependencies": {
    "@angular-extensions/elements": "^10.0.2",
    "@angular/animations": "^10.0.0",
    "@angular/cdk": "^10.1.3",
    "@angular/common": "^10.0.0",
    "@angular/compiler": "^10.0.0",
    "@angular/core": "^10.0.0",
    "@angular/elements": "^10.0.14",
    "@angular/flex-layout": "^10.0.0-beta.32",
    "@angular/forms": "^10.0.0",
    "@angular/material": "^10.1.3",
    "@angular/platform-browser": "^10.0.0",
    "@angular/platform-browser-dynamic": "^10.0.0",
    "@angular/router": "^10.0.0",
    "@nrwl/angular": "10.0.12",
    "@webcomponents/custom-elements": "^1.4.2",
    "@webcomponents/webcomponentsjs": "^2.4.4",
    "ngx-build-plus": "^10.1.1",
    "rxjs": "~6.5.5",
    "zone.js": "^0.10.2"
  },

my app.component.html

<mf-home *axLazyElement="elementUrl"> </mf-home>

my app.component.ts

elementUrl = 'assets/bundles/main.f0aedbe8f4f67ea36480.js';

this main.js file is created with help of ngx-build-plus package. This works if I load this js file using script tag.

I can provide complete code if it is required.

[tomastrajan]

Hi @hardikpatel043 !

do you have schemas: [CUSTOM_ELEMENT_SCHEMA] in the module which has declaration of thecomponent in which template you try to use the *axLazyElement directive ?

[hardikpatel043]

Yes i have schemas: [CUSTOM_ELEMENT_SCHEMA]. Now i found the issue.

I had bootstrap mentioned in my micro app. Once i removed it and created a bundle, it worked.

Thank you for quick reply.

[janstadt]

@hardikpatel043 are you talking about ngDoBootstrap ? Im having issues with angular 10 as well and im trying to figure out what you meant by bootstrap. Was it ngModule bootstrap[], ngDoBootstrap or twitter bootstrap that you were talking about?

[tomastrajan]

@janstadt I think he had bootstrap[] in the AppModule of his element, but the way to do it is to use ngDoBootstrap instead where we just register component as an element instead of bootstraping anything ;)

[hardikpatel043]

@janstadt I think he had bootstrap[] in the AppModule of his element, but the way to do it is to use ngDoBootstrap instead where we just register component as an element instead of bootstraping anything ;)

@tomastrajan Yes, you are correct. I had both previously, then i removed bootstrap[] in AppModule.

[janstadt]

thanks guys. I was able to get it working but now im running into an issue with property binding on Input() props. Its always null. I see there are a few closed issues that address this but was curious if there were any examples/stackblitz's that show the use of an web component created via an angular app inside a parent angular app. I gotta be missing something. Not sure what it is. I did notice that the parent container app (using axLazyElementDynamic) was angular 10 and the web component was generated using angular 9 so i downgraded the parent container app without any luck. Im going to try and create an entirely new component and app in the same version using the matching extensions package to see if i can get past this. #50 #54