在 Angular Universal 构建中找不到接口的模块错误

Question

我的Angular 7 portfolio-app with ngUniversal 是按照official cli documentation 设置的。我为传入数据和一些常用功能设置了接口。

"scripts": {
    "ng": "ng",
    "start": "npm run serve:ssr",
    "build": "npm run build:ssr",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "compile:server": "webpack --config webpack.server.config.js --progress --colors",
    "serve:ssr": "node dist/server",
    "build:ssr": "npm run build:client-and-server-bundles && npm run compile:server",
    "build:client-and-server-bundles": "ng build --prod && ng run my-portfolio:server:production"
}

界面说明及文件夹结构：

使用接口的组件：

---

问题

在运行 ng run my-portfolio:server:production 时通用构建失败，并出现如屏幕截图所示的错误。

原因： 没有在任何模块中注册的接口和常用功能。它们只是在组件中导入。

完全错误：

PS C:\Acclaris\Practice\AngularPractice\my-portfolio> npm run build

我的投资组合@0.0.0 构建 C:\Acclaris\Practice\AngularPractice\my-portfolio npm run build:ssr

我的投资组合@0.0.0 build:ssr C:\Acclaris\Practice\AngularPractice\my-portfolio npm 运行 build:client-and-server-bundles && npm run compile:server

my-portfolio@0.0.0 build:client-and-server-bundles C:\Acclaris\Practice\AngularPractice\my-portfolio ng build --prod && ng 运行我的投资组合：服务器：生产

日期：2019-05-10T10:14:15.321Z 哈希：49ca0a31b14b3f2ef33f 时间： 28138ms 块 {0} runtime.274b2b523ee7c9b8154c.js（运行时）2.19 kB [入口] [渲染] 块 {1} es2015-polyfills.c5dd28b362270c767b34.js (es2015-polyfills) 56.4 kB [初始] [渲染] 块 {2} main.c6958b8ee410ac47c079.js (main) 708 kB [初始] [渲染] 块 {3} polyfills.8bbb231b43165d65d357.js（polyfills）41 kB [初始] [渲染] 块 {4}styles.3e7ad83f8f97d37ca687.css (styles) 61.6 kB [初始] [渲染] 块 {5} 5.da6e7079542863691897.js () 1.92 kB [渲染] 块 {6} 6.89f434210c8e48ff257a.js () 718 字节 [渲染] 块 {7} 7.04704f420e92f76cb831.js () 5.2 kB [渲染]

日期：2019-05-10T10:14:28.776Z 哈希：a1b5d85a17ec5299c6a4 时间：8780ms chunk {main} main.js, main.js.map (main) 4.17 kB [entry] [rendered]

错误 src/app/shared/components/portfolio-builder/portfolio-builder.component.ts(2,27)： 错误 TS2307：找不到模块“src/app/shared/interfaces”。 src/app/core/portfolio/portfolio.component.ts(2,27)：错误 TS2307： 找不到模块“src/app/shared/interfaces”。 src/app/shared/components/portfolio-builder/body/body.component.ts(2,22)： 错误 TS2307：找不到模块“src/app/shared/interfaces”。 src/app/shared/components/sections/education/education.component.ts(2,27)： 错误 TS2307：找不到模块“src/app/shared/interfaces”。 src/app/shared/components/sections/education/education.component.ts(3,33)： 错误 TS2307：找不到模块 'src/app/shared/functions/function-library'。 src/app/shared/components/utilities/edulet/edulet.component.ts(2,27)： 错误 TS2307：找不到模块“src/app/shared/interfaces”。 src/app/shared/components/portfolio-builder/footer/footer.component.ts(2,26)： 错误 TS2307：找不到模块“src/app/shared/interfaces”。 src/app/shared/components/portfolio-builder/header/header.component.ts(2,24)： 错误 TS2307：找不到模块“src/app/shared/interfaces”。 src/app/shared/components/sections/profile/profile.component.ts(2,25)： 错误 TS2307：找不到模块“src/app/shared/interfaces”。 src/app/shared/components/portfolio-builder/sidebar/sidebar.component.ts(2,32)： 错误 TS2307：找不到模块“src/app/shared/interfaces”。 src/app/shared/components/sections/sidebar-section/sidebar-section.component.ts(2,32)： 错误 TS2307：找不到模块“src/app/shared/interfaces”。 src/app/shared/components/sections/work/work.component.ts(2,22): 错误 TS2307：找不到模块“src/app/shared/interfaces”。 src/app/shared/components/sections/work/work.component.ts(3,33)：错误 TS2307：找不到模块 'src/app/shared/functions/function-library'。 src/app/shared/components/utilities/worklet/worklet.component.ts(2,22)： 错误 TS2307：找不到模块 'src/app/shared/interfaces'。

npm 错误！代码 ELIFECYCLE npm 错误！ errno 1 npm 错误！我的投资组合@0.0.0 构建：客户端和服务器包：ng build --prod && ng run my-portfolio:server:production npm ERR！退出状态 1 npm ERR！ npm 呃！在 my-portfolio@0.0.0 build:client-and-server-bundles 失败 脚本。 npm 错误！这可能不是 npm 的问题。有 上面可能有额外的日志输出。

npm 错误！可以在以下位置找到此运行的完整日志：npm ERR！
C:\Users\debmallya.bhattachar\AppData\Roaming\npm-cache_logs\2019-05-10T10_14_28_865Z-debug.log npm 错误！代码 ELIFECYCLE npm 错误！ errno 1 npm 错误！我的投资组合@0.0.0 构建：ssr：npm run build:client-and-server-bundles && npm run compile:server npm 错误！退出状态 1 npm ERR！ npm 错误！失败了 my-portfolio@0.0.0 build:ssr 脚本。 npm 错误！这可能不是一个 npm 的问题。上面可能还有额外的日志输出。

npm 错误！可以在以下位置找到此运行的完整日志：npm ERR！
C:\Users\debmallya.bhattachar\AppData\Roaming\npm-cache_logs\2019-05-10T10_14_28_983Z-debug.log npm 错误！代码 ELIFECYCLE npm 错误！ errno 1 npm 错误！我的投资组合@0.0.0 构建：npm run build:ssr npm 错误！退出状态 1 npm ERR！ npm 错误！ 在 my-portfolio@0.0.0 构建脚本中失败。 npm 错误！这是 npm 可能不是问题。可能有额外的日志记录 上面的输出。

npm 错误！可以在以下位置找到此运行的完整日志：npm ERR！
C:\Users\debmallya.bhattachar\AppData\Roaming\npm-cache_logs\2019-05-10T10_14_29_044Z-debug.log

Answer 1

将Portfolio接口的导入路径从以'src/app/*'开头的路径改为直接路径。 例如，您的 PortfolioBuilderComponent 导入应如下所示：

import { Portfolio } from '../../interfaces/portfolio'