Angular linker is not working

[Boshskoski]

Which @angular/* package(s) are the source of the bug?

Don't known / other

Is this a regression?

Yes

Description

My application is using external library from our company. That library internally is using these two libraries

https://www.npmjs.com/package/@ng-select/ng-select?activeTab=readme https://www.npmjs.com/package/@ng-select/ng-option-highlight

We used angular version 10. Then we had not compilation time issues. We maked update to version 12. After our update I got JIT compilation unavailable. I debugged the problem and I saw that the problem is in this two libraries because their compilationMode is set to 'partial'.

https://github.com/ng-select/ng-select/blob/master/src/ng-option-highlight/tsconfig.lib.json https://github.com/ng-select/ng-select/blob/master/src/ng-select/tsconfig.lib.json

So i tried using angular linker for that @angular/compiler-cli/linker/babel as mentioned in the documentation

https://angular.io/guide/creating-libraries#consuming-partial-ivy-code-outside-the-angular-cli

But it is not working and I got error when i try that. I am not able to reproduce the issue on other custom created angular 12 project which directly installs these two dependencies.

The company library name is xcomponent-angular. In addition I am attaching files from my application

• package.json
• angular.json
• tsconfig.json
• extra-webpack.config.js

So my application and the other library from the company are using same angular version. When they build the project and upload they don't get this JIT compilation time error. But when I use their library I am getting this error after I build my application and I upload on production. Locally the ng build is passing and don't give me any errors, so it happens only when I upload the build.

files.zip

Please provide the exception or error you saw

JIT compilation failed for directive class t{constructor(t,e){this.elementRef=t,this.renderer=e,this.element=this.elementRef.nativeElement}ngOnChanges(){this._canHighlight&&this._highlightLabel()}ngAfterViewInit(){this.label=this.element.inne…

Uncaught Error: The directive 't' needs to be compiled using the JIT compiler, but '@angular/compiler' is not available.

The directive is part of a library that has been partially compiled.
However, the Angular Linker has not processed the library such that JIT compilation is used as fallback.

Ideally, the library is processed using the Angular Linker to become fully AOT compiled.
Alternatively, the JIT compiler should be loaded by bootstrapping using '@angular/platform-browser-dynamic' or '@angular/platform-server',
or manually provide the compiler with 'import "@angular/compiler";' before bootstrapping.
    at yi (core.umd.js:4382:19)
    at t.ɵɵngDeclareFactory (core.umd.js:33949:24)
    at ng-select-ng-option-highlight.mjs:44:35
    at 0mKc (ng-select-ng-option-highlight.mjs:45:249)
    at l (bootstrap:79:22)
    at 3jgy (ngx-virtual-scroller.js:1242:15)
    at l (bootstrap:79:22)
    at Object.RiVO (portal.service.ts:6:27)
    at l (bootstrap:79:22)
    at Module.zUnb (app-routing.module.ts:59:15)

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 10.2.1
Node: 14.15.5
OS: win32 x64

Angular:
...
Ivy Workspace:

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1002.1 (cli-only)
@angular-devkit/core         10.2.1 (cli-only)
@angular-devkit/schematics   10.2.1 (cli-only)
@schematics/angular          10.2.1 (cli-only)
@schematics/update           0.1002.1 (cli-only)

Anything else?

No response

[JoostK]

The Angular team does not support custom build configurations, but a quick glance at your webpack config reveals an issue with the test query: it selects .d.ts files whereas it should be targeting .js/.mjs files as documented.

[Boshskoski]

@JoostK I tried also with .js/.mjs files. Why it does not support when on the documentation page they show example how can we deal with partially compiled librararies ? That is why I use @angular/compiler-cli/linker/babel

[JoostK]

The Angular linker is supported, but integrations in custom Webpack configurations is not. StackOverflow is a more appropriate platform for troubleshooting Webpack configuration issues.

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