CODEWITHSUNDEEP
angularnpm
Cogno
Cogno

Reputation: 35

Can't link my library Angular in another library Angular

Context

I created several independent angular libraries in different folders:

The lib2 and lib3 libraries have a dependency on the lib1 library.

// Example of the lib3.module.ts 
import {Lib1Module} from '@libs/lib1';

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

However, when I create a symlink of lib1 and import it into lib2 and lib3 with the command "npm link lib1", 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 amazing thing in all this, is, if I deploy my component on the official repository of npm, it will work. It's the same structure and files! So there is a problem with the symlink.

What I tried

I tried to follow the solutions proposed here:

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\lib2\node_modules\ng-packagr\lib\ngc\compile-source-files.js:4:58)

Upvotes: 2

Views: 3182

Answers (1)

Fasco
Fasco

Reputation: 243

Here is my solution to resolve your problem: https://github.com/angular/angular/issues/31989#issuecomment-523396480

There is a problem with the compilation of angular and how it manages the symlink from NPM. So you need to use yarn instead of npm, just to write your symlink (yarn link).

Upvotes: 1

Related Questions