Angular/webpack 不在 @spartacus/storefront 中寻找 .d.ts 文件

Question

这是 SAP Spartacus 团队的问题。

在创建 Spartacus 组件时，我遇到了无法解析特定 Spartacus .d.ts 定义文件的错误。

该问题可在以下 Github 存储库/分支中重现： https://github.wdf.sap.corp/vis/commerce-cloud-poc/tree/module-import-issue/storefront

并非所有 Spartacus 定义都存在此问题，只是一些。

当我在我们的组件代码中使用以下导入语句时，tsc 可以毫无问题地编译代码（文件/Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/node_modules/@spartacus/storefront/cms-structure/page/model/cms-component-data.d.ts 存在）：

import { CmsComponentData } from '@spartacus/storefront/cms-structure/page/model/cms-component-data';

但是当我运行ng serve --verbose 时，我可以看到 angular/webpack 没有在探测它。探测只是检查带有.ts 扩展名的文件，而不是.d.ts 扩展名：

WARNING in [DedupeModuleResolvePlugin]: /Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/node_modules/@spartacus/core/node_modules/tslib/tslib.es6.js -> /Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/node_modules/@spartacus/storefront/node_modules/tslib/tslib.es6.js

ERROR in ./src/app/cms-epd-visual.model.ts

Module not found: Error: Can't resolve '@spartacus/storefront/cms-structure/page/model/cms-component-data' in '/Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/src/app'

resolve '@spartacus/storefront/cms-structure/page/model/cms-component-data' in '/Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/src/app'

  Parsed request is a module

  using description file: /Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/package.json (relative path: ./src/app)

    Field 'browser' doesn't contain a valid alias configuration

    resolve as module

      looking for modules in /Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront

        using description file: /Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/package.json (relative path: .)

          Field 'browser' doesn't contain a valid alias configuration

          using description file: /Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/package.json (relative path: ./@spartacus/storefront/cms-structure/page/model/cms-component-data)

            no extension

              Field 'browser' doesn't contain a valid alias configuration

              /Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/@spartacus/storefront/cms-structure/page/model/cms-component-data doesn't exist

            .ts

              Field 'browser' doesn't contain a valid alias configuration

              /Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/@spartacus/storefront/cms-structure/page/model/cms-component-data.ts doesn't exist

            .tsx

              Field 'browser' doesn't contain a valid alias configuration

              /Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/@spartacus/storefront/cms-structure/page/model/cms-component-data.tsx doesn't exist

            .mjs

              Field 'browser' doesn't contain a valid alias configuration

              /Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/@spartacus/storefront/cms-structure/page/model/cms-component-data.mjs doesn't exist

            .js

              Field 'browser' doesn't contain a valid alias configuration

              /Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/@spartacus/storefront/cms-structure/page/model/cms-component-data.js doesn't exist

            as directory

              /Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/@spartacus/storefront/cms-structure/page/model/cms-component-data doesn't exist

      /Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/src/app/node_modules doesn't exist or is not a directory

      /Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/src/node_modules doesn't exist or is not a directory

      /Users/i070295/SAPDevelop/vis/commerce-cloud-poc/node_modules doesn't exist or is not a directory

      /Users/i070295/SAPDevelop/vis/node_modules doesn't exist or is not a directory

      /Users/i070295/SAPDevelop/node_modules doesn't exist or is not a directory

      /Users/i070295/node_modules doesn't exist or is not a directory

      /Users/node_modules doesn't exist or is not a directory

      /node_modules doesn't exist or is not a directory

      looking for modules in /Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/node_modules

        using description file: /Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/package.json (relative path: ./node_modules)

          Field 'browser' doesn't contain a valid alias configuration

          using description file: /Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/node_modules/@spartacus/storefront/package.json (relative path: ./cms-structure/page/model/cms-component-data)

            no extension

              Field 'browser' doesn't contain a valid alias configuration

              /Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/node_modules/@spartacus/storefront/cms-structure/page/model/cms-component-data doesn't exist

            .ts

              Field 'browser' doesn't contain a valid alias configuration

              /Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/node_modules/@spartacus/storefront/cms-structure/page/model/cms-component-data.ts doesn't exist

            .tsx

              Field 'browser' doesn't contain a valid alias configuration

              /Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/node_modules/@spartacus/storefront/cms-structure/page/model/cms-component-data.tsx doesn't exist

            .mjs

              Field 'browser' doesn't contain a valid alias configuration

              /Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/node_modules/@spartacus/storefront/cms-structure/page/model/cms-component-data.mjs doesn't exist

            .js

              Field 'browser' doesn't contain a valid alias configuration

              /Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/node_modules/@spartacus/storefront/cms-structure/page/model/cms-component-data.js doesn't exist

            as directory

              /Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/node_modules/@spartacus/storefront/cms-structure/page/model/cms-component-data doesn't exist

[/Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/@spartacus/storefront/cms-structure/page/model/cms-component-data]

[/Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/@spartacus/storefront/cms-structure/page/model/cms-component-data.ts]

[/Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/@spartacus/storefront/cms-structure/page/model/cms-component-data.tsx]

[/Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/@spartacus/storefront/cms-structure/page/model/cms-component-data.mjs]

[/Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/@spartacus/storefront/cms-structure/page/model/cms-component-data.js]

[/Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/src/app/node_modules]

[/Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/src/node_modules]

[/Users/i070295/SAPDevelop/vis/commerce-cloud-poc/node_modules]

[/Users/i070295/SAPDevelop/vis/node_modules]

[/Users/i070295/SAPDevelop/node_modules]

[/Users/i070295/node_modules]

[/Users/node_modules]

[/node_modules]

[/Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/node_modules/@spartacus/storefront/cms-structure/page/model/cms-component-data]

[/Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/node_modules/@spartacus/storefront/cms-structure/page/model/cms-component-data.ts]

[/Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/node_modules/@spartacus/storefront/cms-structure/page/model/cms-component-data.tsx]

[/Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/node_modules/@spartacus/storefront/cms-structure/page/model/cms-component-data.mjs]

[/Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/node_modules/@spartacus/storefront/cms-structure/page/model/cms-component-data.js]

 @ ./src/app/cms-epd-visual.model.ts 1:0-101 4:47-63

 @ ./src/app/epd-visual.component.ts

 @ ./src/app/app.component.ts

 @ ./src/app/app.module.ts

 @ ./src/main.ts

 @ multi (webpack)-dev-server/client?http://0.0.0.0:0/sockjs-node&sockPath=/sockjs-node ./src/main.ts

我在网上看到了一个 hack/workaround 建议，即更改导入路径以包含 .d 后缀，以试图欺骗模块加载机制，将 .d.ts 文件视为 .ts 文件，但是这不适用于 angular 10.1，它正确地指出 3rd 方库应该包含定义文件，而不是未编译的 .ts 文件：

Module build failed (from ./node_modules/@ngtools/webpack/src/index.js):
Error: /Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/node_modules/@spartacus/storefront/cms-structure/page/model/cms-component-data.d.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
The missing file seems to be part of a third party library. TS files in published libraries are often a sign of a badly packaged library. Please open an issue in the library repository to alert its author and ask them to package the library using the Angular Package Format (https://docs.google.com/document/d/1CZC2rcpxffTDfRDs6p1cfbmKNLA6x5O-NtkJglDaBVs/preview).
    at AngularCompilerPlugin.getCompiledFile (/Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:949:23)
    at plugin.done.then (/Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/node_modules/@ngtools/webpack/src/loader.js:43:31)
    at process._tickCallback (internal/process/next_tick.js:68:7)
 @ ./src/app/cms-epd-visual.model.ts 1:0-103 4:47-63
 @ ./src/app/epd-visual.component.ts
 @ ./src/app/app.component.ts
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi (webpack)-dev-server/client?http://0.0.0.0:0/sockjs-node&sockPath=/sockjs-node ./src/main.ts

我还尝试了以下不起作用的导入语句： import { CmsComponentData } from '@spartacus/storefront/cms-structure/page/model';

此问题特定于特定的 Spartacus 定义文件。 如果我删除 CmsComponentData 的使用，而是在代码中完全相同的位置导入并使用以下类型，我看不到任何问题：

import { B2cStorefrontModule } from '@spartacus/storefront';

谁能提供任何关于我可以做些什么来避免这个问题的建议？

最好的问候， 山姆·加兰

Answer 1

此导入语句有效： import { CmsComponentData } from '@spartacus/storefront';