Importing 3rd party component into browser module

[LiverpoolOwen]

Hi,

I am having some trouble with importing a 3rd party Angular module into my project. The third party module is angular-modal-gallery. It works when I turn off pre rendering and adding ModalGalleryModule.forRoot() to the Shared module but when I put it in the browser module I get the error 'can't bind to imagesModal as it is not a known property of Modal-Gallery'. I have tried with and without the binded property being wrapped in the isPlatformBrowser.

I have looked over the documentation but cannot find where I am going wrong. I am pretty sure its something obvious but can't figure it out. It is like it knows about the element but not the attribute. Any ideas where I am going wrong?

[parys]

I faced with possible similar error when adding 3rd party library, for resolve I do: 1 move import this library to main.browser.ts instead of shared or component file 2 wrap all code into isBrowserPlatform or check if this property exists because i'm getting error when importing it from main shared or inside component file. Maybe it will be helpful

[juliocgm83]

Hi @LiverpoolOwen I am having the same issue in my project with a 3rd party library, have you been able to figure it out?

[MarkPieszak]

Hey guys sorry, super busy as usual :(

So if wrapping the element (entirely) with a ng-container or something that's only showing it ifPlatformBrowser() isn't working. You're going to have to use webpack to strip it out of your server bundle, and provide an alternative/mock'd version of it. (That doesn't work, but at least it gets the server to function properly and run).

You can see in this Gist below, I'm providing different things for the server, and using webpack and NormalReplacementPlugin to swap out whatever it is that's broken and provide an alternative version.

https://gist.github.com/MarkPieszak/0e7f4174e258a9be22e5561d92a7a443

[LiverpoolOwen]

Thank Mark I will have a look at this later and try implement it for myself

[LiverpoolOwen]

Hi mark so yeah I added the Imports on the browser module then added the following to the component

isBrowser: boolean; constructor( @Inject(PLATFORM_ID) private platformId: Object) { } ngOnInit(): void { this.isBrowser = isPlatformBrowser(this.platformId); } Then in the component I have added

<ng-container *ngIf="isBrowser"> <modal-gallery [modalImages]="imagesArray" [downloadable]="false"></modal-gallery> </ng-container>

I am still getting the error stating

Can't bind to 'modalImages' since it isn't a known property of 'modal-gallery'.

Does this mean i will have to as you say mock it out

[LiverpoolOwen]

@juliocgm83 @parys I have posted this question with the code on stack overflow for the sake of the community. I will try implementing what you posted @MarkPieszak and if I can get it working will answer my own question. Thanks https://stackoverflow.com/questions/47371601/server-side-pre-rendering-fail

[LiverpoolOwen]

@MarkPieszak according to an answer on stack overflow we just need to create a mock with the input attributes and import them into the server module. I tried this though and it did not work. How come we need to use webpack like you said to do this?

[peterdobson]

I too would be interested in how to do this properly as I have struggled with some 3rd party components too (e.g. angular2-qrscanner), regardless of where i import the components or whether I use *ngIf="isBrowser". Have tried mocking the components but not managed to get it to work.

@LiverpoolOwen I noticed in your stackoverflow issue you have used the case of Angular Google Maps,, I am able to use agm-map with aspnetcore-angular2-universal, just by importing normally into app.module (rather than app.module.browser) and gating in the html with *ngIf="isBrowser".

[LiverpoolOwen]

Your right @peterdobson! thank you, it is just my pdf viewer angular module which is causing me problems now. @MarkPieszak I know you are busy mate but if you or anyone else could give us some information on how to deal with the issues we are getting with these rogue Angular directives that would be great.

I have checked out the Gist you posted and have implemented the mocks but I am struggling to understand why we need to use webpack to do some fudging of getting the bad browser code out from server-main. If we are only using mocks in the server module how can it get in there in the first place?

[MarkPieszak]

Have you guys tried wrapping them in a conditional ng-container with isBrowser (being a public prop on your component testing for isPlatformBrowser) on them?

<ng-container *ngIf="isBrowser">
   <!-- crazy components/directives -->
</ng-container>

@LiverpoolOwen Apologies on the delay, hadn't seen this :(

[peterdobson]

Have you guys tried wrapping them in a conditional ng-container with isBrowser (being a public prop on your component testing for isPlatformBrowser) on them?

@MarkPieszak yep, I had previously done, that and nothing I tried seemed to work, fortunately now though with the angular2-qrscanner a new version of it has fixed the issue