Angular CLI can't find modules from locally installed library

Question

I create an angular library: @my_library/sdk and also created a samples project to test it. The problem is, while installing the library on my samples project angular's build complains it can't find the module:

ERROR in ./src/app/app.module.ts Module not found: Error: Can't resolve '@my_library/sdk' in '/Users/eestein/Documents/dev/my_library/sdk-front/samples/src/app' ERROR in ./src/app/app.component.ts Module not found: Error: Can't resolve '@my_library/sdk' in '/Users/eestein/Documents/dev/my_library/sdk-front/samples/src/app'

If I open both offending files (app.component.ts and app.module.ts) in VSCode no error is shown. It looks like VSCode can find it, but Angular CLI can't. The package is also there at node_modules' folder.

This is what I have in my package.json of the samples project:

"@my_library/sdk": "file:///Users/eestein/Documents/dev/my_library/sdk-front/library/my_library-sdk-1.0.0-alpha.2.tgz"

This is my folder structure:

- library
   - library's code
   - *.tgz file
- samples
    - samples' code
    - package.json referencing the tgz file

I've opened an issue on angular's cli GitHub page, but it's been 8 days and no replies, so I'm trying SO now...

This is the link for the issue: https://github.com/angular/angular-cli/issues/11054

Setup

Angular CLI: 1.7.4
Node: 7.7.3
OS: darwin x64
Angular: 5.1.3
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.7.4
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.2
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.4.2
webpack: 3.11.0

Any ideas on what the problem might be? The problem is local, if I publish the library to my private npm repo and install it from there, it works.

Thanks.

From the documentation it looks like it uses a relative path. Also, it should point at the directory, not a compressed file I believe. — peinearydevelopment
@peinearydevelopment hey, thanks, but I tried both ways. And actually it was npm install --save that created that entry. And if I look into the node_modules' folder, the library is correctly placed there. — eestein
@peinearydevelopment I just tried again to be sure, same thing :/ — eestein
Sorry, I've never done this before. To do what you're describing, I've always used npm link. — peinearydevelopment
@peinearydevelopment np, thanks. I've always done that as well, but it's being discourage so I'm trying this approach now. — eestein

Matthew Dolman Matthew Dolman · Accepted Answer · 2018-09-25T02:11:17

It seems that even after you install the .tgz file that angular-cli still looks for the module in the paths section of tsconfig.json, which is usually dist/@namespace/lib.

The problem is that ng build --prod deletes the contents of the dist folder before it compiles and so when it tries to actually build the app the the modules no longer exist. I got around this by specifying the output of the build command so that the app goes to a different folder.

ng build -prod --output-path=production

Angular CLI can't find modules from locally installed library

Setup

1 Answers