如何在 Angular 4 模块中延迟加载库？

Question

我有一个包含多个模块的应用程序。
其中一个模块是可视化pdf。我使用 pdf.js 这非常贪婪，因此 vendor.js 有点大。

有没有办法在延迟加载 pdf 模块的同时延迟加载库？

我注意到了这个答案，但感觉不太对。

我不是要延迟加载模块，而是要延迟加载外部库。

Answer 1

如果您想延迟加载外部库，例如 jquery、jspdf，您可以创建一些服务，例如：

延迟加载-library.service.ts

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`);
    });
  }

Plunker Example

如果您正在寻找延迟加载 angular 模块，那么这些问题可能对您有所帮助：

Answer 2

希望您正在使用 Angular CLI。

安装pdfjs-dist包：

npm install pdfjs-dist
为其安装类型：

npm install @types/pdfjs-dist --save-dev
将以下导入语句添加到您的延迟加载模块文件:

import 'pdfjs-dist';

当您运行 ng build.

时，最后一步会将 pdf.js 源代码嵌入延迟加载包中

您应该能够从您的代码中访问全局 PDFJS 变量。

希望这对您有所帮助。

如何在 Angular 4 模块中延迟加载库？

How to lazyload library in Angular 4 module?

javascript

lazy-loading

shared-libraries

angular