ng build v6 does not use paths section of root tsconfig.json

[krotscheck]

Versions

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

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

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.5.7
@angular-devkit/build-angular      0.5.7
@angular-devkit/build-ng-packagr   0.5.7
@angular-devkit/build-optimizer    0.5.7
@angular-devkit/core               0.5.7
@angular-devkit/schematics         0.5.7
@angular/material                  5.2.5
@ngtools/json-schema               1.1.0
@ngtools/webpack                   6.0.0-rc.5
@schematics/angular                0.5.7
@schematics/update                 0.5.7
rxjs                               6.0.0-uncanny-rc.7
typescript                         2.7.2
webpack                            4.5.0

Repro steps

• Generate a new repository with 2 libraries in projects/*.
• Library A must import Library B
• Write and run unit test for Library A
• run ng build.

Observed behavior

If running ng test, the project resolves /tsconfig.json at per each library's ./project/libraryA/tsconfig.spec.json. The root tsconfig.json has an automatically managed paths block, linked with the output directories.

Running ng build, it appears that we don't invoke ng-packagr using that tsconfig.json file, or even resolve the paths block, resulting in a slew of errors of this sort:

projects/libraryA/src/test.model.ts(18,29): error TS2307: Cannot find module 'libraryB'.

Desired behavior

It should be possible to provide a paths block for dependency resolution during the build step.

Mention any other details that might be useful (optional)

I'm working through a full migration on a public project here:
https://github.com/kangaroo-server/kangaroo-ui/tree/feature/ng6

Repro steps on that repo:

yarn install --pure-lockfile
yarn build # note that it has import failures on @kangaroo/angular-authn
yarn test angular-authn # This works.

[krotscheck]

Current workaround: Modify the various ng-packagr configuration files to output to node_modules/<packagename>, and let node's own resolution handle the rest.

[haovanvo]

I have the same issue but when I look back the whole structure of angular 5 app and I found that there is one more tsc file with name is tsconfig.app.json at src folder. it extends from tsconfig.json. We need to declare alias paths with the relative path of tsconfig.app.json instead of tsconfig.json location. It works properly now.
tsconfig.app.json:
{ "extends": "../tsconfig.json", "compilerOptions": { "outDir": "../out-tsc/app", "baseUrl": "./", "paths": { "@shared/components/*": [ "app/shared/*" ], "@shared/services/*": [ "app/services/*" ] }, "module": "es2015", "types": [] }, "exclude": [ "test.ts", "**/*.spec.ts" ] }

[krotscheck]

@haovanvo - Yes, I see that file as well, but only in the app. There doesn't seem to be an equivalent tsconfig.lib.json when invoking ng generate library <name>

[krotscheck]

Having said that, I think this bug might have been fixed by angular/devkit#750

[krotscheck]

Confirmed, I've got it working, though it required more than just an 'out-of-the-box' experience. The changes I needed were:

1. add a custom tsconfig.lib.json link inside angular.json

        "build": {
          "builder": "@angular-devkit/build-ng-packagr:build",
          "options": {
            "project": "projects/my-library/ng-package.json",
            "tsConfig": "projects/my-library/tsconfig.lib.json"
          },
          "configurations": {
            "production": {
              "project": "projects/my-library/ng-package.prod.json"
            }
          }

2. Create the tsconfig.lib.json file.

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "target": "es6",
    "inlineSources": true
  }
}

3. Most importantly, add another path to the root tsconfig, OR an appropriate block to the library's own tsconfig. Here's the root version, for the lib version, remember that baseUrl is overridden to src, so you have to add another ../

{
  "compilerOptions": {
    ...,
    "paths": {
      "my-library": [
        "dist/my-library",
        "../../../dist/my-library"
      ]
    }
  }
}

@hansl - I'd be happy to add this to the library schematic, however I'm not quite certain how to manage paths generation of the tsconfig.json file, nor whether it should be done at the root or at the library level. Do you have any guidance?

[aboodz]

I was trying to create a mono repo project and I stumble upon the same issue. After hours of diagnosing the issue, I reached out the same conclusion @krotscheck mentioned. NgPackagr will overwrite baseUrl to the entry point, which is src/public_api (see line 44).

The workaround is manually adding the path to either tsconfig.json in root, or tsconfig.lib.json in lib. I still find this solution weird since the path ../../../dist/my-library is very very relative.

one more thing

The same thing well happen if you want to reference your lib in another app, you have to add another path relative to the app directory this time not relative to src. Of course this is not related to ng-packagr. Your tsconfig.json will end up something like this:

{
  "compilerOptions": {
    ...,
    "paths": {
      "my-library": [
        "dist/my-library", // mostly for the IDE
        "../../dist/my-library", // for the app
        "../../../dist/my-library" // for another lib
      ]
    }
  }
}

[filipesilva]

Heya, I think the problems described in this issue are partially the same as #10615.

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

[maxime1992]

Damn @haovanvo you saved me so many hours with your comment...

I've already spent +1h going mad, not understanding why my lib couldn't be loaded directly and I probably came accross +10 outdated issues and 3 or 4 unanswered questions on SO.

But overriding the path in tsconfig.app.json was the only thing which worked...

Thanks!

[ysantalla]

the same problem!!!

[MarcosMeli]

Solved the problem in Angular 7 adding the paths to both tsconfig files

• paths in tsconfig.json helps vscode to works and with intellisense
• paths in tsconfig.app.json is also needed for angular

tsconfig.json

tsconfig.app.json

and the intellisense works great

[robie2011]

Solved the problem in Angular 7 adding the paths to both tsconfig files

• paths in tsconfig.json helps vscode to works and with intellisense
• paths in tsconfig.app.json is also needed for angular

tsconfig.json

tsconfig.app.json

and the intellisense works great

IDE Restart required (VSCODE)

[VovanSuper]

Well, I tried many different types of configurations, described above, but still having problem - path resolution/intelliscence in angular components are working.. but stoped working corresponding temaplates (i.e, in say, Ionic 4 project language service normally identifies ion-* tags but not my custom ones)..
Any ideas ?

[ratbeard]

@VovanSuper might have the problem I just did, make sure you're editing baseUrl and paths config inside the compilerOptions: block in tsconfig.app.json

[pegaltier]

if tsconfig.app.json extend tsconfig.json then you only need to add it to tsconfig.json and then restart VSCode. Example with angular8

    "paths": {
      "@core/*": [
        "src/app/core/*"
      ],
      "@store/*": [
        "src/app/app-store/*"
      ]
    },```

[stephaneeybert]

What about using the library in another client application ? Do we need to specify the paths mappings in each client application as well ?

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