Question

我正在按照本教程中的说明尝试将Angular 2应用程序升级到Angular 5：

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

我的项目构建成功，但在浏览器中继续出现以下错误： common.js：999未捕获的错误：缺少语言环境“ DE”的语言环境数据。

我尝试了以下链接中建议的解决方案，但未成功：

Angular 5 Breaking change - manually import locale

这是我在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"
 },

最后，我的app.module.ts文件如下所示：

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 {
}

我该如何解决这个问题？

Answer 1

默认情况下，Angular仅包含en-US的语言环境数据。如果将LOCALE_ID的值设置为另一个语言环境，则必须导入该新语言环境的语言环境数据。当您在ng serve和ng build中使用参数--configuration时，CLI会为您导入语言环境数据。

如果要导入其他语言的语言环境数据，则可以像这样在app.module.ts中手动进行操作：

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);

更多详细信息，请参见here.

Angular 2升级到Angular 5

1 个答案: