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

问题描述

我正在尝试在 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。我不知道，哪些文件与共享相关以解决这个问题。请在评论中告诉我。

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

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

jscharder 3.0.0
TypeScript 4.0.5
@angular/编译器 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 运行这两个项目。

解决方法

我发现了一个解决方法。如果我使用动态导入，它会起作用

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

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

"use strict";

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

"use strict";

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

angular angular strict-mode typescript typescript typescript