Question

我使用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

这是在提供程序中声明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": {}
  }
}

希望这有帮助！

Angular2：配置文件与APP_INITIALIZER - css冲突？

0 个答案: