Skip to content

Injecting one library's service into another library's service creates a bad duplicate import on build #12353

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
saltman424 opened this issue Sep 23, 2018 · 2 comments

Comments

@saltman424
Copy link

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
- [ x ] build
- [ ] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Versions

node --version
v8.11.2

npm --version
6.2.0

ng --version

Angular CLI: 6.1.5
Node: 8.11.2
OS: win32 x64
Angular: 6.1.8
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

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

Repro steps

  1. Run ng g library FirstLibrary -- This will create a library with an alias of "FirstLibrary" and package name of "first-library"
  2. Run ng g library SecondLibrary
  3. Go to second-library.service.ts.
  4. Add import { FirstLibraryService } from 'FirstLibrary';
  5. Add firstLibraryService: FirstLibraryService as an argument to the constructor of the SecondLibraryService for dependency injection
  6. Run ng build FirstLibrary
  7. Run ng build SecondLibrary
  8. Go to any of the built second-library files (e.g. "dist/second-library/fesm2015/second-library.js") and notice something like the following two lines at the top of the file:
import { FirstLibraryService } from 'FirstLibrary';
import { FirstLibraryService as FirstLibraryService$1 } from 'first-library';

The second line is the bad import that was added during the build process and uses the package name of the imported library rather than the library's alias. It will cause an obvious error when imported into the main application, i.e. Module not found: 'first-library'

The log given by the failure

There isn't really a useful log to provide here, but this is the build log for SecondLibrary, which just seems to show a standard build process:

ng build SecondLibrary
Building Angular Package
Building entry point 'second-library'
Rendering Stylesheets
Rendering Templates
Compiling TypeScript sources through ngc
Bundling to FESM2015
Bundling to FESM5
Bundling to UMD
Minifying UMD bundle
Copying declaration files
Writing package metadata
Removing scripts section in package.json as it's considered a potential security vulnerability.
Built second-library
Built Angular Package!
- from: C:\...\App\projects\second-library
- to:   C:\...\App\dist\second-library

Desired functionality

Import and injection without a bad duplicate import. Preferably in a way that still allows for a different library alias than the package name.

Mention any other details that might be useful

Sometimes in addition to this problem, during the build process of the second library I will get something like:

No name was provided for external module 'FirstLibrary' in output.globals – guessing 'firstLibrary'
No name was provided for external module 'first-library' in output.globals – guessing 'i1'

But this doesn't happen in the minimal reproduction above.

@alan-agius4
Copy link
Collaborator

Hello, the root cause has been fixed with this PR #11599.. As library names should be the same as the aliases in the tsconfig, Thus in your case it should be first-library

"first-library": [
  "dist/first-library"
],

Regarding the warning that you are getting No name was provided for external module..., that is expected and you need to configure the UMD modules IDs in ng-package.json.

More details on what you need to do can be found here: https://github.com/ng-packagr/ng-packagr/blob/master/docs/dependencies.md#resolving-umd-module-identifiers

@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 8, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

2 participants