Using different name for import ng-packagr lib from dist folder is not working

[jakubjosef]

Hi everyone, I facing interesting problem with Angular ng-packagr powered libraries.

Bug Report or Feature Request (mark with an x)

- [x] bug report -> please search issues before submitting
- [ ] feature request

Command (mark with an x)

- [ ] new
- [ ] build
- [ ] serve
- [ ] test
- [ ] e2e
- [x] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Versions

macOS High Sierra 10.13.6

- node -v
v8.11.1
- npm -v
5.6.0
- ng -v

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 6.1.5
Node: 8.11.1
OS: darwin x64
Angular: 6.1.6
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.6.8
@angular-devkit/build-angular      0.6.8
@angular-devkit/build-ng-packagr   0.6.8
@angular-devkit/build-optimizer    0.6.8
@angular-devkit/core               0.6.8
@angular-devkit/schematics         0.6.8
@angular/cli                       6.1.5
@ngtools/json-schema               1.1.0
@schematics/angular                0.6.8
@schematics/update                 0.6.8
ng-packagr                         3.0.6
rxjs                               6.3.2
typescript                         2.7.2
webpack                            4.17.2

Repro steps

Generate library using ng generate library and change tsconfig path.
From:

      "ui-components": [
        "dist/ui-components"
      ],
      "ui-components/*": [
        "dist/ui-components/*"
      ]

To:

     "@ui-components": [
        "dist/ui-components"
      ],
      "@ui-components/*": [
        "dist/ui-components/*"
      ]

And use import { something } from '@ui-components'. Basically the assumption was I will use @ui-components in ui-starter app and ui-components in all other places. But looks like there is some "magic" because any other name than original one causing the same error.

The log given by the failure

ERROR in ./src/app/pages/registration/steps/step-info/step-info.component.ngfactory.js
Module not found: Error: Can't resolve '../../../../../../dist/ui-components/ui-components.ngfactory' in '/Users/jakob/ui-starter/src/app/pages/registration/steps/step-info' 

Desired functionality

It should work with a different name inside "main" application.

Mention any other details that might be useful

You might want to know why I want to have this feature. Let me shorty explain our problem.

We have application called ui-starter, this application contains projects folder with ui-components library. From ui-starter project we using this library by import { something } from 'ui-components' with "tsconfig path hack" and everything works nice and smooth.

The problem started when we add another application (table-app) which has dependency to ui-components project. This application wants to consume ui-components source code during AOT build and it fails with error: ERROR in : Error: Trying to import a source file from a node_modules package: It's maybe possible to have some circular dependencies but I think it's normal use case.

ui-starter app -> contains ui-components project
ui-starter app -> using table-app as dep
table-app -> has dep to ui-components from npm - wanted to use them but read path from tsconfig.json

So my assumption was let's change paths config and use some prefixed version inside ui-starter app, let's say @ui-components or _ui-components. But unfortunately I am not able to use this approach. I spend lot of time reading other issues here, in stackoverflow and in other repos, that's the reason why I create my own one.

Thank you very much for any help.

[alan-agius4]

Hi, changing the tsconfig paths is not enough. You need to change the library name from the package.json, update the angular.json with the new library path and rebuild the library as the library name is also present in the generated metadata.json. That said a library cannot be imported using different names from the one declared. You can change the location of were it is fetched from but not the name of it.

In your case most likely you want to name your library always with a scope @.

Can you create a small reproduction please?

[jakubjosef]

@alan-agius4 Thank you for your answer. So I cannot use different name :(
That means this problem is unsolvable - you cannot have a dependency which has a dependency on NPM version of library you have inside projects folder.

This diagram should help you understand my case, I don't have much time these days but I hope I create small reproduction soon.

So the problem is about app B should use lib A from node_modules but tsconfig.json override path to projects folder, which is prohibited my compiler (seriously, related check can be removed from code and everything will be working. In the other words - we want to have green line, but we have red line.

[alan-agius4]

The tsconfig path to node module is not prohibited. Thought the library must be already compiled to JavaScript. I think what you want is to lookup from dist if exists otherwise lookup in node_modules using tsconfig paths.

We have reviewed, this issue and determined that it doesn't fall into the bug report or feature request category. This issue tracker is not suitable for support requests, please repost your issue on StackOverflow using tag angular-cli.

If you are wondering why we don't resolve support issues via the issue tracker, please check out this explanation.

[jakubjosef]

I still think this is a bug, but OK, the problem is you cannot use library which is using your library and I think this is relatively common use case. We can take care about it by decoupling our projects to smaller ones. But I don't understand why you can't see the bug here. The exception is pretty straightforward:

 Error: Trying to import a source file from a node_modules package: import /Users/jakob/xxx/ui-starter/dist/ui-components/ui-components.d.ts from /Users/jakob/xxx/ui-starter/node_modules/ng2-smart-table/ng2-smart-table.d.ts

In CI/CD side I found some article about removing tsconfig paths before running build:prod, we did the same and it's working but solution like that is horrible from my PoV. Also guys in some Github issue mentioned if they patch compiler file, everything will be working. That means this exception is some safety check isn't it? What about bringing some angular compiler option to disable this check?

EDIT: For other people which can face this problem: Workarounded by building local library from projects/ui-components to node_modules/_projects/ui-components.

[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.}