angular-cli: One library can't import another library

Versions

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

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.6.0
@angular-devkit/build-angular      0.6.0
@angular-devkit/build-ng-packagr   0.6.0
@angular-devkit/build-optimizer    0.6.0
@angular-devkit/core               0.6.0
@angular-devkit/schematics         0.6.0
@ngtools/json-schema               1.1.0
@ngtools/webpack                   6.0.0
@schematics/angular                0.6.0
@schematics/update                 0.6.0
ng-packagr                         3.0.0-rc.2
rxjs                               6.1.0
typescript                         2.7.2
webpack                            4.6.0

Repro steps

Step 1 ng generate library model-lib ng generate library ui-lib ng generate application portal
Step 2 ng build model-lib
Step 3 import { ModelLibModule } from ‘model-lib’ in portal module ng build portal
Step 4 import { ModelLibModule } from ‘model-lib’ in ui-lib module ng build ui-lib

Observed behavior

BUILD ERROR
projects/ui-lib/src/lib/ui-lib.module.ts(3,29): error TS2307: Cannot find module 'model-lib'.

Desired behavior

Library should import other library same as application.

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 13
Comments: 26 (8 by maintainers)

Most upvoted comments

Ok, after trying plenty of different things I finally managed to get it to work.

--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,16 +1,16 @@
 {
   "compileOnSave": false,
   "compilerOptions": {
-    "baseUrl": ".",
+    "baseUrl": "./",
     "outDir": "./dist/out-tsc",
     "sourceMap": true,
     "declaration": false,
-    "module": "es2015",
+    "module": "esnext",
     "moduleResolution": "node",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "importHelpers": true,
-    "target": "es5",
+    "target": "es2015",
     "typeRoots": ["node_modules/@types"],
     "lib": ["es2018", "dom"],
     "paths": {

--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -2,11 +2,7 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./out-tsc/app",
-    "types": [],
-    "paths": {
-      "ngx-hover-opacity": ["projects/ngx-hover-opacity/src/public_api"],
-      "ngx-hover-opacity/*": ["projects/ngx-hover-opacity/src/public_api"]
-    }
+    "types": []
   },
   "include": ["src/**/*.ts"],

Might eventually help someone out here 🤷‍♂️

maxime1992 on Jun 11, 2019

Ok so I’ve been digging into that issue and found out what was wrong.

For some reason, /src/tsconfig.app.json had into compilerOptions the following prop:

"baseUrl": "./",

Removed that and now everything seems to be working.

maxime1992 on Oct 19, 2018

With a library generated with 6.0.2+ this should no longer be an issue. Support for secondary entry points will be corrected via https://github.com/angular/devkit/pull/933

For an existing library exhibiting the issue, ensure the library that contains the import has its own tsconfig and that it has a paths section as described in the previous responses.

clydin on May 17, 2018

@maxime1992 Thanks a lot!! I was debugging this for a couple of hours and it was driving me crazy. Thanks a lot.

It happens when you migrate an application from 5.x to latest angular version, in my case it was 7.x. So old tsconfig.app contained that property and was messing the imports from the libraries.

p1p3 on Nov 23, 2018

Same here with "@angular/cli": "6.2.5", I think this issue should be reopened =/

If anyone has a fix BTW can you please share your solution? Tried with the path too but didn’t work either

maxime1992 on Oct 19, 2018

Thanks @aitboudad. While trying to figure out what the hell that patch is (looks like a piece of git diff, something I’m not confortable with), I manually added a log inside the ng-packagr script for ngc compilation, and I’ve realized two things:

library 2, which doesn’t compile because tsc (or ngc? Didn’t dig too much) cannot resolve absolute paths from library1 pointing to dist/library1, inherits the main tsconfig.json, where the following options are specified: { "baseUrl": "./", [...], "paths": { "library1": ["dist/library1"], "library2": ["dist/library2"] } }. My library2’s tsconfig.lib.json was trying to override these options like this: { "baseUrl": "../../" } When I added the following log lines: I noticed that baseUrl would still point to “./” (which, for the compilation of library 2, would be {root}/projects/library2/src and therefore this baseUrl was not overridden! Moreover, I would expect the path to be {root}/projects/library2, where tsconfig.lib.json is, not the {root}/projects/library2/src folder, which is 1 level deeper! So my solution is to override the paths option inside library2’s tsconfig, using 3 times the “…/” command: { [...], "paths": { "library1": ["../../../dist/library1"] } } and now it works.

Etchelon on May 8, 2018