我正在使用angular cli来构建一个包含多种语言的网站。我使用ng2-translate进行翻译。
我导入angular-cli.json中定义的languages.json文件:
"assets": [
"assets",
"fonts",
"languages.json"
],
在我的控制器中,我使用require检索数据:
this.languages = require('../../../../languages.json');
加载json文件有效。在部署之后,我尝试在languages.json中更改(添加或删除)某些语言,但即使json文件在dist中更新,更改也不会显示在网站中。我可以更新网站的唯一方法是更改原始的json文件,再次构建应用程序并进行部署。有没有办法通过更新dist中的json文件来改变网站?
为了澄清,languages.json包含一系列语言代码,用于定义网站语言选择器中显示的语言。我希望使用此配置来更改网站中显示的语言,而无需重建应用程序。
这是我的package.json:
{
"name": "myApp",
"version": "1.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"dev": "ng serve --environment=dev",
"acc": "ng serve --environment=acc",
"prod": "ng serve --environment=prod",
"build:dev": "ng build --environment=dev",
"build:acc": "ng build --environment=acc",
"build:prod": "ng build --environment=prod",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^4.0.2",
"@angular/common": "^4.0.0",
"@angular/compiler": "^4.0.0",
"@angular/compiler-cli": "^4.0.0",
"@angular/core": "^4.0.0",
"@angular/forms": "^4.0.0",
"@angular/http": "^4.0.0",
"@angular/platform-browser": "^4.0.0",
"@angular/platform-browser-dynamic": "^4.0.0",
"@angular/platform-server": "^4.0.0",
"@angular/router": "^4.0.0",
"angular2-localstorage": "git+https://github.com/zoomsphere/angular2-localstorage.git#master",
"core-js": "^2.4.1",
"foundation-sites": "^6.3.1",
"ng2-translate": "^5.0.0",
"rxjs": "^5.1.0",
"zone.js": "^0.8.5"
},
"devDependencies": {
"@angular/cli": "1.0.0",
"@types/jasmine": "2.5.46",
"@types/node": "~7.0.12",
"codelyzer": "~3.0.0-beta.4",
"jasmine-core": "~2.5.2",
"jasmine-spec-reporter": "~3.2.0",
"karma": "~1.5.0",
"karma-chrome-launcher": "~2.0.0",
"karma-cli": "~1.0.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-coverage-istanbul-reporter": "^1.0.0",
"protractor": "~5.1.0",
"ts-node": "~3.0.2",
"tslint": "~4.5.1",
"typescript": "^2.2.2"
}
答案 0 :(得分:4)
我现在似乎有完全相同的问题,我使用了本教程:https://aclottan.wordpress.com/2016/12/30/load-configuration-from-external-file/
如果我理解得很好,你需要有一个"外部"您可以修改变量而无需更改应用程序代码并重建?
如果是这样,我在这里做了什么,适用于你的例子:
在本演示中,我将以此为例:
{
"languages": ["en", "fr"]
}
environment.ts:
export const environment = {
production: false,
languageFile: 'assets/languages.json'
};
environment.prod.ts:
export const environment = {
production: true,
languageFile: 'assets/languages.json'
};
例如:
export class Configuration {
languages: string[];
}
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Configuration } from './configuration';
@Injectable()
export class ConfigService {
private config: Configuration;
constructor(private http: Http) {
}
load(url: string) {
return new Promise((resolve) => {
this.http.get(url).map(res => res.json())
.subscribe(config => {
this.config = config;
resolve();
});
});
}
getConfiguration(): Configuration {
return this.config;
}
}
import { APP_INITIALIZER } from '@angular/core';
import { HttpModule } from '@angular/http';
import { ConfigService } from './config.service';
import { environment } from '../environments/environment';
export function ConfigLoader(configService: ConfigService) {
return () => configService.load(environment.languageFile);
}
providers: [
ConfigService,
{
provide : APP_INITIALIZER,
useFactory: ConfigLoader,
deps : [ConfigService],
multi : true
},
....
]
这是组件中的一个例子。
@Injectable()
export class MyComponent {
languages: string[];
constructor(private configService: ConfigService) {}
ngOnInit() {
this.languages = this.configService.getConfiguration().languages;
}
}
就我而言,似乎我必须重新加载服务器才能进行帐户修改。
希望它会有所帮助:)
PS:抱歉此消息中出现最终的英语或技术错误(我在午餐时间写的很快)
答案 1 :(得分:2)
当你使用require()
时,编译器实际上会"内联" main.bundle.js
中的JSON文件,不会使用assets
看起来你需要的是使用http服务来检索JSON文件而不是使用require()