Has anyone gotten Ionic 4 to play well with Angular Ivy?

Ionic Framework
1

My real goal is Angular Ivy elements with Ionic subcomponents. But if I can get Ionic 4 to dance with Angular Ivy I’m pretty sure I can get the rest of the way myself. For those interested, a good explainer about how to build web components with Ivy is here. You need to use an API that is still private, but the current expectation is that it will be formally exposed in Angular 9.

I’m getting compilation errors when trying to build Angular Ivy + Ionic for production. I’m not sure whether I’m missing something simple, or whether the two don’t talk together yet.

Thank you!

1 Like
2

We just updated our Ionic 4 / Angular 7 app to Ionic 5 / Angular 9. Took a bit of playing around but ultimately got Ivy working. A lot of it was just updating the app to Angular 9 and fixing rxjs stuff and whatnot.
The confusing part was ultimately that we had some custom @ionic-native packages that were too old. Updating them to 5.21.0+ solved the problem, as did adding ngcc to the postinstall scripts.

3

I am getting the following error. I have tried runninig ngcc. Any other suggestions?

ERROR in node_modules/time-ago-pipe/time-ago.pipe.d.ts:3:22 - error NG6003: Appears in the NgModule.exports of PipesModule, but could not be resolved to an NgModule, Component, Directive, or Pipe class.

This likely means that the library (time-ago-pipe) which declares TimeAgoPipe 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.

4

If you don’t get any better answers, here’s a drop-in replacement:

import {Pipe, PipeTransform} from "@angular/core";
import {formatDistanceToNow, parseISO} from "date-fns";

@Pipe({
  name: "timeAgo",
  pure: false,
})
export class TimeAgoPipe implements PipeTransform {
  transform(value: string | Date): string {
    let d: Date = (value instanceof Date) ? value : parseISO(value);
    let rv = formatDistanceToNow(d);
    return rv;
  }
}
1 Like