无法在 Angular 9 中进行默认导入

Posted 2023-02-22

【中文标题】无法在 Angular 9 中进行默认导入

【英文标题】：Can't do a default import in Angular 9

【发布时间】：2020-07-11 03:17:22

【问题描述】：

我通过添加此属性更改了 tsconfig.json

"esModuleInterop": true, "allowSyntheticDefaultImports": true,

为了能够导入一个 npm 包import * as ms from "ms";

但我仍然收到此错误

This module is declared with using 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.

我错过了什么？

更新：

如果我使用import ms from "ms" 进行更改，那么它可以在编译器上正常工作，但不能在 VSCode linter 上工作，并且错误是

 can only be default-imported using the 'allowSyntheticDefaultImports' flagts(1259)
index.d.ts(25, 1): This module is declared with using 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.

正如我所说，现在可以正常工作，但 VSCode 有问题。

【问题讨论】：

您是否尝试过使用默认导出？也许this can help.

ms 是一个 npm 包

尝试像这样导入：import ms from "ms";

谢谢 Lucas，它与 Angular 编译器一起工作，但 VSCode 仍然不喜欢它

如果取出tsconfig.json属性"allowSyntheticDefaultImports": true,，可以用*语法导入吗？

【参考方案1】：

你可以这样做

import * as printJS from 'print-js'

【参考方案2】：

"allowSyntheticDefaultImports": true

此标志解决了问题，但应将其添加到 tsconfig.json 的 compilerOptions 部分

【讨论】：

这个解决方案在 NestJS 上对我有用！

【参考方案3】：

如果您在尝试将 localforage 导入 Angular 9 时遇到此错误，我使用了这个（Angular 9.1.12，Typescript 3.9.6）：

npm install localforage

// tsconfig.json

  "compileOnSave": false,
  "compilerOptions": 
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "lib": [
      "es2018",
      "dom"
    ]
  ,
  "angularCompilerOptions": 
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true,
    "esModuleInterop": true, <----------------------------add this
    "allowSyntheticDefaultImports": true <----------------------------and this
  ,

//任何组件或服务

import * as localforage from 'localforage';

constructor() 
    localforage.setItem('localforage', 'localforage value');
    setTimeout(() => 
      localforage.getItem('localforage').then((e) => 
       console.log(e);
      );
    , 5000);
    setTimeout( async () => 
      const RES = await localforage.getItem('localforage');
      console.log('RES', RES);
    , 10000);
  

【讨论】：

在 //tsconfig.ts 中的 compilerOptions 下移动后工作，如下所示 "compilerOptions": "allowSyntheticDefaultImports":true, "esModuleInterop": true

小心添加"esModuleInterop": true，它会破坏import * as moment from 'moment';之类的东西

【参考方案4】：

问题是包如何声明导出，你仍然可以使用默认导入：

import ms from "ms";

【讨论】：

除了使用@ts-ignore 之外，我怎样才能克服 VSCode 的 linting 错误？

您可以尝试使用节点导入：let ms = require("./ms");更多信息check this out

【参考方案5】：

有错误信息

此模块是使用 'export =' 声明的，并且只能在使用 'allowSyntheticDefaultImports' 标志时与默认导入一起使用。

关于 Angular 组件的打字稿导入规则：

import  something  from 'amodule';

在 node_modules/@types/amodule/index.d.ts 中，我找到了这段代码：

declare module 'amodule' 
   export = something;

并将其更改为：

declare module 'amodule' 
    export default something;

angular组件中的导入规则改为：

 import something from 'amodule';

并且错误信息消失了，导入的模块可以按预期使用了。

【讨论】：

不推荐入侵别人的模块。也许这只是一种可以看到某些工作的解决方法，但不能保证长期工作。会发生什么，例如，node_modules 被 git 忽略而你稍后执行npm install？