brunob15 / ngx-element

Angular Element that allows lazy loading Angular components in non-angular applications
33 stars 5 forks source link

Check Platform before call `createCustomElement` #26

Open gogoout opened 4 years ago

gogoout commented 4 years ago

Including this library in a SSR project will break it. See https://github.com/angular/angular/issues/24551

The solution is quite simple, just check platform before call createCustomElement

ngx-element.module.ts https://github.com/brunob15/ngx-element/blob/master/projects/ngx-element/src/lib/ngx-element.module.ts

import { NgModule, Injector, ModuleWithProviders, Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
import { NgxElementComponent } from './ngx-element.component';
import { LAZY_CMPS_PATH_TOKEN } from './tokens';

@NgModule({
    declarations: [NgxElementComponent],
    entryComponents: [NgxElementComponent]
})
export class NgxElementModule {

    constructor(private injector: Injector, @Inject(PLATFORM_ID) private platformId: string) {
                // conditional import angular/elements
        if (isPlatformBrowser(platformId)) {
            const { createCustomElement } = require('@angular/elements');
            const ngxElement = createCustomElement(NgxElementComponent, { injector });
            customElements.define('ngx-element', ngxElement);
        }
    }

    static forRoot(modulePaths: any[]): ModuleWithProviders<NgxElementModule> {
        return {
            ngModule: NgxElementModule,
            providers: [
                {
                    provide: LAZY_CMPS_PATH_TOKEN,
                    useValue: modulePaths
                }
            ]
        };
    }

    ngDoBootstrap() {}
}
PatrickJS commented 4 years ago

LGTM