Angular 7安装pdfmake后出现警告问题求助

Hey there, I totally get dealing with those annoying warnings that don’t break functionality but bug you to no end. Let’s break down what’s causing those messages and how to fix them for good:

What’s Causing the Warnings? #

Those warnings all stem from dependency mismatches between your Angular 7 setup and the outdated Angular/RxJS code bundled inside ng-pdf-make:

• The $$observable error: The version of @angular/core that ng-pdf-make relies on uses an old RxJS symbol ($$observable) that’s been removed in the RxJS version paired with Angular 7.
• The "Critical dependency" warnings: The old system_js_ng_module_factory_loader.js file in the nested @angular/core uses dynamic dependency requests, which Webpack flags as a potential risk.

Recommended Fix: Ditch ng-pdf-make, Use Raw pdfmake Directly #

The ng-pdf-make package appears unmaintained (it’s pulling in an outdated Angular core version), so the cleanest long-term fix is to use the original pdfmake library and wrap it in your own Angular service. Here’s how:

1. Uninstall the problematic package

   npm uninstall ng-pdf-make
   

2. Install the core pdfmake library

   npm install pdfmake --save
   

3. Create a custom Angular service to wrap pdfmake
   Make a new service (e.g., pdf-make.service.ts):

   import { Injectable } from '@angular/core';
   import * as pdfMake from 'pdfmake/build/pdfmake';
   import * as pdfFonts from 'pdfmake/build/vfs_fonts';
   
   // Load required default fonts
   pdfMake.vfs = pdfFonts.pdfMake.vfs;
   
   @Injectable({ providedIn: 'root' })
   export class PdfMakeService {
     constructor() {}
   
     generatePdf(docDefinition: any): void {
       pdfMake.createPdf(docDefinition).open();
       // Swap with .download() to save the PDF, or .print() to send directly to printer
     }
   }
   

4. Use the service in your component
   Inject it into any component where you need to generate PDFs:

   import { Component } from '@angular/core';
   import { PdfMakeService } from './pdf-make.service';
   
   @Component({
     selector: 'app-pdf-generator',
     template: `<button (click)="createPdf()">Generate PDF</button>`
   })
   export class PdfGeneratorComponent {
     constructor(private pdfService: PdfMakeService) {}
   
     createPdf(): void {
       const docDef = {
         content: [
           'Hello from Angular 7 + pdfmake!',
           { text: 'No more warnings!', bold: true }
         ]
       };
       this.pdfService.generatePdf(docDef);
     }
   }
   

Temporary Fix (If You Must Keep ng-pdf-make) #

If you really need to stick with ng-pdf-make, you can suppress the warnings in your Angular/Webpack config (note: this hides the issue rather than fixing it):

1. Allow CommonJS dependencies
   In your angular.json, add pdfmake and ng-pdf-make to allowedCommonJsDependencies under the build options:

   "build": {
     "options": {
       "allowedCommonJsDependencies": [
         "pdfmake",
         "ng-pdf-make"
       ]
     }
   }
   

2. Suppress specific RxJS warnings
   If you’re using a custom webpack.config.js (set up via @angular-builders/custom-webpack), add this plugin to ignore the $$observable warning:

   const webpack = require('webpack');
   
   module.exports = {
     plugins: [
       new webpack.IgnorePlugin({
         resourceRegExp: /symbol\/observable$/
       })
     ]
   };
   

内容的提问来源于stack exchange，提问作者PhaNith Noch