Ng-lazyload-image: Error de preprocesamiento de compilación universal angular

También obtuve el mismo error, tengo angular universal instalado

`` `módulos_nodo \ ng-lazyload-image \ index.js: 1
(función (exporta, requiere, módulo, __filename, __dirname) {import {LazyLoadImageDirective} from './src/lazyload-image.directive';
^^^^^^

SyntaxError: importación de token inesperada
en createScript (vm.js: 80: 10)
en Object.runInThisContext (vm.js: 139: 10)
en Module._compile (module.js: 617: 28)
en Object.Module._extensions..js (module.js: 664: 10)
en Module.load (module.js: 566: 32)
en tryModuleLoad (module.js: 506: 12)
en Function.Module._load (module.js: 498: 3)
en Module.require (module.js: 597: 17)
en require (internal / module.js: 11:18)
en eval (paquete web: /// external_% 22ng-lazyload-image% 22?: 1: 18) `` `

Terminé escribiendo mi propia directiva que funciona con Universal:

import { Directive, ElementRef, Inject, Input, OnInit, PLATFORM_ID} from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

@Directive({
  selector: '[appLazyLoadImage]'
})
export class LazyLoadImageDirective implements OnInit {
  @Input() srcLazy: string;

  constructor(
    private el: ElementRef,
    @Inject(PLATFORM_ID) private platformId: Object,
  ) { }

  ngOnInit() {
    // only run lazy image loading in the browser
    if (isPlatformBrowser(this.platformId)) {
      // if browser supports IntersectionObserver
      if ('IntersectionObserver' in window) {
        const lazyImageObserver = new IntersectionObserver((entries, observer) => {
          entries.forEach((entry) => {
            if (entry.isIntersecting) {
              entry.target.setAttribute('src', this.srcLazy);
              entry.target.classList.add('lazy-loaded');
              lazyImageObserver.unobserve(entry.target);
            }
          });
        });
        lazyImageObserver.observe(this.el.nativeElement);
      } else {
        // Otherwise replace image by default
        this.el.nativeElement.setAttribute('src', this.srcLazy);
      }
    }
  }

}

impórtelo en su módulo:

import { LazyLoadImageDirective } from './lazy-load-image.directive';
...
@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [
    LazyLoadImageDirective
  ],
  exports: [
    CommonModule,
    LazyLoadImageDirective
  ]
})
...etc

y usar en una imagen con:
<img src="../assets/placeholder.jpg" srcLazy="../assets/myimage.jpg" alt="Example" appLazyLoadImage />

También obtuve el mismo error, tengo angular universal instalado

(function (exports, require, module, __filename, __dirname) { import { LazyLoadImageDirective } from './src/lazyload-image.directive';
                                                              ^^^^^^

SyntaxError: Unexpected token import
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:617:28)
    at Object.Module._extensions..js (module.js:664:10)
    at Module.load (module.js:566:32)
    at tryModuleLoad (module.js:506:12)
    at Function.Module._load (module.js:498:3)
    at Module.require (module.js:597:17)
    at require (internal/module.js:11:18)
    at eval (webpack:///external_%22ng-lazyload-image%22?:1:18) ```

funciona con esto

agregó esto en la configuración del paquete web

externals: [ nodeExternals({ whitelist: [ /^ng-lazyload-image/, ] })

Supongo que angular universal solo puede importar módulos ComonJS y como ng-lazyload-image solo tiene módulos ES como destino angular universal falla.

Supongo que tenemos que configurar varios objetivos por ng-lazyload-image , como lo describe

@xmasuku , ¿puede dar un ejemplo más detallado de la configuración de su paquete web? ¿Dónde usas whitelist ?

@tjoskar Usé mi compilación de paquete web personalizado, no estaba usando angular cli

He generado un proyecto cli y me sale el mismo error

Está bien, intentaré echarle un vistazo esta noche.

Experimento el mismo problema al intentar construir con angular universal. @tjoskar, ¿ ha pensado en usar ng-packagr para construir su biblioteca? Puede crear y agrupar su biblioteca en formatos FESM2015, FESM5 y UMD.
Eche un vistazo aquí: https://github.com/ng-packagr/ng-packaged/blob/master/package.json#L11 (proyecto de ejemplo usando ng-packagr).

// Parece que es el problema común para universal eg. https://github.com/angular/angular-cli/issues/7200
// Tengo esta configuración en mi proyecto
// reemplace esto: --- " compile: server ": "tsc -p server.tsconfig.json"
// con esto: --- " compile: server ": "node --max_old_space_size = 3072 node_modules / webpack / bin / webpack.js --config webpack.server.config.js --progress --colors"

// luego cree webpack.server.config.js agregue el código a continuación:

const path = require('path');
const webpack = require('webpack');
const nodeExternals = require('webpack-node-externals');

module.exports = {
  mode: 'none',
  entry: {
    // This is our Express server for Dynamic universal
    server: './server.ts'
  },
  target: 'node',
  resolve: { extensions: ['.ts', '.js'] },
  externals: [ nodeExternals({
    whitelist: [
        /^ng-lazyload-image/,
    ]
  }), /.*?webpack.*?/i ],
  optimization: {
    minimize: false
  },
  output: {
    // Puts the output at the root of the dist folder
    path: path.join(__dirname, 'dist'),
    filename: '[name].js'
  },
  module: {
    rules: [
      { test: /\.ts$/, loader: 'ts-loader' },
      {
        // Mark files inside `@angular/core` as using SystemJS style dynamic imports.
        // Removing this will cause deprecation warnings to appear.
        test: /(\\|\/)@angular(\\|\/)core(\\|\/).+\.js$/,
        parser: { system: true },
      },
    ]
  },
  plugins: [
    new webpack.ContextReplacementPlugin(
      // fixes WARNING Critical dependency: the request of a dependency is an expression
      /(.+)?angular(\\|\/)core(.+)?/,
      path.join(__dirname, 'src'), // location of your src
      {} // a map of your routes
    ),
    new webpack.ContextReplacementPlugin(
      // fixes WARNING Critical dependency: the request of a dependency is an expression
      /(.+)?express(\\|\/)(.+)?/,
      path.join(__dirname, 'src'),
      {}
    )
  ]
};

// mi servidor.ts

''
importar 'zone.js / dist / zone-node';
importar {enableProdMode} desde '@ angular / core';
// Motor expreso
importar {ngExpressEngine} desde '@ nguniversal / express-engine';
// Importar mapa de módulo para carga diferida
importar {provideModuleMap} desde '@ nguniversal / module-map-ngfactory-loader';

importar * como expreso de 'expreso';
importar {unirse} desde 'ruta';

// El servidor se procesa más rápido con el modo Prod (el modo dev nunca es necesario)
enableProdMode ();

// Servidor expreso
aplicación constante = express ();

const PORT = process.env.PORT || 4000;
const DIST_FOLDER = unirse (proceso.cwd (), 'dist / navegador');

// * NOTA :: deje esto como require () ya que este archivo se construye dinámicamente desde el paquete web
const {AppServerModuleNgFactory, LAZY_MODULE_MAP} = require ('./ dist / server / main');

// Nuestro motor expreso universal (encontrado @ https://github.com/angular/universal/tree/master/modules/express-engine)
app.engine ('html', ngExpressEngine ({
bootstrap: AppServerModuleNgFactory,
proveedores: [
provideModuleMap (LAZY_MODULE_MAP)
]
}));

app.set ('motor de vista', 'html');
app.set ('vistas', DIST_FOLDER);

// Ejemplo de puntos finales de la API Express Rest
// app.get ('/ api / *', (req, res) => {});// Sirve archivos estáticos desde / browserapp.get (' . *', express.static (DIST_FOLDER, {
maxAge: '1 año'
}));

// Todas las rutas regulares utilizan el motor Universal
app.get ('*', (req, res) => {
res.render ('índice', {req});
});

// Inicie el servidor de nodo
app.listen (PUERTO, () => {
console.log ( Node Express server listening on http://localhost:${PORT} );
});

Por ahora, esto debería funcionar.

@tjoskar Usé su rama y parece solucionar el problema con el error de compilación. ¿Tiene un plan para fusionarlo y lanzarlo?

@Loutrinos , Perdón por la demora. ¿Puede intentar instalar [email protected] (beta) para ver si eso resuelve el problema? Gracias.

@tjoskar Veo en la versión 5.1.0 que la estructura es diferente. Esto está bien por ahora ya que es una versión beta.
Con 5.1.0 Angular Universal ya no se rompe: P

@Loutrinos ,

Veo en la versión 5.1.0 que la estructura es diferente

Lo siento, creé una nueva versión ([email protected]) con la misma estructura que antes. Mis semanas anteriores han sido bastante agitadas, pero ahora he vuelto al trabajo, así que déjame saber cómo te funciona.

Después de instalar la versión 5.1.1 y aparece este error:
ReferenceError: IntersectionObserver is not defined

@agustintarifa ¿Cómo se ve su archivo tsconfig.json ?

Acabo de crear este repositorio: https://github.com/tjoskar/ng-lazyload-image-bugs/tree/master/370-universal-starter-compile y parece que funciona bien. Cloné https://github.com/angular/universal-starter , instalé ng-lazyload-image (npm install [email protected]), agregué una imagen , compilada con npm run build:prerender y luego inició el servidor: node dist/server.js .

Gracias por la respuesta @tjoskar
Está funcionando ahora, cambié mis módulos.
En el uso del módulo de aplicación: LazyLoadImageModule.forRoot({}),
Y en los demás módulos: LazyLoadImageModule.forRoot({ preset: intersectionObserverPreset, }),

El único problema, el desplazamiento no funciona en la parte superior para ver la primera imagen.Necesito desplazarme 1px al menos y luego la otra carga cuando están visibles, quiero cargar las imágenes 200px antes.

Humm .. En mi ejemplo anterior , solo declaro LazyLoadImageModule en app.module y está funcionando bien y realmente no puedo reproducir el error. Sería muy útil si alguien pudiera crear un pequeño repositorio para reproducir el error (o proporcionar instrucciones paso a paso).

@agustintarifa , Respecto al problema de las compensaciones. ¿Puedes crear un nuevo problema para eso?

Hola, ¿cuándo podemos esperar v5.1.1 como estable, no beta? Porque también tengo este problema con SSR.

@ vytautas-pranskunas-, lo lanzaré mañana con algunas otras correcciones más pequeñas.

Siunds genial 👍

El lunes 1 de abril de 2019 a las 9:17 p.m. Oskar Karlsson [email protected]
escribió:

@ vytautas-pranskunas- https://github.com/vytautas-pranskunas- , lo haré
suéltelo mañana con algunas otras correcciones más pequeñas.

-
Recibes esto porque te mencionaron.
Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/tjoskar/ng-lazyload-image/issues/370#issuecomment-478709421 ,
o silenciar el hilo
https://github.com/notifications/unsubscribe-auth/ADvMl18aKahOsS6vr4C4h4Tagwy2p4TNks5vclsrgaJpZM4Z0lGg
.

[email protected] ya está disponible. Avíseme que el error aún se produce.

@tjoskar He estado usando 6.0.0 y el problema continúa aquí.

// app.module.ts

LazyLoadImageModule.forRoot({
  preset: intersectionObserverPreset
}),

Y cuando inicio el servidor SSR obtuve:

ReferenceError: IntersectionObserver is not defined

ref # 396