404 Error when trying to load locale in Angular 5

Question

I am trying to load a locale in an Angular 5 project ran from within VS 2015. Reading the docs, i see that in order to add a locale, i should add the following in the app.module:

import { NgModule, LOCALE_ID } from '@angular/core';

...

import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';

registerLocaleData(localeFr);

Unfortunately when loading the project i get an error of:

Error: Fetch error: 404 
  Instantiating https://localhost:44334/node_modules/@angular/common/bundles/common.umd.js/locales/fr
  Loading https://localhost:44334/app/app.module.js
  Loading app/main.js
    at fetch.js:37
    at ZoneDelegate.invoke (zone.js:388)
    at Zone.run (zone.js:138)
    at zone.js:858
    at ZoneDelegate.invokeTask (zone.js:421)
    at Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:595)
    at <anonymous>

What puzzles me is that it tries to find the locale under bundles folder when i have requested it from the locales folder.

Edit

This is my systemjs.config.js file.

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': '/node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      'app': 'app',

      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
      '@angular/common/http': 'npm:@angular/common/bundles/common-http.umd.js',
      '@angular/locale/el': 'npm:@angular/common/locales/el.js',
      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
      'tslib': 'npm:tslib/tslib.js'
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        defaultExtension: 'js',
        meta: {
          './*.js': {
            loader: 'systemjs-angular-loader.js'
          }
        }
      },
      rxjs: {
        defaultExtension: 'js'
      }
    }
  });
})(this);

Answer 1

Using locales from angular package requires additional configuration for SystemJS because they are not included in main bundle, don't have dedicated bundle.

They are also shipped as ES modules that has to be transpiled

SystemJS 0.19.x

Simple version:

System.config({
  paths: {
    'npm:': 'node_modules/'
  },

  transpiler: 'typescript', // we need this to transpile locales

  map: {
    ...
    '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
    '@angular/common/locales': 'npm:@angular/common/locales',
    ...
    'typescript': 'https://unpkg.com/typescript@2.2.1/lib/typescript.js'
                                               ^^^^^^^
                                              required
  },
  packages: {
    ...
    '@angular/common/locales': {
      defaultExtension: 'js'
    },
  }
}

Plunker (I also tested it locally)

If you don't want to use typescript@2.2.1(but rather > 2.2.1) and get it from unpkg.com then you consider the following config.

A slightly complicated version 0.19.x:

System.config({
  paths: {
    'npm:': 'node_modules/'
  },

  transpiler: 'typescript',

  map: {
    ...
    '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
    '@angular/common/locales': 'npm:@angular/common/locales',
    ...
    'typescript': 'npm:/typescript', // assuming typescript > 2.2.1
  },
  packages: {
    ...
    '@angular/common/locales': {
      defaultExtension: 'js'
    },
    "typescript": {
      "main": "lib/typescript.js",
      "meta": {
        "lib/typescript.js": {
          "exports": "ts"
        }
      }
    }
  }
}

Plunker SystemJS@0.19.x, typescript@2.6.2 (tested locally)

SystemJS 0.20.x

There were a lot of breaking changes so you must configure special plugin https://github.com/frankwallis/plugin-typescript

1) Install plugin

npm i -D plugin-typescript

2) Change config like:

System.config({
  paths: {
    'npm:': 'node_modules/'
  },

  transpiler: 'ts-plugin',

  map: {
    ...
    '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
    '@angular/common/locales': 'npm:@angular/common/locales',
    ...
    'typescript': 'npm:/typescript',
    'ts-plugin': 'npm:plugin-typescript'
  },
  packages: {
    ...
    '@angular/common/locales': {
      defaultExtension: 'js'
    },

    "ts-plugin": {
      "main": "lib/plugin.js"
    },
    "typescript": {
      "main": "lib/typescript.js",
      "meta": {
        "lib/typescript.js": {
          "exports": "ts"
        }
      }
    }
  }
}

As you can see now we use plugin-typescipt instead of just typescipt. But internally this plugin requires typescipt so we should also keep it in our config

Plunker SystemJS@0.20.x typescript@2.6.2 (tested locally)