6

I'm new to Ionic2 / Angular2 & I've been looking around and found several solutions for what needs to be done to fix the polyfill issue with using the intl date formatting (example answer here: Ionic 2, Using Angular 2 Pipe breaks on iOS—"Can't find variable: Intl" )

but what I do not understand and what no tutorial/stack overflow explanation has helped me to figure out, is where exactly and how exactly to accomplish this. I did npm install to get the intl package added to my node modules, but everything just says "then import it" but I don't know where to do that since I do not have a polyfill.ts file I could import it into, there's just the build/polyfill.js file & I tried importing directly into the .ts file which uses the intl date manipulation, but that did not resolve the issue.

It's possible that I don't comprehend something quite fundamental and that's why no one is explicitly stating where you'd need to import it, but can someone explain to me how to import this or refer me to a resource to explain what I am not understanding.

Community
  • 1
  • 1
Jake Boomgaarden
  • 3,394
  • 1
  • 17
  • 31
  • 1
    Normally the polyfill.ts is imported in the app module so importing the needed polyfill in he app module should do the trick – Owain van Brakel Feb 20 '17 at 21:35
  • you're the best! I was dumb and didn't have the path right on the import.. your comment reassured me that I was on the right track and the fix worked. I had done import 'intl'; but I needed to do import 'intl/dist/Intl.complete.js'; Thank you! If you want to copy/paste what you wrote into an answer I'll accept it. – Jake Boomgaarden Feb 20 '17 at 21:55
  • I'm glad it worked! Those paths are always kinda weird to figure out... I've made an answer from the comment! – Owain van Brakel Feb 20 '17 at 22:07

1 Answers1

12

Normally the polyfill.ts is imported in the app module file that'll bootstrap your application normally this is the main.ts file, so importing the needed polyfill in the app module bootstrap file should do the trick.

Here is an example:

main.ts

import './polyfills.ts';

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {enableProdMode} from '@angular/core';

import {environment} from './environments/environment';
import {AppModule} from './app/app.module';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

polyfill.ts

// All needed polyfills for example web animations
import 'web-animations-js/web-animations.min';
Owain van Brakel
  • 3,109
  • 1
  • 15
  • 22
  • Why should it be in main.ts (please note that in the latest ionic there is main.ts and main.prod.ts) and not in app.module.ts? – Alex Ryltsov Sep 18 '17 at 15:35
  • @AlexRyltsov that depends on your environment, in the example I gave the main.ts its bootstrap method is mutated by a webpack plugin depending on environment variables (development or production). If you have separate files for both you either have to include the polyfills in both files or a file that's used in both development and production. – Owain van Brakel Sep 19 '17 at 10:24