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!

Jerky

Does it make a difference if you add "preserveSymlinks": true to the tsconfig.json file for the application consuming the library? – Henka

@R.Richards I saw this in this issue on git: github.com/angular/angular/issues/31989#issuecomment-523375803 – Jerky

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. – Jerky

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. – Henka

@Jerky did you find any solution for this? I am facing this same issue. – Cache

Answer 1

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!

Trueman

Answer 2

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

Inefficacy

Answer 3

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?

Benign

Answer 4

For me, it worked to add the following code section to the ng-packagr library's tsconfig.json file:

{
  "compilerOptions": {
    "paths": {
      "@angular/*": [ "./node_modules/@angular/*" ]
    }
  }
}

Setup: Angular 14, ng-packagr 14.2.2

Prosperus

Can you explain this further? I haven't seen this before. – Santosantonica