Angular7 - Production build fails while going through Bitbucket package: ng build --prod

[joseph118]

🐞 Bug report

Command (mark with an x)

- [x ] build

Description

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.

🔬 Minimal Reproduction

Replication Steps:

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

Generating project

1. 'ng new ng-module-x'
2. 'ng generate library lib-module'
3. Setup package.json for preparing the package.
4. Push to git.
5. 'ng new app-x'
6. 'npm install git+ssh://git@....../............./'
7. Include the module inside the application.
8. 'ng build --prod'

🔥 Exception or Error

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

🌍 Your Environment

Angular CLI: 7.3.1
Node: 10.15.1
OS: win32 x64
Angular: 7.2.4
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.13.1
@angular-devkit/build-angular     0.13.1
@angular-devkit/build-optimizer   0.13.1
@angular-devkit/build-webpack     0.13.1
@angular-devkit/core              7.3.1
@angular-devkit/schematics        7.3.1
@angular/cli                      7.3.1
@ngtools/webpack                  7.3.1
@schematics/angular               7.3.1
@schematics/update                0.13.1
rxjs                              6.3.3
typescript                        3.2.4
webpack                           4.29.0

[alan-agius4]

Hi @joseph118, a couple of problems here,

1. when a library is build, it is build in the dist folder, and the application will be to be made aware of this, as the standard node_module resolution will not work in this case.

2. You are using deep imports https://bitbucket.org/joseph118/app-x/src/d50991529ff48ef0774953266759d34e5185e293/src/app/app.module.ts?at=master&fileviewer=file-view-default#app.module.ts-6 which is an anti-pattern.

3. You are referring the library with the incorrect module name
   https://bitbucket.org/joseph118/ng-module-x/src/64269de7eaf652c3c3e6eb625d417d7395280d1e/projects/lib-module/package.json?at=master&fileviewer=file-view-default#package.json-2. You library is called lib-module and not ng-module-x

A way to get around this is to use tsconfig path.

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

and change your imports to;

import { LibModuleModule } from 'lib-module';

That said, I would suggest that you actually publish the library to a private npm repo as this will improve the install time as during npm install it will not need to be build the library everytime.

[joseph118]

Hi @alan-agius4 ,

Thank you for your guideline, it helped me realise what the problem actually was. Going with that approach would force me to configure every application that may use the module, and I wasn't assuming that angular would try to guess the module name given that everything is in the package.json.

I tested out some changes and updated the name property from package.json of the module to be exactly the same as the library name.

The changes have been applied on the given branches and the prod build has been successful.

I appreciate the tip but at the moment I was trying out Bitbucket npm feature. (Y)

Thank you!

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}