Question

我有点想把ASP.NET服务器变量放到我的angular 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并声明提供者。

接下来是我的主要内容，这种方法的面包和黄油。

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调用出错：

无法加载资源：服务器响应状态为404（未找到）（app / main.ts）

就像systemjs找不到主要端点一样，我不知道为什么。

编辑2

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

已编译的ts文件位于/ dist

我的索引页面位于根

中

在包含所有ts文件的文件夹中，main.ts位于app文件夹

中

我认为我上面发布的默认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]
    }]
})

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

编辑：

在bootstrap中试试这个：

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

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

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

1 个答案: