如何在严格的 Angular 应用程序中以非严格模式导入库？答案

【问题标题】：How to import a library in non-strict mode in strict Angular app?如何在严格的 Angular 应用程序中以非严格模式导入库？
【发布时间】：2021-10-04 15:47:22
【问题描述】：

我正在尝试在 Angular 11 项目中导入 jschardet。当前版本 3.0.0 does not run in strict mode（在运行时抛出 TypeError）。我试图在一个最小的例子中重现这个问题。因此，我生成了一个新的 Angular 项目并使用相同的依赖项和配置（即，我在两个项目中使用相同的 tsconfig.json、tsconfig.app.json、angular.json、package.json 和 package-lock.json）。但是，TypeError 仅发生在我的大型/原始项目中。我未能在一个较小的项目中重现它。我猜我的大型项目以某种方式在严格模式下运行jschardet（即使我没有在提到的文件中明确指定它），但我的新项目并没有在严格模式下运行jschardet。我不知道，哪些文件与共享相关以解决这个问题。请在 cmets 中告诉我。

无论如何，我不想在非严格模式下运行我的 Angular 应用程序，只有一个导入的库需要非严格模式。如何在非严格模式下导入/调用特定库？

以下文件、版本和更多信息：

jscharder 3.0.0
TypeScript 4.0.5
@angular/compiler 11.1.0

src/app/app.component.ts

import { Component } from '@angular/core';
import * as jschardet from 'jschardet';

@Component({
  selector: 'app-root',
  template: `
      <input type="file" id="file" (change)="decode($event)">
  `
})
export class AppComponent {
  decode(e: any) {
    const file = e.target.files[0];
    console.log(typeof file);
    const fileReader = new FileReader();
    fileReader.onload = function() {
      const array = new Uint8Array(fileReader.result as ArrayBuffer);
      let string = "";
      for (let i = 0; i < array.length; ++i) {
        string += String.fromCharCode(array[i]);
      }
      console.log(jschardet.detect(string));
    };
    fileReader.readAsArrayBuffer(file);
  }
}

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "importHelpers": true,
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "downlevelIteration": true,
    "target": "es2015",
    "typeRoots": [
    ],
    "lib": [
      "es2017",
      "dom",
      "dom.iterable"
    ],
    "types": [
      "node",
      "core-js"
    ],
    "module": "es2020",
    "baseUrl": "./"
  }
}

src/tsconfig.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "./",
    "types": [ "node" ],
    "typeRoots": [ "../node_modules/@types" ]
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  },
  "files": [
    "main.ts",
    "polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}

angular.json（缩短）

{
  "projects": {
    "my-app": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "aot": true,
            "outputPath": "dist",
            "index": "src/index.html",
            "main": "src/main.ts",
            "tsConfig": "src/tsconfig.app.json",
            "polyfills": "src/polyfills.ts"
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "my-app:build"
          }
        }
      }
    }
  }
}

我使用ng serve 运行这两个项目。

【问题讨论】：

标签： angular typescript strict-mode

【解决方案1】：

我发现了一个解决方法。如果我使用动态导入，它就可以工作

const jschardet = await import('jschardet');
console.log(jschardet.detect(string));

我仍然不知道为什么。如果我使用常规导入，则该库是构建包vendor.js 的一部分，它定义了

"use strict";

如果我使用动态导入，库是一个单独的模块文件，没有定义

"use strict";

我不确定这种解决方法是否普遍有效。如果您知道更多，请添加另一个答案或评论。

【讨论】：