Angular 2，嘗試注入配置對象時出錯

我有一段時間試圖讓ASP.NET服務器變量進入我的角度2應用程序。我嘗試使用窗口技巧，但我的應用程序抱怨窗口未定義。所以，我繼續嘗試使用systemjs和main.ts來手動引導我的配置。Angular 2，嘗試注入配置對象時出錯

要告訴你我在做什麼，讓我們開始與我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設置不知道事情在哪裏。

來源

2016-11-14 Josh

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

您需要引用配置類直接在提供。它被小寫和單引號搞亂了。我剛剛在我的應用程序中成功運行。

來源

2016-11-14 23:54:02 nfdavenport

我試着從app.component中移除它，現在systemjs似乎在嘗試運行main.ts中的端點時會得到404。我會嘗試你的建議，但是我擔心如果systemjs不工作，那麼我做的任何事情都不會使它工作。 – Josh

添加您的代碼，我得到「無法找到名稱配置」。我將它換成了'useFactory：（config：Configuration）'，但我仍然收到錯誤「Error：No provider for Configuration」 - 可能是因爲systemjs沒有做它應該做的事 – Josh

是的，我很擔心那。我不知道System.js應該如何讓這個配置可用。你也可以提供它。 – nfdavenport

Angular 2，嘗試注入配置對象時出錯

回答

相關問題