我使用angular-cli创建了一个Angular 2应用程序,它运行得很好。
由于我需要在资源文件夹的配置文件中设置一些参数(为了使它在dist文件夹中可用),我在论坛中搜索并按照建议加载外部文件的步骤使用APP_INITIALIZER(如此question)
现在问题是,当我在provider元素中添加 app.module.ts ConfigService时,如下所示:
providers: [
ConfigService,
{
provide : APP_INITIALIZER,
useFactory: ConfigLoader,
deps : [ConfigService],
multi : true
},
TestJsonService,
{ provide: HighchartsStatic,
useFactory: highchartsFactory}
],
我用于文件选择(kartik-v/bootstrap-fileinput)
的插件出了问题这是该应用的屏幕截图 没有在提供者中声明ConfigService
似乎css中存在某些冲突。
我真的无法理解问题是什么,以及ConfigService和fileinput插件是否存在冲突的原因。
有没有人有任何想法?谢谢!
修改 下面的一些相关文件可能有助于理解问题:
这是放在资产文件夹中的 config.json
{
"URL_1": "http://url1",
"URL_2": "http://url2",
}
然后我在 environment.ts
中添加对此文件的引用export const environment = {
production: false,
configFile: 'assets/config.json'
};
然后在 config.ts 中,我有一个与JSON元素匹配的类:
export class Configuration {
URL_1: string;
URL_2: string;;
}
以及 config.service.ts 中的相应服务:
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Configuration } from './config';
@Injectable()
export class ConfigService {
private config: Configuration;
constructor(private http: Http) {
}
load(url: string) {
console.log("load config");
return new Promise((resolve) => {
this.http.get(url).map(res => res.json())
.subscribe(config => {
this.config = config;
resolve();
});
});
}
getConfiguration(): Configuration {
return this.config;
}
}
这是整个 app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { TestJsonComponent } from './test-json/test-json.component';
import { TestJsonService } from "./test-json.service";
import { UploadFileComponent } from './upload-file/upload-file.component';
import {DataTableModule,SharedModule} from 'primeng/primeng';
import { ChartModule } from 'angular2-highcharts';
import { HighchartsStatic } from 'angular2-highcharts/dist/HighchartsService';
import { WordCloud } from './prova-word-cloud';
import { SortPipe } from './sort-by.pipe';
import { APP_INITIALIZER } from '@angular/core';
import { ConfigService } from './config.service';
import { environment } from '../environments/environment';
declare var require: any;
export function highchartsFactory() {
var hc = require('highcharts');
var hcm = require('highcharts/highcharts-more');
var sg = require('highcharts/modules/wordcloud');
hcm(hc);
sg(hc);
return hc;
}
export function ConfigLoader(configService: ConfigService) {
return () => configService.load(environment.configFile);
}
@NgModule({
declarations: [
AppComponent,
TestJsonComponent,
UploadFileComponent,
WordCloud,
SortPipe
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
DataTableModule,
ChartModule,
],
providers: [
ConfigService,
{
provide : APP_INITIALIZER,
useFactory: ConfigLoader,
deps : [ConfigService],
multi : true
},
TestJsonService,
{ provide: HighchartsStatic,
useFactory: highchartsFactory}
],
bootstrap: [AppComponent]
})
export class AppModule { }
最后,这是由angular-cli创建的 angular-cli.json ,并修改后添加了所需的css和脚本:
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"name": "anon-cli"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.css",
"styles.scss",
"./assets/bootstrap-fileinput/css/fileinput.min.css",
"./assets/bootstrap-fileinput/themes/explorer/theme.css",
"./assets/bootstrap-table/bootstrap-table.css",
"../node_modules/primeng/resources/themes/omega/theme.css",
"../node_modules/primeng/resources/primeng.css",
"./assets/font-awesome/css/font-awesome.min.css"
],
"scripts": [
"../node_modules/bootstrap/dist/js/bootstrap.min.js" ,
"./assets/bootstrap-fileinput/js/fileinput.min.js",
"./assets/bootstrap-fileinput/js/it.js",
"./assets/bootstrap-fileinput/themes/explorer/theme.js",
"./assets/bootstrap-table/bootstrap-table.js",
"./assets/bootstrap-table/bootstrap-table-it-IT.js"
],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"project": "src/tsconfig.app.json",
"exclude": "**/node_modules/**"
},
{
"project": "src/tsconfig.spec.json",
"exclude": "**/node_modules/**"
},
{
"project": "e2e/tsconfig.e2e.json",
"exclude": "**/node_modules/**"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "scss",
"component": {}
}
}
希望这有帮助!