angular-cli: Scoped library paths cannot be resolved

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)

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 17
Comments: 15 (6 by maintainers)

Most upvoted comments

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

rupertgcox on Oct 24, 2018

Not sure that issue’s resolved 🤷‍♂️

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:

maxime1992 on Oct 22, 2018

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

ocombe on May 4, 2018

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.

filipesilva on May 4, 2018

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 👍

maxime1992 on Jul 30, 2019

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"
      ]
    }

gms1 on May 5, 2018

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

rafaelbatistamarcilio on May 4, 2018