Cannot find module error for interfaces in Angular Universal build - angular-universal

Question

My Angular 7 portfolio-app with ngUniversal is setup as per the official cli documentation. I have interfaces set up for incoming data and some common functions.
"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"
}
Interface description and folder structure:
Component using the interface:
Problem
The universal build fails while running ng run my-portfolio:server:production following with error as shown in the screenshot.
Cause: Interfaces and common functions which are not registered in any modules. They're simply imported in the components.
Full error:
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_logs\2019-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_logs\2019-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_logs\2019-05-10T10_14_29_044Z-debug.log

Answer 1

Change import path of Portfolio interface from the one starting with 'src/app/*' to the direct path.
For example, for your PortfolioBuilderComponent import should look like this:
import { Portfolio } from '../../interfaces/portfolio'