angular universal: importaciones dinámicas solo para navegador

Este team de especialistas pasados ciertos días de trabajo y recopilación de de información, encontramos los datos necesarios, nuestro deseo es que resulte útil para ti para tu plan.

Solución:

Por lo tanto, hay una manera de renderizar los componentes de PrimeNG en el navegador y omitirlos durante la renderización del servidor. Esas preguntas me ayudaron a comenzar a cavar en la dirección correcta:

angular-cli: Importaciones condicionales usando una variable de entorno

¿Cómo puedo importar condicionalmente un módulo ES6?

Mientras renderizaba el servidor, utilicé un componente simulado que representa un campo de entrada simple y usa el mismo selector ‘p-calendar’. El código final con el que terminé en mi app.module.

...//other imports
import  isBrowser  from 'angular2-universal';

let imports = [
    ... //your modules here
];
let declarations = [
    ... //your declarations here
];

if (isBrowser) 
    let CalendarModule = require('primeng/components/calendar/calendar').CalendarModule;
    imports.push(CalendarModule);

else 
    let CalendarMockComponent = require('./components/primeng/calendarmock.component').CalendarMockComponent;
    declarations.push(CalendarMockComponent);


@NgModule(
    bootstrap: [AppComponent],
    declarations: declarations,
    providers: [
        ... //your providers here
    ],
    imports: imports
)

Para hacer que su componente simulado sea compatible [(ngModel)] encuadernación utilice este tutorial. http://almerosteyn.com/2016/04/linkup-custom-control-to-ngcontrol-ngmodel

import  Component, forwardRef  from '@angular/core';
import  NG_VALUE_ACCESSOR, ControlValueAccessor  from '@angular/forms';

export const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: any = 
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => CalendarMockComponent),
    multi: true
;

@Component(
    selector: 'p-calendar',
    template: '',
    providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR]
)
export class CalendarMockComponent implements ControlValueAccessor 

    private innerValue: any = '';

    private onTouchedCallback: () => void = () => ;
    private onChangeCallback: (_: any) => void = () => ;

    //From ControlValueAccessor interface
    writeValue(value: any) 
        if (value !== this.innerValue) 
            this.innerValue = value;
        
    

    registerOnChange(fn: any) 
        this.onChangeCallback = fn;
    

    registerOnTouched(fn: any) 
        this.onTouchedCallback = fn;
    

Una solución alternativa para la importación de módulos que no requiere la carga dinámica de scripts: puede usar el compilerOptions.paths opción en la aplicación de su servidor tsconfig.json archivo para redirigir el módulo importado a una versión de solo servidor:

    ...
    "compilerOptions": 
        ...
        "paths": 
            "path/to/browser/module": "path/to/server/module"
        
    

Cuando el aplicación de servidor compilaciones, el compilador importará el módulo del servidor en lugar del módulo del navegador.

Acuérdate de que tienes concesión de decir si te fue de ayuda.

---

---

Utiliza Nuestro Buscador