Angular 2，尝试注入配置对象时出错

Question

我有一段时间试图让ASP.NET服务器变量进入我的角度2应用程序。我尝试使用窗口技​​巧，但我的应用程序抱怨窗口未定义。所以，我继续尝试使用systemjs和main.ts来手动引导我的配置。

要告诉你我在做什么，让我们开始与我config.service

import { Injectable, Inject } from "@angular/core"; 

export class Configuration { 
    BASE_WEB_API_URL: string; 
} 

@Injectable() 
export class ConfigService { 
    constructor(
     @Inject("configuration") private config: Configuration 
    ) { 
     console.log("Injected config:", this.config); 
    } 
} 

非常直接。接下来是我的app.component

import { Component } from '@angular/core'; 

import { ConfigService } from '../../utils/config.service'; 

@Component({ 
    selector: 'app', 
    template: require('./app.component.html'), 
    providers: [ConfigService] 
}) 
export class AppComponent { 
    constructor(private configService: ConfigService) { } 
} 

在这里，我允许DI处理我的ConfigService并声明提供程序。

接下来是我的main.ts，这种方法的面包和黄油。

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 

import { AppComponent } from './components/app/app.component'; 
import { Configuration } from "./utils/config.service"; 

export function RunApplication(baseApiUrl: string) { 

    var config = new Configuration(); 
    config.BASE_WEB_API_URL = baseApiUrl; 

    console.log('Configuration setup', config); 

    platformBrowserDynamic([{ provide: 'configuration', useValue: config }]) 
     .bootstrapModule(AppComponent); 
} 

接下来是我的布局页面上有systemjs调用我的main.RunApplication脚本。这被放置在页面的标题中。

<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.26/system.js"></script> 

<script> 
    System.config({ 
    transpiler: 'typescript', 
    typescriptOptions: { emitDecoratorMetadata: true }, 
    packages: {'app': {defaultExtension: 'ts'}} 
    }); 

    System.import('app/main').then(

     (m) => { 

      var apiUrl = "@appSettings.BaseUrls.Api"; 

      m.RunApplication(apiUrl); 

     }, console.error.bind(console)); 
</script> 

我感到非常沮丧，因为即使简单的窗口解决方案没有工作，我需要获取api url传递。我会很感激这里的一些指导我做错了什么。

感谢

编辑：

我发现，如果我把配置了AppComponent的，编译错误消失，但现在我得到一个错误与systemjs接听来电时显示我的控制台：

Failed to load resource: the server responded with a status of 404 (Not Found) (app/main.ts)

这就像systemjs无法找到主要端点，我不知道为什么。

EDIT 2

我认为这是我对我的systemjs配置。我的网站有这样的布局：

编译TS文件在/ DIST

我的索引页是根

持有我所有的TS文件的文件夹中

，main.ts是应用程序文件夹

我在想上面发布的默认systemjs设置不知道事情在哪里。

Answer 1

在app.component试试这个：

@Component({ 
    selector: 'app', 
    template: require('./app.component.html'), 
    providers: [{ 
     provide: ConfigService , 
     useFactory: (config:Configuration) => { 
      return new ConfigService(config); 
     }, 
     deps: [Configuration] 
    }] 
}) 

您使用提供程序的快捷方式，它可能无法在这种情况下工作。

编辑：

试试这个自举：

platformBrowserDynamic([{ provide: Configuration, useValue: config }]) 
     .bootstrapModule(AppComponent); 

您需要引用配置类直接在提供。它被小写和单引号搞乱了。我刚刚在我的应用程序中成功运行。