Блог

Я пытаюсь импортировать jschardet в проект Angular 11. Текущая версия 3.0.0 не работает в строгом режиме (выдает ошибку типа во время выполнения). Я попытался воспроизвести эту проблему в минимальном примере. Поэтому я создал новый угловой проект и использовал те же зависимости и конфигурацию (т. Е. Я использую один и тот же tsconfig.json , tsconfig.app.json , angular.json , package.json и package-lock.json в обоих проектах). Однако ошибка типа встречается только в моем большом/оригинальном проекте. Мне не удалось воспроизвести его в меньшем проекте. Я предполагаю, что мой большой проект каким-то образом работает jschardet в строгом режиме (хотя я явно не указывал это в упомянутых файлах), но мой новый проект не работает jschardet в строгом режиме. Я не знаю, какими файлами было бы уместно поделиться, чтобы разобраться в этом. Пожалуйста, дайте мне знать в комментариях.

В любом случае, я бы не хотел запускать свое приложение Angular в нестрогом режиме, только для одной импортированной библиотеки требуется нестрогий режим. Как я могу импортировать/вызвать определенную библиотеку в нестрогом режиме?

Файлы, версии и дополнительная информация ниже:

• jscharder 3.0.0
• Машинописный текст 4.0.5
• @угловой/компилятор 11.1.0

src/приложение/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";
 

Я не уверен, работает ли этот обходной путь в целом. Пожалуйста, добавьте еще один ответ или комментарий, если вы знаете больше.