Angular7 - Production build fails while going through Bitbucket package

Question

I would like to build a system where angular components can be re-used across multiple applications using bitBucket.

At the moment I have the following:

• BitBucket Repo A - to store the node module. At the moment the module is created as a library and the main application is being used as a demo. The library is built and exported when requesting the module from this repo. (https://bitbucket.org/joseph118/ng-module-x/src/master/)
• BitBucket Repo B - Application which makes use of "BitBucket Repo A" (installs the library) and more (Web app). (https://bitbucket.org/joseph118/app-x/src/master/)

---

On Repo A, the application is able to build, production build, build the library and also serve.

On Repo B, the application is able to build and serve, however it fails on production build. This will end up throwing 'module not found' but checking the node_modules folder, I can verify that everything seems to be in order.

In this case, I executed the following command: 'ng build --prod --verbose' to get more information from the process. However I ended up with the following:

ERROR in ./node_modules/ng-module-x/dist/lib-module/lib-module.ngfactory.js
Module not found: Error: Can't resolve 'lib-module' in 'C:\Users\joseph.borg\Documents\P Repo\app-x\node_modules\ng-module-x\dist\lib-module'
resolve 'lib-module' in 'C:\Users\joseph.borg\Documents\P Repo\app-x\node_modules\ng-module-x\dist\lib-module'
Parsed request is a module
using description file: C:\Users\joseph.borg\Documents\P Repo\app-x\node_modules\ng-module-x\dist\lib-module\package.json (relative path: .)
Field 'browser' doesn't contain a valid alias configuration
resolve as module
looking for modules in C:/Users/joseph.borg/Documents/P Repo/app-x/
using description file: C:\Users\joseph.borg\Documents\P Repo\app-x\package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: C:\Users\joseph.borg\Documents\P Repo\app-x\package.json (relative path: ./lib-module)
    no extension
        Field 'browser' doesn't contain a valid alias configuration
        C:\Users\joseph.borg\Documents\P Repo\app-x\lib-module doesn't exist
    .ts
        Field 'browser' doesn't contain a valid alias configuration
        C:\Users\joseph.borg\Documents\P Repo\app-x\lib-module.ts doesn't exist
    .tsx
        Field 'browser' doesn't contain a valid alias configuration
        C:\Users\joseph.borg\Documents\P Repo\app-x\lib-module.tsx doesn't exist
    .mjs
        Field 'browser' doesn't contain a valid alias configuration
        C:\Users\joseph.borg\Documents\P Repo\app-x\lib-module.mjs doesn't exist
    .js
        Field 'browser' doesn't contain a valid alias configuration
        C:\Users\joseph.borg\Documents\P Repo\app-x\lib-module.js doesn't exist
    as directory
        C:\Users\joseph.borg\Documents\P Repo\app-x\lib-module doesn't exist
C:\Users\joseph.borg\Documents\P Repo\app-x\node_modules\ng-module-x\dist\lib-module\node_modules doesn't exist or is not a directory
C:\Users\joseph.borg\Documents\P Repo\app-x\node_modules\ng-module-x\dist\node_modules doesn't exist or is not a directory
C:\Users\joseph.borg\Documents\P Repo\app-x\node_modules\ng-module-x\node_modules doesn't exist or is not a directory
C:\Users\joseph.borg\Documents\P Repo\app-x\node_modules\node_modules doesn't exist or is not a directory
C:\Users\joseph.borg\Documents\P Repo\node_modules doesn't exist or is not a directory
C:\Users\joseph.borg\Documents\node_modules doesn't exist or is not a directory
C:\Users\joseph.borg\node_modules doesn't exist or is not a directory
C:\Users\node_modules doesn't exist or is not a directory
C:\node_modules doesn't exist or is not a directory
looking for modules in C:\Users\joseph.borg\Documents\P Repo\app-x\node_modules
using description file: C:\Users\joseph.borg\Documents\P Repo\app-x\package.json (relative path: ./node_modules)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: C:\Users\joseph.borg\Documents\P Repo\app-x\package.json (relative path: ./node_modules/lib-module)
    no extension
        Field 'browser' doesn't contain a valid alias configuration
        C:\Users\joseph.borg\Documents\P Repo\app-x\node_modules\lib-module doesn't exist
    .ts
        Field 'browser' doesn't contain a valid alias configuration
        C:\Users\joseph.borg\Documents\P Repo\app-x\node_modules\lib-module.ts doesn't exist
    .tsx
        Field 'browser' doesn't contain a valid alias configuration
        C:\Users\joseph.borg\Documents\P Repo\app-x\node_modules\lib-module.tsx doesn't exist
    .mjs
        Field 'browser' doesn't contain a valid alias configuration
        C:\Users\joseph.borg\Documents\P Repo\app-x\node_modules\lib-module.mjs doesn't exist
    .js
        Field 'browser' doesn't contain a valid alias configuration
        C:\Users\joseph.borg\Documents\P Repo\app-x\node_modules\lib-module.js doesn't exist
    as directory
        C:\Users\joseph.borg\Documents\P Repo\app-x\node_modules\lib-module doesn't exist

I've tried multiple adjustments to the project however no avail with the build yet.

Replication Steps: Clone Repo B (https://bitbucket.org/joseph118/app-x/src/master/) and run 'ng build --prod'.

If there is anything I can provide or explain from my end, let me know.

Answer 1

Updated the application tsconfig.json and added the following configuration:

"paths": {
  "data-table": [
    "./node_modules/ng-module-x/dist/lib-module"
  ],
  "data-table/*": [
    "./node_modules/ng-module-x/dist/lib-module/*"
  ]
}

And then updating the imports to point towards 'data-table' which resolves the problem.

import { LibModuleModule } from 'lib-module';

Source: https://github.com/angular/angular-cli/issues/13665