Multiple Angular libs do not work in production mode

Question

I've created an Angular project which consists of two Angular libs. You can find the source code here. After that, I've built eaсh library and share the resulting dist folder via npm. Here is the package: https://www.npmjs.com/package/@agilie/angular-helpies.

After that, I'm trying to use the interceptor from this library and import it like this

import {DuplicateRequestFilter} from '@agilie/angular-helpies/interceptors';

Everything works correctly in dev mode however when I try to build project in production mode I get an error

ERROR in ./src/app/app.module.ngfactory.js
Module not found: Error: Can't resolve 'interceptors' in '/Users/sergey/libs/test-helpies/src/app'
resolve 'interceptors' in '/Users/sergey/libs/test-helpies/src/app'
  Parsed request is a module
  using description file: /Users/sergey/libs/test-helpies/package.json (relative path: ./src/app)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      looking for modules in /Users/sergey/libs/test-helpies/
        using description file: /Users/sergey/libs/test-helpies/package.json (relative path: .)
          Field 'browser' doesn't contain a valid alias configuration
          using description file: /Users/sergey/libs/test-helpies/package.json (relative path: ./interceptors)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /Users/sergey/libs/test-helpies/interceptors doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              /Users/sergey/libs/test-helpies/interceptors.ts doesn't exist
            .tsx
              Field 'browser' doesn't contain a valid alias configuration
              /Users/sergey/libs/test-helpies/interceptors.tsx doesn't exist
            .mjs
              Field 'browser' doesn't contain a valid alias configuration
              /Users/sergey/libs/test-helpies/interceptors.mjs doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /Users/sergey/libs/test-helpies/interceptors.js doesn't exist
            as directory
              /Users/sergey/libs/test-helpies/interceptors doesn't exist
      /Users/sergey/libs/test-helpies/src/app/node_modules doesn't exist or is not a directory
      /Users/sergey/libs/test-helpies/src/node_modules doesn't exist or is not a directory
      /Users/sergey/libs/node_modules doesn't exist or is not a directory
      /Users/sergey/node_modules doesn't exist or is not a directory
      /Users/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory
      looking for modules in /Users/sergey/libs/test-helpies/node_modules
        using description file: /Users/sergey/libs/test-helpies/package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
          using description file: /Users/sergey/libs/test-helpies/package.json (relative path: ./node_modules/interceptors)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /Users/sergey/libs/test-helpies/node_modules/interceptors doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              /Users/sergey/libs/test-helpies/node_modules/interceptors.ts doesn't exist
            .tsx
              Field 'browser' doesn't contain a valid alias configuration
              /Users/sergey/libs/test-helpies/node_modules/interceptors.tsx doesn't exist
            .mjs
              Field 'browser' doesn't contain a valid alias configuration
              /Users/sergey/libs/test-helpies/node_modules/interceptors.mjs doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /Users/sergey/libs/test-helpies/node_modules/interceptors.js doesn't exist
            as directory
              /Users/sergey/libs/test-helpies/node_modules/interceptors doesn't exist
[/Users/sergey/libs/test-helpies/interceptors]
[/Users/sergey/libs/test-helpies/interceptors.ts]
[/Users/sergey/libs/test-helpies/interceptors.tsx]
[/Users/sergey/libs/test-helpies/interceptors.mjs]
[/Users/sergey/libs/test-helpies/interceptors.js]
[/Users/sergey/libs/test-helpies/src/app/node_modules]
[/Users/sergey/libs/test-helpies/src/node_modules]
[/Users/sergey/libs/node_modules]
[/Users/sergey/node_modules]
[/Users/node_modules]
[/node_modules]
[/Users/sergey/libs/test-helpies/node_modules/interceptors]
[/Users/sergey/libs/test-helpies/node_modules/interceptors.ts]
[/Users/sergey/libs/test-helpies/node_modules/interceptors.tsx]
[/Users/sergey/libs/test-helpies/node_modules/interceptors.mjs]
[/Users/sergey/libs/test-helpies/node_modules/interceptors.js]
 @ ./src/app/app.module.ngfactory.js 14:0-35 15:1945-1970
 @ ./src/main.ts
 @ multi ./src/main.ts

You can reproduce the error using this demo project: https://github.com/SergeyMell/test-helpies

What am I doing wrong? Any help is appreciated.

Update

Answers in Field 'browser' doesn't contain a valid alias configuration seem to provide solutions how to fix actually broken package in consuming app. In my case as I understand I have some issues in building or distributing my package so this should be fixed.

The plugin is on the early development stage so I didn't provide any documentation for now unfortunatelly. However, the usage is pretty straightforward - import interceptor from `@agilie/angular-helpies/interceptors` and use it among providers. — Sergey Mell, May 27 '20 at 08:15
i used ur library here:- https://stackblitz.com/edit/angular-aokp5u. No Error in this. — Aakash Garg, May 27 '20 at 08:33
Does this answer your question? [Field 'browser' doesn't contain a valid alias configuration](https://stackoverflow.com/questions/43037590/field-browser-doesnt-contain-a-valid-alias-configuration) — Aakash Garg, May 27 '20 at 08:36
Stackblitz does not compile code in production mode. I also don't have any issues in development mode, only in production. Regarding ur link - let me check. I've read many of similar ones — Sergey Mell, May 27 '20 at 08:41

Aakash Garg · Answer 1 · 2020-05-27T09:05:05.830

1

The error is due to /interceptors in your import.

Also you are not having public-api.ts in interceptors folder

Have a reference here where your public-api.ts should be and how to export your classes properly. Like @angular/common/http have exported.

https://github.com/angular/angular/tree/master/packages/common/http

edited May 27 '20 at 09:05

answered May 27 '20 at 07:52

Aakash Garg

10,649
2
7
25

There is no need to add an interceptor into the module. – Sergey Mell May 27 '20 at 08:17
ok, I tried but this didn't help. Neither using as it was before nor including whole `InterceptorsModule` into my application. The error remain the same. Actually interceptors are not required to be a part of a module so this suggestion seem to be the wrong way. – Sergey Mell May 27 '20 at 08:28
Stackblitz does not compile code in production mode. I also don't have any issues in development mode, only in production. Regarding ur link - let me check. I've read many similar ones – Sergey Mell May 27 '20 at 08:48
what angular version you are using? – Aakash Garg May 27 '20 at 08:49
8.2.14 in both (library and consuming projects) – Sergey Mell May 27 '20 at 09:02
This looks like smth making sense. Let me check – Sergey Mell May 27 '20 at 09:06
if its works please vote, took lots of efforts to figure out. had to go through your library. – Aakash Garg May 27 '20 at 09:17
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/214744/discussion-between-sergey-mell-and-aakash-garg). – Sergey Mell May 27 '20 at 13:46

score 0 · Accepted Answer · answered May 27 '20 at 13:46

Finally, I managed to overcome the issue. The problem was in package namings. As long as my root package is names as @agilie/angular-helpies the children packages should be named as @agilie/angular-helpies/interceptors and @agilie/angular-helpies/decorators but not simply interceptors or decorators.

This looks very strange because if I try to generate the lib with such name I get an error Project name "@agilie/angular-helpies/<some name here>" is invalid. Also when I rename the packages manually I get a warning that String violates the pattern. However, it works.

Possibly this could be fixed in some other manner (npm links or smth different) but I found this one solution. Actually Angular has similar namings if you check https://github.com/angular/angular/blob/master/packages/common/http/package.json for example

Multiple Angular libs do not work in production mode

Update

2 Answers2