Preserve Symlinks in Angular Libraries

Question

I have a problem.

I'm trying to make a Angular 8 Library using ng-cli, but i can't preserve symlinks from my external application using npm link.

I've tried to add this on my angular.json:

    "build": {
      "builder": "@angular-devkit/build-ng-packagr:build",
      "options": {
        "preserveSymlinks": true,
        "tsConfig": "projects/button/tsconfig.lib.json",
        "project": "projects/button/ng-package.json"
      }
    },

but got:

"Schema validation failed with the following errors: Data path ""
should NOT have additional properties(preserveSymlinks)."

I found that it doesn't work for libraries.

Then I tried to add this to my tsconfig.lib.json:

 "angularCompilerOptions": {
    "annotateForClosureCompiler": true,
    "skipTemplateCodegen": true,
    "strictMetadataEmit": true,
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true,
    "enableResourceInlining": true,
    "preserveSymlinks": true
  }

And nothing happend.

I searched here for a solution, but couldn't find anything like it.

How can I make it?

Thank you!

Does it make a difference if you add `"preserveSymlinks": true` to the *tsconfig.json* file for the application *consuming* the library? — R. Richards, Oct 06 '19 at 18:49
@R.Richards I saw this in this issue on git: https://github.com/angular/angular/issues/31989#issuecomment-523375803 — andersonbalves, Oct 06 '19 at 19:10
I Need this, because when I use my component (inside the library) on my external application I got this error: `NgBradButtonComponent.html:2 ERROR NullInjectorError: StaticInjectorError(AppModule)[NgClassImpl -> ElementRef]: StaticInjectorError(Platform: core)[NgClassImpl -> ElementRef]: ` Cause my component has _ngClass_ and _ngIf_. I don't know if it is the right way. — andersonbalves, Oct 06 '19 at 19:12
I can see why you need it, it makes sense. I was hoping that adding that in the consuming app would work. Hopefully someone will post an answer. — R. Richards, Oct 06 '19 at 19:21
@andersonbalves did you find any solution for this? I am facing this same issue. — Ashwani Kumar, Dec 19 '19 at 11:41

score 29 · Accepted Answer · answered Nov 27 '19 at 21:18

I believe you need to add the preserveSymlinks option in the angular.json located at the project that will consume your library. For instance, I was testing locally, and I added it in my architect -> build -> options.

You will able to find more info here: https://dev.to/nieds/getting-started-building-component-libraries-with-angular-cli-4ncj

Hope this helps!

Dariusz Filipiak · Answer 2 · 2022-04-11T06:40:07.517

4

In angular 13... this allowed me to use symlinks with ng serve

edited Apr 11 '22 at 06:40

answered Feb 26 '22 at 15:46

Dariusz Filipiak

2,858
5
28
39

score 2 · Answer 3 · edited Oct 20 '21 at 03:47

2

Adding this to my tsconfig.lib.json worked for me:

 "angularCompilerOptions": {
    "preserveSymlinks": true
  }

Are you sure you are not overriding this property in tsconfig.lib.prod.json and making a production build?

edited Oct 20 '21 at 03:47

Ryan M

18,333
31
67
74

answered Oct 19 '21 at 19:12

user14989617

21
1

Preserve Symlinks in Angular Libraries

3 Answers3