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

Question

我的Angular 7 portfolio-app with ngUniversal is setup as per the 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"
}

界面说明及文件夹结构：

使用接口的组件：

问题

在运行ning ng 运行 my-portfolio:server:production 以下时通用构建失败错误如屏幕截图所示。

原因：未在任何模块中注册的接口和常用函数。它们只是在组件中导入。

完整错误：

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

my-portfolio@0.0.0 build C:\Acclaris\Practice\AngularPractice\my-portfolio npm run build:ssr

my-portfolio@0.0.0 build:ssr C:\Acclaris\Practice\AngularPractice\my-portfolio npm run 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 run my-portfolio:server:production

Date: 2019-05-10T10:14:15.321Z Hash: 49ca0a31b14b3f2ef33f Time: 28138ms chunk {0} runtime.274b2b523ee7c9b8154c.js (runtime) 2.19 kB [entry] [rendered] chunk {1} es2015-polyfills.c5dd28b362270c767b34.js (es2015-polyfills) 56.4 kB [initial] [rendered] chunk {2} main.c6958b8ee410ac47c079.js (main) 708 kB [initial] [rendered] chunk {3} polyfills.8bbb231b43165d65d357.js (polyfills) 41 kB [initial] [rendered] chunk {4} styles.3e7ad83f8f97d37ca687.css (styles) 61.6 kB [initial] [rendered] chunk {5} 5.da6e7079542863691897.js () 1.92 kB [rendered] chunk {6} 6.89f434210c8e48ff257a.js () 718 bytes [rendered] chunk {7} 7.04704f420e92f76cb831.js () 5.2 kB [rendered]

Date: 2019-05-10T10:14:28.776Z Hash: a1b5d85a17ec5299c6a4 Time: 8780ms chunk {main} main.js, main.js.map (main) 4.17 kB [entry] [rendered]

ERROR in src/app/shared/components/portfolio-builder/portfolio-builder.component.ts(2,27): error TS2307: Cannot find module 'src/app/shared/interfaces'. src/app/core/portfolio/portfolio.component.ts(2,27): error TS2307: Cannot find module 'src/app/shared/interfaces'. src/app/shared/components/portfolio-builder/body/body.component.ts(2,22): error TS2307: Cannot find module 'src/app/shared/interfaces'. src/app/shared/components/sections/education/education.component.ts(2,27): error TS2307: Cannot find module 'src/app/shared/interfaces'. src/app/shared/components/sections/education/education.component.ts(3,33): error TS2307: Cannot find module 'src/app/shared/functions/function-library'. src/app/shared/components/utilities/edulet/edulet.component.ts(2,27): error TS2307: Cannot find module 'src/app/shared/interfaces'. src/app/shared/components/portfolio-builder/footer/footer.component.ts(2,26): error TS2307: Cannot find module 'src/app/shared/interfaces'. src/app/shared/components/portfolio-builder/header/header.component.ts(2,24): error TS2307: Cannot find module 'src/app/shared/interfaces'. src/app/shared/components/sections/profile/profile.component.ts(2,25): error TS2307: Cannot find module 'src/app/shared/interfaces'. src/app/shared/components/portfolio-builder/sidebar/sidebar.component.ts(2,32): error TS2307: Cannot find module 'src/app/shared/interfaces'. src/app/shared/components/sections/sidebar-section/sidebar-section.component.ts(2,32): error TS2307: Cannot find module 'src/app/shared/interfaces'. src/app/shared/components/sections/work/work.component.ts(2,22): error TS2307: Cannot find module 'src/app/shared/interfaces'. src/app/shared/components/sections/work/work.component.ts(3,33): error TS2307: Cannot find module 'src/app/shared/functions/function-library'. src/app/shared/components/utilities/worklet/worklet.component.ts(2,22): error TS2307: Cannot find module 'src/app/shared/interfaces'.

npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! my-portfolio@0.0.0 build:client-and-server-bundles: ng build --prod && ng run my-portfolio:server:production npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the my-portfolio@0.0.0 build:client-and-server-bundles script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in: npm ERR!
C:\Users\debmallya.bhattachar\AppData\Roaming\npm-cache_logs19-05-10T10_14_28_865Z-debug.log npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! my-portfolio@0.0.0 build:ssr: npm run build:client-and-server-bundles && npm run compile:server npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the my-portfolio@0.0.0 build:ssr script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in: npm ERR!
C:\Users\debmallya.bhattachar\AppData\Roaming\npm-cache_logs19-05-10T10_14_28_983Z-debug.log npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! my-portfolio@0.0.0 build: npm run build:ssr npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the my-portfolio@0.0.0 build script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in: npm ERR!
C:\Users\debmallya.bhattachar\AppData\Roaming\npm-cache_logs19-05-10T10_14_29_044Z-debug.log

Answer 1

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

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

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

Cannot find module error for interfaces in Angular Universal build

angular-universal

问题