ng-sdk is not an Ivy distribution

[TimoPot]

When @bloomreach/ng-sdk is processed by the ngcc compiler with --properties es2020 then I get the following message:

Processing legacy "View Engine" libraries:

• @bloomreach/ng-sdk [module/esm5] (https://github.com/bloomreach/spa-sdk)
• @bloomreach/ng-sdk [main/umd] (https://github.com/bloomreach/spa-sdk) Encourage the library authors to publish an Ivy distribution.

After this when I try to compile the angular app I get the following:

Error: apps/rechtspraak-dxp/src/app/app.module.ts:45:28 - error NG6002: 'BrSdkModule' does not appear to be an NgModule class.

45 imports: [BrowserModule, BrSdkModule, AppRoutingModule, ComponentsLibModule],

  node_modules/@bloomreach/ng-sdk/dist/lib/br-sdk.module.d.ts:1:22
    1 export declare class BrSdkModule {

This likely means that the library (@bloomreach/ng-sdk) which declares BrSdkModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if 

so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

× Failed to compile.

When processed with --properties es2015 this issue does not occur and compilation succeeds.

Please enable the ng processing for es2020 or newer.

[beetlerom]

Thank you for raising this issue Timo.

@antoniodesousa Is this something we could tackle as part of the Angular 15 support project?

[antoniodesousa]

Possible, it will need testing before I can guarantee that it will be supported.

[TimoPot]

I'm not sure why this is related to angular 15. We are using angular 14 with @nrwl (NX) 14. the upgrade to angular 14 and nrwl 14 changed the postcompile to use es2020. I explicitly changed that back to es2015 to prevent the bloomreach error.

[beetlerom]

@TimoPot It's not explicitly related to Angular 15, but we plan to upgrade the SDK to support it and we could pick this improvement up as part of that effort.

[beetlerom]

Thanks @antoniodesousa!

[TimoPot]

Thanks @beetlerom When is v19 scheduled for release?

[beetlerom]

@TimoPot We don't have an expected release date yet, but we are starting development on it this week.

[beetlerom]

@TimoPot This has now been addressed with the release of v19.0.0 as we have switched to the Ivy compiler in order to support angular >=14. Please see the release notes for more details.

[TimoPot]

I update the project and change the ngcc compiler with --properties es2020 back to compile with es2020.

The npm install went well and the original errors are gone. But running the project I get:

Error: Module not found: Error: Can't resolve '@bloomreach/ng-sdk' in 'C:\Projecten....\src\app'

Error: ....../src/app/app.component.html:1:1 - error NG8001: 'br-page' is not a known element:

1. If 'br-page' is an Angular component, then verify that it is part of this module.
2. If 'br-page' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

It does not see @bloomreach/ng-sdk as a valid thing

[beetlerom]

@TimoPot Which command are you running and in which package? Can you maybe share a repository where I can see the issue? Also, have you checked the example angular app ?

[TimoPot]

I take the following steps:

• remove node_modules
• npm cache clean
• npm i --legacy-peer-deps

after the npm i the following cmd is executed:

• node ./decorate-angular-cli.js && ngcc --properties es2020 browser module main

Then I start the Angular app by npm run start.

When the following is executed with es2015 then there are no issues. node ./decorate-angular-cli.js && ngcc --properties es2015 browser module main

[antoniodesousa]

I update the project and change the ngcc compiler with --properties es2020 back to compile with es2020.

The npm install went well and the original errors are gone. But running the project I get:

Error: Module not found: Error: Can't resolve '@bloomreach/ng-sdk' in 'C:\Projecten....\src\app'

Error: ....../src/app/app.component.html:1:1 - error NG8001: 'br-page' is not a known element:

1. If 'br-page' is an Angular component, then verify that it is part of this module.
2. If 'br-page' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

It does not see @bloomreach/ng-sdk as a valid thing

@TimoPot I was having the same issue that you are describing when I used the library in an Angular 14 app. I got rid of the compilation errors with skipLibCheck. Not the best solution but I just wanted to make sure the library was backwards compatible with Angular 14. Everything worked as expected after that. I think the errors occurred because of incompatible typescript versions. The library was build using typescript 4.9.4.

Another option would be to upgrade to Angular 15. I can guarantee the library works 100% with that version. I tested es2022 in the example app and it compiled without any errors.

[beetlerom]

@TimoPot Can you confirm if this worked for you?

[TimoPot]

@beetlerom I will look into it and get back to you.

[TimoPot]

@beetlerom @antoniodesousa

I don't know what changed... but it is working now. Maybe because its 19.0.1 now.

skipLibCheck was already present in my tsconfig.

[beetlerom]

Hey @TimoPot , yes, this has been fixed with the v19.0.1 release, it was due to a mistake on our end that we just identified. Thanks for all the help!