Ng-lazyload-image: Angular Universal 빌드 사전 렌더링 오류

나는 또한 같은 오류가 발생했습니다. Angular Universal이 설치되어 있습니다.

``` node_modules\ng-lazyload-image\index.js:1
(함수(내보내기, 요구, 모듈, __filename, __dirname) { import { LazyLoadImageDirective } from './src/lazyload-image.directive';
^^^^^^

SyntaxError: 예기치 않은 토큰 가져오기
createScript에서(vm.js:80:10)
Object.runInThisContext에서(vm.js:139:10)
Module._compile에서 (module.js:617:28)
Object.Module._extensions..js에서 (module.js:664:10)
Module.load에서 (module.js:566:32)
tryModuleLoad에서(module.js:506:12)
Function.Module._load에서 (module.js:498:3)
Module.require에서 (module.js:597:17)
필요 시(internal/module.js:11:18)
평가 시 (webpack:///external_%22ng-lazyload-image%22?:1:18) ```

나는 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);
      }
    }
  }

}

모듈로 가져오기:

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

다음을 사용하여 이미지에 사용:
<img src="../assets/placeholder.jpg" srcLazy="../assets/myimage.jpg" alt="Example" appLazyLoadImage />

나는 또한 같은 오류가 발생했습니다. Angular Universal이 설치되어 있습니다.

(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) ```

이것으로 작동

이것을 webpack 구성에 추가했습니다.

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

angular universal 는 ComonJS 모듈만 가져올 수 있고 ng-lazyload-image 는 대상 angular universal 로 ES 모듈만 있으므로 실패합니다.

@kmturley가 설명한 대로 ng-lazyload-image 대해 여러 대상을 설정해야 한다고 생각합니다. 그러나 그것은 또한 나무 흔들기가 작동하지 않는다는 것을 의미합니다.

@xmasuku , webpack 구성에 대한 더 자세한 예를 들어 주시겠습니까? whitelist 는 어디에 사용합니까?

@tjoskar 내 사용자 정의 webpack 빌드를 사용했는데 angular cli를 사용하지 않았습니다.

cli 프로젝트를 생성했는데 동일한 오류가 발생합니다.

좋아, 오늘 밤에 그것을 보려고 노력할거야

Angular Universal로 빌드를 시도하는 동안 동일한 문제가 발생합니다. @tjoskar ng-packagr 를 사용하여 라이브러리를 구축하는 것에 대해 생각해 보셨습니까 ? FESM2015, FESM5 및 UMD 형식으로 라이브러리를 빌드하고 번들할 수 있습니다.
https://github.com/ng-packagr/ng-packaged/blob/master/package.json#L11(ng-packagr을 사용하는 예제 프로젝트)을 살펴보세요.

// 보편적인 문제처럼 보입니다. 예. https://github.com/angular/angular-cli/issues/7200
// 내 프로젝트에 이 설정이 있습니다.
// 이것을 대체합니다: --- " compile:server ": "tsc -p server.tsconfig.json"
// 다음과 함께: --- " compile:server ": "node --max_old_space_size=3072 node_modules/webpack/bin/webpack.js --config webpack.server.config.js --progress --colors"

// 그런 다음 webpack.server.config.js를 만들고 아래 코드를 추가합니다.

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'),
      {}
    )
  ]
};

// 내 서버.ts

```
import 'zone.js/dist/zone-node';
'@angular/core'에서 {enableProdMode} 가져오기;
// 익스프레스 엔진
'@nguniversal/express-engine'에서 {ngExpressEngine} 가져오기;
// 지연 로딩을 위한 모듈 맵 가져오기
'@nguniversal/module-map-ngfactory-loader'에서 {provideModuleMap} 가져오기;

import * '익스프레스'에서 익스프레스로;
'경로'에서 {join} 가져오기;

// 더 빠른 서버 렌더링 w/ Prod 모드(개발 모드는 필요하지 않음)
enableProdMode();

// 익스프레스 서버
const 앱 = 익스프레스();

const 포트 = process.env.PORT || 4000;
const DIST_FOLDER = Join(process.cwd(), 'dist/browser');

// * 참고: 이 파일은 웹팩에서 동적으로 빌드되므로 이것을 require()로 둡니다.
const {AppServerModuleNgFactory, LAZY_MODULE_MAP} = require('./dist/server/main');

// 유니버셜 익스프레스 엔진(https://github.com/angular/universal/tree/master/modules/express-engine에서 찾을 수 있음)
app.engine('html', ngExpressEngine({
부트스트랩: AppServerModuleNgFactory,
공급자: [
제공 모듈 맵(LAZY_MODULE_MAP)
]
}));

app.set('보기 엔진', 'html');
app.set('보기', DIST_FOLDER);

// Express Rest API 엔드포인트 예시
// app.get('/api/ *', (req, res) => { });// /browser에서 정적 파일 제공app.get(' .*', express.static(DIST_FOLDER, {
maxAge: '1년'
}));

// 모든 일반 경로는 유니버설 엔진을 사용합니다.
app.get('*', (요청, 해상도) => {
res.render('색인', { 요청 });
});

// 노드 서버 시작
app.listen(포트, () => {
console.log( Node Express server listening on http://localhost:${PORT} );
});

현재로서는 이것이 작동해야 합니다.

@tjoskar 귀하의 분기를 사용했으며 빌드 오류 문제를 해결하는 것 같습니다. 언제 병합하여 출시할 계획이 있습니까?

@Loutrinos , 늦어서 죄송합니다. [email protected] (베타)를 설치하여 문제가 해결되는지 확인할 수 있습니까? 감사 해요.

@tjoskar 5.1.0 릴리스에서 구조가 다르다는 것을 알 수 있습니다. 베타 릴리스이므로 지금은 괜찮습니다.
5.1.0 Angular Universal은 더 이상 깨지지 않습니다 :P

@루트리노스

5.1.0 릴리스에서 구조가 다른 것을 봅니다.

죄송합니다. 이전과 동일한 구조로 새 릴리스([email protected])를 만들었습니다. 지난 몇 주간은 매우 바빴지만 이제 다시 업무에 복귀할 수 있으므로 어떻게 하면 되는지 알려주세요.

5.1.1 버전을 설치한 후 다음 오류가 발생합니다.
ReferenceError: IntersectionObserver is not defined

@agustintarifa tsconfig.json 파일은 어떻게 생겼나요?

방금 이 리포지토리를 만들었습니다: https://github.com/tjoskar/ng-lazyload-image-bugs/tree/master/370-universal-starter-compile 하고 잘 작동합니다. https://github.com/angular/universal-starter 복제하고 ng-lazyload-image (npm install [email protected] 설치)를 설치하고 npm run build:prerender 컴파일된 이미지를 추가 하고 그런 다음 node dist/server.js 서버를 시작했습니다.

@tjoskar 답변 감사합니다.
지금 작동하고 있으며 모듈을 변경했습니다.
app.module 사용: LazyLoadImageModule.forRoot({}),
그리고 다른 모듈에서: LazyLoadImageModule.forRoot({ preset: intersectionObserverPreset, }),

유일한 문제는 오프셋이 맨 위에서 작동하지 않아 첫 번째 이미지를 보려면 최소한 1px를 스크롤해야 하고 다른 이미지가 표시될 때 로드해야 합니다. 그 전에 이미지를 200px 로드하고 싶습니다.

HUMM는 ..에서 내 위의 예 난 단지 선언 LazyLoadImageModule 에서 app.module 하고 잘 작동하고 정말 오류를 재현 할 수 있습니다. 누군가가 오류를 재현하기 위해 작은 저장소를 만들 수 있다면(또는 단계별 지침을 제공할 수 있다면) 매우 도움이 될 것입니다.

@agustintarifa , 오프셋 문제에 대해. 당신은 그것에 대한 새로운 문제를 만들 수 있습니까?

안녕하세요, 베타가 아닌 안정적인 v5.1.1을 언제 기대할 수 있습니까? SSR에도 이 문제가 있기 때문입니다.

@vytautas-pranskunas-, 다른 작은 수정 사항과 함께 내일 출시할 예정입니다.

대단해 👍

2019년 4월 1일 월요일 오후 9:17 Oskar Karlsson [email protected]
썼다:

@vytautas-pranskunas- https://github.com/vytautas-pranskunas- , 나는
다른 작은 수정 사항과 함께 내일 릴리스하십시오.

—
당신이 언급되었기 때문에 이것을 받는 것입니다.
이 이메일에 직접 답장하고 GitHub에서 확인
https://github.com/tjoskar/ng-lazyload-image/issues/370#issuecomment-478709421 ,
또는 스레드 음소거
https://github.com/notifications/unsubscribe-auth/ADvMl18aKahOsS6vr4C4h4Tagwy2p4TNks5vclsrgaJpZM4Z0lGg
.

[email protected] 이(가) 출시되었습니다. 오류가 계속 발생한다고 알려주십시오.

@tjoskar 나는 6.0.0 하고 있으며 문제는 여기에서 계속됩니다.

// app.module.ts

LazyLoadImageModule.forRoot({
  preset: intersectionObserverPreset
}),

그리고 SSR 서버를 시작할 때 다음을 얻었습니다.

ReferenceError: IntersectionObserver is not defined

참조 #396