Angular-cli: Scoped library paths cannot be resolved

[msterba]

See also https://github.com/angular/angular-cli/issues/10172
The generated path aliases seem not right.

Versions

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


Angular CLI: 6.0.0
Node: 10.0.0
OS: linux 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

ng new my-project
cd my-project
ng generate library foo
ng generate library @msterba/bar
ng build foo
ng build @msterba/bar

Now try to import BarModule into the app.

Observed behavior

The libraries are compiled correctly but the resulting directory structure in dist is not reflected by the paths definitions in tsconfig.json:

directory structure:

dist
+- foo
+- @msterba
   +- bar


tsconfig.json:

"paths": {
  "foo": [
    "dist/foo"
  ],
  "bar": [
    "dist/bar"
  ]
}

BarModule cannot be imported.

// src/app/app.module.ts:
import { FooModule } from 'foo'; // ok
import { BarModule } from '@msterba/bar'; // [ts] Cannot find module '@msterba/bar'.

// console:
$ ng build

ERROR in src/app/app.module.ts(8,27): error TS2307: Cannot find module '@msterba/bar'.

Desired behavior

Add scopes to the paths definitions.

"paths": {
  "foo": [
    "dist/foo"
  ],
  "@msterba/bar": [
    "dist/@msterba/bar"
  ]
}

Mention any other details that might be useful (optional)

[johnbwoodruff]

Same issue happening with me. Perhaps there's something in the configuration files that is needed to be changed manually for this to work?

[rafaelbatistamarcilio]

Same to load feature module with lazy loading

{
        path: 'user',
        loadChildren: 'app/user/user.module#UserModule'
}

ERROR in Could not resolve module app/user/user.module relative to /C/dsv/client/pwa-ng/src/app/app.routing.ts

[ocombe]

Ah I was about to open an issue about this!
I've updated the paths in tsconfig.json, but it still doesn't build my second library that depends on the first one, even if ng test actually works fine for both

Repro:

git clone https://github.com/ngx-translate/core/tree/monorepo
npm i
ng build @ngx-translate/core
ng build @ngx-translate/http-loader

Error log:

ng build @ngx-translate/http-loader
Building Angular Package
Building entry point '@ngx-translate/http-loader'
Rendering Stylesheets
Rendering Templates
Compiling TypeScript sources through ngc

BUILD ERROR
projects/ngx-translate/http-loader/src/lib/http-loader.ts(2,31): error TS2307: Cannot find module '@ngx-translate/core'.

Error: projects/ngx-translate/http-loader/src/lib/http-loader.ts(2,31): error TS2307: Cannot find module '@ngx-translate/core'.

    at Object.<anonymous> (C:\www\ngx-translate-monorepo\node_modules\ng-packagr\lib\ngc\compile-source-files.js:61:68)
    at Generator.next (<anonymous>)
    at C:\www\ngx-translate-monorepo\node_modules\ng-packagr\lib\ngc\compile-source-files.js:7:71
    at new Promise (<anonymous>)
    at __awaiter (C:\www\ngx-translate-monorepo\node_modules\ng-packagr\lib\ngc\compile-source-files.js:3:12)
    at Object.compileSourceFiles (C:\www\ngx-translate-monorepo\node_modules\ng-packagr\lib\ngc\compile-source-files.js:19:12)
    at Object.<anonymous> (C:\www\ngx-translate-monorepo\node_modules\ng-packagr\lib\ng-v5\entry-point\ts\compile-ngc.transform.js:42:34)
    at Generator.next (<anonymous>)
    at C:\www\ngx-translate-monorepo\node_modules\ng-packagr\lib\ng-v5\entry-point\ts\compile-ngc.transform.js:7:71
    at new Promise (<anonymous>)

projects/ngx-translate/http-loader/src/lib/http-loader.ts(2,31): error TS2307: Cannot find module '@ngx-translate/core'.

Error: projects/ngx-translate/http-loader/src/lib/http-loader.ts(2,31): error TS2307: Cannot find module '@ngx-translate/core'.

    at Object.<anonymous> (C:\www\ngx-translate-monorepo\node_modules\ng-packagr\lib\ngc\compile-source-files.js:61:68)
    at Generator.next (<anonymous>)
    at C:\www\ngx-translate-monorepo\node_modules\ng-packagr\lib\ngc\compile-source-files.js:7:71
    at new Promise (<anonymous>)
    at __awaiter (C:\www\ngx-translate-monorepo\node_modules\ng-packagr\lib\ngc\compile-source-files.js:3:12)
    at Object.compileSourceFiles (C:\www\ngx-translate-monorepo\node_modules\ng-packagr\lib\ngc\compile-source-files.js:19:12)
    at Object.<anonymous> (C:\www\ngx-translate-monorepo\node_modules\ng-packagr\lib\ng-v5\entry-point\ts\compile-ngc.transform.js:42:34)
    at Generator.next (<anonymous>)
    at C:\www\ngx-translate-monorepo\node_modules\ng-packagr\lib\ng-v5\entry-point\ts\compile-ngc.transform.js:7:71
    at new Promise (<anonymous>)

[ocombe]

Temporary fix: use npm link
In my case:

ng build @ngx-translate/core
npm link ./dist/@ngx-translate/core
ng build @ngx-translate/http-loader

[filipesilva]

I'm not sure what's going wrong here but you really shouldn't use npm link. There are many, many situations where things will break because of it.

[gms1]

I have implemented a similar workaround for my project:
https://github.com/gms1/angular-dynaform
using dependency:

"@angular-dynaform/core": "file:../../../dist/@angular-dynaform/core"

and a postinstall script:
https://github.com/gms1/angular-dynaform/blob/master/build/js/postinstall.js
Of course, this dependency must be removed before publishing the generated packages

All lib-projects had different 'dest' properties defined for production and non-production build ( see ng-package.json ), so this cannot work with static path definitions
but ng-packagr seems to ignore these path definitions anyway

[gms1]

a similar issue:
https://github.com/angular/angular-cli/issues/10444
the suggestion, adding a path definition to tsconfig.lib.json, from @aboodz works for me:

    "paths": {
      "@angular-dynaform/core": [
        "../../../../dist/@angular-dynaform/core"
      ]
    }

[kolkov]

One sleepless night passed ...))) Thanks!

[filipesilva]

Heya, I think the problems described in this issue are partially the same as https://github.com/angular/angular-cli/issues/10615.

https://github.com/angular/devkit/pull/895 (using the right paths for scoped libs) together with https://github.com/dherges/ng-packagr/pull/862 (not overriding baseUrl in ng-package) should fix it.

[maxime1992]

Not sure that issue's resolved :man_shrugging:

I've been upgrading to the following:

Angular CLI: 7.0.2
Node: 8.9.4
OS: linux x64
Angular: 7.0.0
... animations, cdk, common, compiler, compiler-cli, core, forms
... http, language-service, material, platform-browser
... platform-browser-dynamic, platform-server, router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.10.2
@angular-devkit/build-angular      0.10.2
@angular-devkit/build-ng-packagr   0.10.2
@angular-devkit/build-optimizer    0.10.2
@angular-devkit/build-webpack      0.10.2
@angular-devkit/core               7.0.2
@angular-devkit/schematics         7.0.2
@angular/cli                       7.0.2
@angular/flex-layout               7.0.0-beta.19
@ngtools/json-schema               1.1.0
@ngtools/webpack                   7.0.2
@schematics/angular                7.0.2
@schematics/update                 0.10.2
ng-packagr                         4.4.0
rxjs                               6.3.3
typescript                         3.1.3
webpack                            4.19.1

and I get the error:

ERROR in src/app/app-routing.module.ts(10,41): error TS2307: Cannot find module 'visualiser-sandbox'.

/tsconfig.json:

{
  ...
  paths: {
    "visualiser-sandbox": [
      "dist/visualiser-sandbox"
    ],
    "visualiser-sandbox/*": [
      "dist/visualiser-sandbox/*"
    ],
  }
}

I can see that the dist folder contains visualiser-sandbox and everything into it:

[rupertgcox]

I'm on version 6.2.2 (which I believe is well after the fix was merged in) and am seeing exactly the same issue as @maxime1992

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

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.8.2
@angular-devkit/build-angular      0.8.2
@angular-devkit/build-ng-packagr   0.8.6
@angular-devkit/build-optimizer    0.8.2
@angular-devkit/build-webpack      0.8.2
@angular-devkit/core               0.8.2
@angular-devkit/schematics         0.8.2
@angular/cdk                       6.4.7
@angular/cli                       6.2.2
@angular/material                  6.4.7
@ngtools/json-schema               1.1.0
@ngtools/webpack                   6.2.2
@schematics/angular                0.8.2
@schematics/update                 0.8.2
ng-packagr                         4.4.0
rxjs                               6.3.2
typescript                         2.9.2
webpack                            4.19.0

[freepee]

I'm having the same issue as @maxime1992 and @rupertgcox and wonder if this has been solved or if there exists an solution?

[stephaneeybert]

Is that issue similar ?

[maxime1992]

So I'm not sure whether it's the same thing or not but I moved away from using libraries within the dist folder and instead pick up from the source directly.

{
  ...
  paths: {
    "visualiser-sandbox": [
      "dist/visualiser-sandbox"
    ],
    "visualiser-sandbox/*": [
      "dist/visualiser-sandbox/*"
    ],
  }
}

became

{
  ...
  paths: {
      "visualiser-sandbox": ["projects/visualiser-sandbox/src/public_api"],
      "visualiser-sandbox/*": ["projects/visualiser-sandbox/src/public_api"]
  }
}

When navigation with the IDE inside the code it's also giving me better access to the source instead of pointing to the dist folder :+1:

[angular-automatic-lock-bot[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._}