为什么有些 Angular 模块会导入而其他模块不会？

Question

我似乎无法导入一个模块。

Typescript 2.7 节点 10

pxl-ng-security 在 VSCode 和 VS2019 中显示错误。如果我将鼠标悬停在它上面，它会显示错误 2307

这是文件的导入部分。

我的文件.ts

import { Injectable } from '@angular/core';
import { Headers, Http, Response } from '@angular/http';
import { TokenService } from 'pxl-ng-security';

gulp 文件指向 tsconfig-library.json，所以我相信这意味着它使用该文件而不是标准的 tsconfig.json。

tsconfig-library.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["es2015", "dom"],
    "module": "es2015",
    "moduleResolution": "node",
    "declaration": true,
    "experimentalDecorators": true,
    "baseUrl": ".",
    "stripInternal": true,
    "outDir": "./dist",
    "rootDir": "./src-embedded",
    "sourceMap": true,
    "inlineSources": true,
    "skipLibCheck": true
  },
  "files": [
    "./src-embedded/index.ts"
  ],
  "angularCompilerOptions": {
    "skipTemplateCodeGen": true
  }
}

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./out-tsc",
    "baseUrl": "src",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2016",
      "dom"
    ]
  }
}

我尝试过使用 ../../node_modules/pxl-ng-security，但它也有同样的问题。 Intellisense 看到并填写。我已经确认该文件夹确实在那个位置。我已经从 node_modules 中删除了它并执行了 npm-install -project-local 并且模块又回来了，所以看起来模块是健康且正确的。

运行 tsc -p 。给出以下错误

错误 TS2307：找不到模块 'pxl-ng-security' 或其 对应的类型声明。

如果我继续尝试运行 gulp，错误是“

错误：静态解析符号值时遇到错误。无法解析 pxl-ng-security

新细节。 我跳上 CI/CD 服务器，发现它运行良好。相同的代码正在处理它。我在上面安装了vscode，只是为了看看它是否显示相同的ts2307错误。很好。我检查了 Node 和 Typescript 的版本，它们都匹配。谜团还在继续

Answer 1

您缺少include: array，只需根据安装位置添加/更新include array。

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./out-tsc",
    "baseUrl": "src",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2016",
      "dom"
    ]
  },
  // you are missing the includes array
  "include": [
     "src/**/*.ts", 
     "tests/**/*.ts",
     // ADD your module here below**** with correct path
     "node_modules/pxl-ng-security"
   ],
  //"exclude": ["node_modules", ".vscode"]
}

---

更新以解决您修改后的问题：

您必须设置编译器或开发环境如何帮助解析这些节点模块。这是一个棘手的问题，或more than one way to do it/moduleResolution/ModuleLoader，因为如果未设置编译器选项（最后一个选项），可以在工具中控制/配置它，请尝试以下这些..

改成VS Code

• 检查您使用的是哪个模块加载器，如果您使用的是 commonjs、systemjs 和 baseurl，那么它会起作用。您可能需要检查一下，因为 VSCode 使用自己的自定义模块加载器（基于旧版本的 requirejs）。

改成Visual Studio

• 如果要更改 VS Studio 模块系统，请找到 VS2019 项目属性，然后在 TypeScript Build 选项卡的下拉设置中将“Module System”从“ES2015”更改为 CommonJS，

最后要了解您的编译器模块解析是如何工作的，请查看here if you don't choose to use node

{
    "compilerOptions": {
        "moduleResolution": "node"
    }
}