ng build 找不到模块答案

【问题标题】：ng build cannot find moduleng build 找不到模块
【发布时间】：2021-02-07 20:26:36
【问题描述】：

我正在尝试通过更新它们从 package.json 文件中提取的位置来本地测试 3 个节点模块。这些模块是sdk、ng-widget-lib 和frontend。 ng-widget-lib 取决于 sdk 和 frontend 取决于 ng-widget-lib。我使用babel 在本地构建sdk。我将 verdaccio 作为本地 npm 注册表运行。

我更新ng-widget/package.json（repo/根目录的名称是ng-widget而不是ng-widget-lib）将名称更改为@locals/ng-widget-lib并将sdk依赖项指向本地sdk目录。然后运行 npm install 并使用ng build 构建成功运行。然后我将dist/package.json 中的名称更改为@locals/ng-widget-lib 并发布到我的本地注册表。

在frontend/package.json 中，我将ng-widget-lib 依赖项指向@locals/ng-widget-lib（我尝试将其指向本地目录而不使用本地注册表，但这仍然不起作用）。我运行npm install，它将模块从我的本地注册表下载到node_modules/@locals/ng-widget-lib，并创建一个package-lock.json，ng-widget-lib 指向本地注册表。然后，当我运行 ng build --prod 或 ng build 时，它在我导入 @locals/ng-widget-lib 的文件中失败

错误 TS2307：找不到模块“@locals/ng-widget-lib”。

我已删除 node_modules 并运行 npm cache clean --force 但仍然出现同样的错误。 ng-widget-lib 和 frontend 使用 angular 8，sdk 是打字稿。我正在使用 npm 6.11.3

这是我的 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": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

【问题讨论】：

标签： node.js angular typescript npm

【解决方案1】：

尝试使用编译器选项 preserveSymlinks。

所有本地模块都必须在编译器选项中用作preserveSymlinks

"compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "preserveSymlinks": true

【讨论】：

没用，它实际上是从localhost:4873 将模块下载到我的node_modules 目录中，所以我认为它没有使用符号链接
你没有提到这一点。一旦需要在应用程序启动时启动，所有缓存都已完成。你不能修改需要异步。要求是块和同步。在 node js 中动态 require 是不可能的，只有 web u 可以进行动态导入。使用 webpack、system.js 等工具

【解决方案2】：

我关注了这个https://stackoverflow.com/a/48150290/3614578 并且能够成功导入本地模块。我把ngPackage 配置直接放在package.json 中，我也不必运行npm pack。这是我在package.json中的配置

"ngPackage": {
    "lib": {
        "entryFile": "./projects/ng-widget-lib/src/public_api.ts"
    },
    "whitelistedNonPeerDependencies": [
      "angular",
      "rxjs",
      "tslib",
      "zone.js"
    ]
  }

从本地注册表安装后，我也能够构建它。我关注了这个https://github.com/angular/angular-cli/wiki/stories-create-library。基本上有一个特殊的命令用于构建需要运行的角度库ng generate library my-lib，然后你必须从你的dist/<lib-name> 文件夹发布，而不是你的根文件夹。

【讨论】：

【解决方案3】：

在我的例子中，添加一个文件 index.ts 作为兄弟（旁边）package.json 就像一个魅力。

仅使用 index.ts 从 public_api.ts 导出所有内容
将entryFile 位置从public_api.ts 替换为index.ts

index.ts里面的内容如下：

export * from './src/public_api.ts';

所以想ng-packgr的内容如下：

"ngPackage": {
    "lib": {
        "entryFile": "index.ts"
    },
  }

【讨论】：