Question

我在我的角度应用程序中使用了启动服务。这用于调用我的rest API并为用户提供url地址。

我有一个startup.service.ts文件，一个app.config.json文件和一个web.config文件，如下所示：

//startup.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { catchError, map } from 'rxjs/operators';
import { Observable, throwError as _throw } from 'rxjs';

export interface Configuration {
  api: string;
}

@Injectable()
export class StartupService {
  constructor(private httpClient: HttpClient) {}

  private _startupData: Configuration;

  load(): Observable<Configuration> {
    const data = this.httpClient.get<Configuration>('app.config.json').pipe(
      map(config => config),
      catchError((error: any) => _throw(error))
    );
    data.subscribe(d => {
      this._startupData = d;
    });
    return data;
  }

  get startupData(): Configuration {
    return this._startupData;
  }
}

//app.config.json
{
  "api": "http://localhost:64403/api/status"
}

//web.config
<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <staticContent>
      <remove fileExtension=".json" />
      <mimeMap fileExtension=".json" mimeType="application/json" />
    </staticContent>
    <rewrite>
      <rules>
        <rule name="Angular routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/home/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

在我的应用程序模块中，我添加了以下代码

//app.module.ts
export function startupServiceFactory(
  startupService: StartupService
): Function {
  return () => {
    startupService.load();
  };
}

const routes: Routes = [
  { path: '', component: HomeComponent, pathMatch: 'full' },
  { path: '**', component: NotFoundComponent, pathMatch: 'full' }
];

@NgModule({
  declarations: [AppComponent, HomeComponent, NotFoundComponent],
  imports: [
    BrowserModule,
    CommonModule,
    VehicleStatusModule,
    FormsModule,
    HttpClientModule,
    HttpModule,
    RouterModule.forRoot(routes),
    LeafletModule.forRoot(),
    StoreModule.forRoot(reducers),
    EffectsModule.forRoot(effects),
    StoreRouterConnectingModule
  ],
  providers: [
    StartupService,
    {
      // Provider for APP_INITIALIZER
      provide: APP_INITIALIZER,
      useFactory: startupServiceFactory,
      deps: [StartupService],
      multi: true
    },
    // router state composition
    { provide: RouterStateSerializer, useClass: CustomSerializer }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

每当我运行该应用程序时，都会出现以下错误，

TypeError：无法读取未定义的属性“ api”

来自我的app.service.ts。它应该返回字符串：“ http://localhost:64403/api/status”

//app.service.ts
@Injectable({ providedIn: 'root' })
export class VehicleService {

  private API_URL = this.startupService.startupData.fleetApi;

  constructor(
    private http: HttpClient,
    private messageService: MessageService,
    private startupService: StartupService
  ) {}

让我更加困惑的是，这几天前就可以使用，但是在我添加了NGRX存储后，它停止了工作，并给了我上面的错误。我的调试告诉我启动服务工厂没有被调用。有人知道我在这里做错了吗？请让我知道您是否需要我澄清。

Answer 1

从前，我使用APP_INITIALIZER

解决了相同的情况

https://angular.io/api/core/APP_INITIALIZER

https://devblog.dymel.pl/2017/10/17/angular-preload/

Answer 2

一种方法是将您的API_URL更改为 getter

private get API_URL () {
   return this.startupService.startupData.fleetApi;
}

角启动服务工厂永远不会被调用

2 个答案: