如何将$ templateCache注入角度混合APP_INITIALIZER挂钩？

Question

我是Angular5和TypeScript的新手，所以很可能这是我忽略的一件简单的事情。

我有一个使用ngUpgrade并排运行AngularJS和Angular5的Angular混合应用程序。 我试图将$templateCache注入OnAppInit函数中，以便可以在应用程序完全初始化之前加载所有AngularJS HTML模板。 我收到错误消息“ 找不到名称'$ templateCacheService' ”，如下所示。 我的语法错误还是这不可能？

我在“ upgrade upgraded-providers.ts ”中“升级” $templateCache ，如下所示：

import { InjectionToken, Directive, ElementRef, Injector } from '@angular/core';
import { UpgradeComponent } from '@angular/upgrade/static';

export const $templateCacheService = new InjectionToken<any>('$templateCacheService');
export const $templateCacheServiceProvider = {
  provide: $templateCacheService,
  useFactory: (i: any) => i.get('$templateCache'),
  deps: ['$injector']
}; 

然后在app.module.ts ，我尝试将其注入OnAppInit ：

import { NgModule, APP_INITIALIZER, Inject } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatCommonModule } from '@angular/material';
import { FlexLayoutModule } from '@angular/flex-layout';
import { HttpClientModule, HttpClient, HTTP_INTERCEPTORS } from '@angular/common/http';
import { downgradeInjectable, UpgradeModule, downgradeComponent } from '@angular/upgrade/static';
import { environment } from '../environments/environment';

import {
  $templateCacheServiceProvider,
  $templateCacheService
} from './upgraded-providers';
import { AppComponent } from './app.component';
import { GlobalVarsService } from './core/global-vars.service';
import { WinAuthInterceptor } from './core/interceptors/win-auth.interceptor';

declare var angular: any;

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatCommonModule,
    FlexLayoutModule,
    HttpClientModule,
    UpgradeModule
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: WinAuthInterceptor,
      multi: true
    },
    {
      provide: APP_INITIALIZER,
      useFactory: OnAppInit,
      multi: true,
      deps: [GlobalVarsService, HttpClient, $templateCacheService]
    },
    GlobalVarsService,
    $templateCacheServiceProvider
  ]
})
export class AppModule {
  constructor(private upgrade: UpgradeModule, private http: HttpClient) { }
  ngDoBootstrap() {
    angular.module('app').factory('globalVars', downgradeInjectable(GlobalVarsService));
    this.upgrade.bootstrap(document.body, ['app'], { strictDi: true });
  }
}

////// THIS NEXT LINE GETS error TS2304: Cannot find name '$templateCacheService' /////
export function OnAppInit(globalVars: GlobalVarsService, http: HttpClient, $templateCache: $templateCacheService) { 
  return (): Promise<any> => {
    return new Promise((resolve, reject) => {
      http.get(environment.apiBase + '/api/meta/data').subscribe(x => {
        globalVars.MetaData = x;
        globalVars.VersionNumber = globalVars.MetaData.versionNumber;
        globalVars.IsDebugBuild = globalVars.MetaData.isDebugBuild;
        globalVars.User = globalVars.MetaData.user;
        globalVars.ApiBase = environment.apiBase;
        globalVars.Templates.forEach(template => {
          $templateCache.put(template.Item1, template.Item2);
        });
        resolve();
      });
    });
  };
}

Answer 1

这是TypeScript类型错误，它不会影响应用程序的工作方式（只要忽略编译错误）。

templateCacheService在这里不是有效的类型，因为$templateCacheService是变量（注入令牌），而不是类型或接口。

只有Angular类构造函数会使用DI类型进行注释。 由于工厂功能使用deps属性进行注释，因此功能签名中的类型仅用于提供类型安全性。 如果不需要，可以跳过类型：

export function OnAppInit(
  globalVars: GlobalVarsService, http: HttpClient,
  $templateCache
) { ... }

否则应使用适当的类型。 $templateCache是具有get ， put等方法的对象。 AngularJS @types/angular类型定义提供了适当的类型。 它将类似于：

export function OnAppInit(
  globalVars: GlobalVarsService, http: HttpClient,
  $templateCache: ng.ITemplateCacheService
) { ... }