Angular 2 to Angular 5 upgrade issue

Question

I am trying to upgrade my Angular 2 Application to Angular 5 by following the instructions in this tutorial:

https://vitalflux.com/how-to-upgrade-from-angular-2-to-angular-5-apps/

My project builds successfully but I keep on getting the following error in browser: common.js:999 Uncaught Error: Missing locale data for the locale "DE".

I have tried the solution suggested in the following link without success:

Angular 5 Breaking change - manually import locale

Here are my dependencies in package.json:

"dependencies": {
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/platform-server": "^5.0.0",
    "@angular/router": "^5.0.0",
    "@angularclass/conventions-loader": "1.0.2",
    "@angularclass/hmr": "1.2.0",
    "@angularclass/hmr-loader": "3.0.2",
    "@angularclass/request-idle-callback": "1.0.7",
    "@angularclass/webpack-toolkit": "1.3.3",
    "awesome-typescript-loader": "5.2.0",
    "core-js": "2.5.7",
    "ie-shim": "0.1.0",
    "lodash": "4.17.10",
    "ng2-radio-group": "0.0.6",
    "node-sass": "4.9.0",
    "rxjs": "6.2.1",
    "rxjs-compat": "6.2.1",
    "sass-loader": "4.1.1",
    "underscore": "1.8.3",
    "underscore.string": "3.3.4",
    "zone.js": "0.8.26"

    "devDependencies": {
    "@angular/cli": "^1.6.8",
    "@angular/compiler-cli": "^5.0.0",
    "@angular/language-service": "^5.0.0",
    "@types/chai": "3.4.32",
    "@types/core-js": "2.5.0",
    "@types/hammerjs": "2.0.33",
    "@types/jasmine": "2.2.34",
    "@types/lodash": "4.14.110",
    "@types/node": "6.0.38",
    "@types/protractor": "1.5.20",
    "@types/selenium-webdriver": "2.44.29",
    "@types/source-map": "0.1.27",
    "@types/uglify-js": "2.0.27",
    "@types/webpack": "1.12.34",
    "angular2-hmr": "0.8.0",
    "angular2-template-loader": "0.6.0",
    "assets-webpack-plugin": "3.8.4",
    "clean-webpack-plugin": "0.1.19",
    "compression-webpack-plugin": "1.1.11",
    "copy-webpack-plugin": "4.5.2",
    "cpx": "1.5.0",
    "cross-env": "3.1.3",
    "css-loader": "0.26.1",
    "dts-generator": "2.0.0",
    "extract-text-webpack-plugin": "3.0.2",
    "file-loader": "0.9.0",
    "fs-extra": "2.0.0",
    "gh-pages": "0.12.0",
    "git-rev": "0.2.1",
    "html-elements-webpack-plugin": "2.0.0",
    "html-webpack-plugin": "3.2.0",
    "istanbul-instrumenter-loader": "1.1.0",
    "jasmine-core": "2.5.2",
    "karma": "1.3.0",
    "karma-chrome-launcher": "2.0.0",
    "karma-coverage": "1.1.1",
    "karma-jasmine": "1.0.2",
    "karma-mocha-reporter": "2.0.0",
    "karma-remap-coverage": "0.1.3",
    "karma-sourcemap-loader": "0.3.7",
    "karma-webpack": "2.0.1",
    "npm-run-all": "4.0.1",
    "on-build-webpack": "0.1.0",
    "parse5": "1.5.1",
    "postcss-loader": "0.10.0",
    "precss": "1.4.0",
    "raw-loader": "0.5.1",
    "replace": "0.3.0",
    "rimraf": "2.5.2",
    "sass-loader": "4.1.1",
    "source-map-loader": "0.1.6",
    "style-loader": "0.13.1",
    "to-string-loader": "1.1.5",
    "ts-helpers": "1.1.2",
    "ts-node": "0.9.1",
    "tslint": "3.9.0",
    "tslint-config-swimlane": "2.0.1",
    "tslint-loader": "2.1.3",
    "typescript": "2.9.2",
    "url-loader": "0.5.7",
    "webpack": "4.14.0",
    "webpack-cli": "3.0.8",
    "webpack-combine-loaders": "2.0.3",
    "webpack-deploy2war": "0.1.1",
    "webpack-dev-server": "3.1.4",
    "webpack-md5-hash": "0.0.6",
    "webpack-merge": "4.1.3",
    "webpack-notifier": "1.6.0",
    "webpack-version-file-plugin": "0.3.3"
 },

Lastly, my app.module.ts file looks as follows:

import {LOCALE_ID} from '@angular/core';
import { registerLocaleData } from '@angular/common';
import localeDE from '@angular/common/locales/de';
registerLocaleData(localeDE);
....

providers: [
    Configuration.getProviders(),
    { provide: LOCALE_ID, useValue: 'de' },
]

})

export default class AppModule {
}

How can I solve this problem?

Answer 1

By default, Angular only contains locale data for en-US. If you set the value of LOCALE_ID to another locale, you must import locale data for that new locale. The CLI imports the locale data for you when you use the parameter --configuration with ng serve and ng build.

If you want to import locale data for other languages, you can do it manually in app.module.ts like this:

import { registerLocaleData } from '@angular/common';
import localeDe from '@angular/common/locales/de';
import localeDeExtra from '@angular/common/locales/extra/de';

registerLocaleData(localeDe, 'de-DE', localeDeExtra);

More details refer here.