Angular Ivy - Plugin no longer works when updating to Angular 16

[darklight365]

Which platform(s) does your issue occur on?

• Both iOS and Android

Please, provide the following version numbers that your issue occurs with:

• CLI: 8.5.3
• iOS: XCode version 14.3.1
• nodejs: v16.20.0
• Runtime(s): ~8.5.0
• Plugin(s): ^8.0.2

Including the latest release of nativescript-webview-ext within a project that runs Angular 15 (and above) will produce the following warning:

Processing legacy "View Engine" libraries:
- nativescript-localize-angular [es2015/esm2015] (https://github.com/NativeScript/plugins.git)
- nota-webview-ext-angular [es2015/esm2015] (https://github.com/Notalib/nativescript-webview-ext.git)
- nota-webview-ext-angular [es2015/esm2015] (https://github.com/Notalib/nativescript-webview-ext.git)
Encourage the library authors to publish an Ivy distribution.

Updating the packages to use Angular 16 results in the following error:

ERROR in src/app/app.module.ts:12:51 - error NG6002: 'WebViewExtModule' does not appear to be an NgModule class.

12   imports: [NativeScriptModule, AppRoutingModule, WebViewExtModule],
                                                     ~~~~~~~~~~~~~~~~

  node_modules/@nota/nativescript-webview-ext/angular/index.d.ts:2:22
    2 export declare class WebViewExtModule {
                           ~~~~~~~~~~~~~~~~
    This likely means that the library (@nota/nativescript-webview-ext/angular) which declares WebViewExtModule 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.

Is there any code involved?

ns create new-ng-app --ng
npm i @nota/nativescript-webview-ext

// Edit the app.module to import WebViewExtModule

// Update the item-detail.component.html as follows (and access the detail page):
<ActionBar title="Details"></ActionBar>

<FlexboxLayout flexDirection="column">
  <FlexboxLayout class="m-15">
    <Label class="h2" [text]="item.id + '. '"></Label>
    <Label class="h2" [text]="item.name"></Label>
  </FlexboxLayout>
  <Label class="h4 m-15" [text]="item.role"></Label>
  <WebView flexGrow="1" src="https://nota.dk"></WebView>
</FlexboxLayout>

// Upgrading package.json to Angular 16 fails to build (let me know if you need that package.json).  Building with Angular 15 produces the warning message, but still builds the app.

[darklight365]

An observation - switching out the following in the app.module allows everything to work as expected (along with an npm i of the community plugin):
import { WebViewExtModule } from '@nativescript-community/ui-webview/angular'

@m-abs - Is the recommendation to switch over to the @nativescript-community/ui-webview implementation?

[m-abs]

@darklight365
It would probably be best to switch to another plugin, as we don't prioritise maintaining this plugin anymore. We have moved away from nativescript.

[darklight365]

@m-abs - Thanks for the update. Could you possibly document that this plugin/repository is no longer maintained and that the recommendation is to find alternatives?

https://github.com/nativescript-community/ui-webview should be a drop in replacement for this plugin, with the exception of updating the module/component name.