如何在Angular 4模塊中延遲加載庫？

Question

我有一個包含多個模塊的應用程序。
模塊之一是可視化pdf。 我使用的是pdf.js，它非常貪婪，因此vendor.js有點大。

有沒有一種方法可以在我延遲加載pdf模塊的同時延遲加載庫？

我注意到了這個答案，但感覺不對。 在Angular 2中動態加載外部js腳本

我不是要延遲加載模塊，而是要外部加載庫。

Answer 1

如果您要延遲加載外部庫（例如jquery ， jspdf ，則可以創建一些服務，例如：

延遲加載庫服務

import { Injectable, Inject } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { ReplaySubject } from 'rxjs/ReplaySubject';

import { DOCUMENT } from '@angular/platform-browser';

@Injectable()
export class LazyLoadingLibraryService {
  private loadedLibraries: { [url: string]: ReplaySubject<any> } = {};

  constructor(@Inject(DOCUMENT) private readonly document: any) { }

  public loadJs(url: string): Observable<any> {
    if (this.loadedLibraries[url]) {
      return this.loadedLibraries[url].asObservable();
    }

    this.loadedLibraries[url] = new ReplaySubject();

    const script = this.document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;
    script.onload = () => {
      this.loadedLibraries[url].next('');
      this.loadedLibraries[url].complete();
    };

    this.document.body.appendChild(script);
    return this.loadedLibraries[url].asObservable();
  }
}

並且每當您需要一些外部庫時，只需使用此服務即可加載庫一次：

app.component.ts

export class AppComponent {
  constructor(private service: LazyLoadingLibraryService) {}

  loadJQuery() {
    this.service.loadJs('https://code.jquery.com/jquery-3.2.1.min.js').subscribe(() => {
        console.log(`jQuery version ${jQuery.fn.jquery} has been loaded`);
    });
  }

  loadJsPdf() {
     this.service.loadJs('https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js').subscribe(() => {
      console.log(`JsPdf library has been loaded`);
    });
  }

柱塞示例

如果您正在尋找延遲加載角度模塊，那么以下問題可能對您有所幫助：

• 如何手動延遲加載模塊？

• 如何在TabView（PrimeNG）中延遲加載Angular 2組件？

Answer 2

我希望您正在使用Angular CLI。

1. 安裝pdfjs-dist軟件包：

   npm install pdfjs-dist

2. 安裝類型：

   npm install @types/pdfjs-dist --save-dev

3. 將以下導入語句添加到您的延遲加載的模塊文件中 ：

   import 'pdfjs-dist';

當您運行ng build時，最后一步將pdf.js源代碼嵌入到延遲加載的包中。

您應該能夠從代碼中訪問全局PDFJS變量。

希望這可以幫助。