Intl.js 404 Not Found

[tkallevik]

Hi

When running the a bundled version of my application I get the following error in Safari:

[Debug] DEBUG [aurelia] – "Loading plugin aurelia-i18n." (example.com, line 9)
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (Intl.js@0.1.4.js, line 0)

Here is some parts of my config.js (I have exluded the parts I meant to be irrelevant in this case):

map: {
    ...
    "npm:aurelia-i18n@0.4.6": {
      "Intl.js": "github:andyearnshaw/Intl.js@0.1.4",
      "aurelia-binding": "npm:aurelia-binding@1.0.0-beta.1.0.5",
      "aurelia-dependency-injection": "npm:aurelia-dependency-injection@1.0.0-beta.1.0.1",
      "aurelia-event-aggregator": "npm:aurelia-event-aggregator@1.0.0-beta.1",
      "aurelia-loader-default": "npm:aurelia-loader-default@1.0.0-beta.1.0.2",
      "aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1.0.2",
      "aurelia-templating": "npm:aurelia-templating@1.0.0-beta.1.0.3",
      "aurelia-templating-resources": "npm:aurelia-templating-resources@1.0.0-beta.1.0.4",
      "i18next": "github:i18next/i18next@1.11.2"
    },
    ...
},
bundles: {
    "aurelia": [
      "github:components/jquery@2.2.0",
      "github:components/jquery@2.2.0/jquery",
      "github:i18next/i18next@1.11.2",
      "github:i18next/i18next@1.11.2/i18next",
      "github:jspm/nodelibs-process@0.1.2",
      "github:jspm/nodelibs-process@0.1.2/index",
      "github:twbs/bootstrap@3.3.6",
      "github:twbs/bootstrap@3.3.6/css/bootstrap.css!github:systemjs/plugin-text@0.0.3",
      "github:twbs/bootstrap@3.3.6/js/bootstrap",
      ...
      "npm:aurelia-i18n@0.4.6",
      "npm:aurelia-i18n@0.4.6/aurelia-i18n",
      "npm:aurelia-i18n@0.4.6/base-i18n",
      "npm:aurelia-i18n@0.4.6/defaultTranslations/relative.time",
      "npm:aurelia-i18n@0.4.6/df",
      "npm:aurelia-i18n@0.4.6/i18n",
      "npm:aurelia-i18n@0.4.6/nf",
      "npm:aurelia-i18n@0.4.6/relativeTime",
      "npm:aurelia-i18n@0.4.6/rt",
      "npm:aurelia-i18n@0.4.6/t",
      "npm:aurelia-i18n@0.4.6/utils",
      ...
   ]
}

Can you help me solve this?

[EisenbergEffect]

More than likely you need to actually add it to your bundle config so that it ends up in the distributable bundle.

[tkallevik]

Ok, I just thought that it would be added since it is a dependency for the aurelia-i18n plugin, which is added to the bundle. i18next is another example of a dependency for that plugin, and that is added without me explicitly saying so.

[EisenbergEffect]

@zewa666 Can you provide input on this? Is the Intl.js library statically imported or is it dynamically imported? I'm assuming it is loaded based on need. If that is the case, can you identify which browsers need it and which don't? Also can you update the docs to indicate that if supporting browsers that need it, then the bundle config will need to be appended?

[zewa666]

@EisenbergEffect yes the dependency on the i18n polyfill is a dynamic one. Browsers like Safari or IE < 11 and Node.JS do not provide a default implementation. Will create the README update.

[doktordirk]

@zewa666 stupid question: other than in the tests i don't find a dependency on Intl.js anywhere. in that case moving it to devDependency would remove some problems

[zewa666]

Intl.js is loaded on demand if needed. Means if the browser or environment does not fully or at all support the Javascript Internationalization API, the plugin will load the polyfill.

So no, moving it to a devDependency thus is no option

[don-bluelinegrid]

Where is the documentation on how to bundle the polyfill?

This is working fine on Chrome, but on Safari I see:

"Intl API is not available. Trying to load the polyfill."

This occurs even when running in live dev mode (npm start, in the typescript-webpack skeleton).

How do we get the polyfill to be included?

Thanks,
Don

[don-bluelinegrid]

OK, I do see the README information about the polyfill, but it is referring to modifying the aurelia bootstrap() function.
https://github.com/aurelia/i18n#internationalization-api-polyfill

However, in the typescript-webpack skeleton, there is no bootstrap() function - it uses the configure() function in main.js. Can we also get documentation on how to adjust the aurelia configure() function for this?

Thanks,
Don

[ben-girardet]

I'm having the same issue. Any documentation on how to include the polyfill when using Aurelia with aurelia-cli ?

[zewa666]

@ben-girardet the best thing is to follow this guide on how to install the plugin with AureliaCLI. http://pragmatic-coder.net/installing-the-aurelia-i18n-plugin-in-a-cli-app/

on top of that in order to install the Polyfill, you'd additionally run
npm install intl
and add the following to the dependencies in aurelia.json

{
            "name": "intl",
            "path": "../node_modules/intl/dist",
            "main": "Intl.min"  <--- or Intl.complete
          },

[ben-girardet]

Thanks @zewa666 I was missing the part in the aurelia.json