Can't build an angular library that depends on another angular linked library (symlink)

I can’t build an angular library (let’s call this library libA), if I linked another angular library (libB ) to it with the command ‘npm link’.

If you want to reproduce my error, just clone this repository-git, and follow the steps in the readme. You will have the same error as me.

Context

I created several independent angular libraries in different folders:

• /home/user/lib1
• /home/user/lib2
• /home/user/lib3

The lib2 and lib3 libraries need the lib1 as a dependency.

So here are the steps of what I am doing to link and add the lib1 to the lib2/lib3:

1. I install the dependencies of the lib1 (npm install) and build the lib1 (ng build)
2. I navigate to the dist folder and link the lib1 with the command ‘npm link’
3. I navigate to the lib2 or lib3
4. I install my dependencies with npm (npm install)
5. I add the lib1 with the command ‘npm link lib1’
6. I add the lib1 as a module in the lib2/lib3 as bellow:

// Example of the lib3.module.ts 

import { Lib1Module } from '@libs/lib1';

@NgModule({
  declarations: [Lib3Component],
  imports: [
    Lib1Module
  ],
  exports: [Lib3Component]
})
export class Lib3Module { }

7 . I try to build the lib2/lib3 with the command ‘ng build’ However, I get a build issue (bellow, you can see the error message).

ERROR: : Unexpected value 'Lib1Module in /home/user/Documents/multiple-angular-lib/lib1/dist/libs/lib1/libs-lib1.d.ts' imported by the module 'Lib2Module in /home/user/Documents/multiple-angular-lib/lib2/projects/libs/lib2/src/lib/lib2.module.ts'. Please add a @NgModule annotation.

The most weird part is, if I deploy my lib1 on the official repository of npm and install it in lib2 and lib3, it will work. So there is a problem with the symlink.

What I tried

I tried to follow the solutions proposed here:

https://github.com/angular/angular-cli/issues/10665

How to reproduce my problem

I’ve reproduced an example here:

• https://github.com/fjoalland/multiple-angular-lib/tree/master

Just follow the steps and you should have the same error as me.

Error message

Bellow, the full error I got when I try to build the lib2 with a symlink of the lib1 [root@user lib2]# ng build Building Angular Package ------------------------------------------------------------------------------ Building entry point '@libs/lib2' ------------------------------------------------------------------------------ Compiling TypeScript sources through ngc ERROR: : Unexpected value 'Lib1Module in /home/user/Documents/multiple-angular-lib/lib1/dist/libs/lib1/libs-lib1.d.ts' imported by the module 'Lib2Module in /home/user/Documents/multiple-angular-lib/lib2/projects/libs/lib2/src/lib/lib2.module.ts'. Please add a @NgModule annotation. An unhandled exception occurred: : Unexpected value 'Lib1Module in /home/user/Documents/multiple-angular-lib/lib1/dist/libs/lib1/libs-lib1.d.ts' imported by the module 'Lib2Module in /home/user/Documents/multiple-angular-lib/lib2/projects/libs/lib2/src/lib/lib2.module.ts'. Please add a @NgModule annotation. See "/tmp/ng-V1D4qF/angular-errors.log" for further details. The contents of the angular-error.log file:

[error] Error: : Unexpected value 'Lib1Module in D:/Documents/multiple-angular-lib/lib1/dist/libs/lib1/libs-lib1.d.ts' imported by the module 'Lib2Module in D:/Documents/multiple-angular-lib/lib2/projects/libs/lib2/src/lib/lib2.module.ts'. Please add a @NgModule annotation. at Object.<anonymous> (D:\Documents\multiple-angular-lib\lib2\node_modules\ng-packagr\lib\ngc\compile-source-files.js:73:19) at Generator.next (<anonymous>) at fulfilled (D:\Documents\multiple-angular-lib

[cp-fabian-pittroff]

Hey @fjoalland the preserveSymlinks option needs to be on different places. For your application it is the angular.json and for ng-packagr builds you can set the option inside the tsconfig.lib.json.

"angularCompilerOptions": {
    "preserveSymlinks": true,
    ...
}

There should already be some angularCompilerOptions, just add the preserveSymlinks to it.

[alxhub]

👍 thank you for the bug report and useful reproduction. You’re absolutely right, Angular does not work with npm link, or with symlinked node_modules in general. This is related to how the compiler is architected - it uses the full pathname of source files (including .d.ts files from node_modules) as a key to look up classes internally. Since a file behind a symlink has two possible paths, this scheme breaks down.

The good news is that the Ivy compiler should not have this problem!