Question

我是Angular5和TypeScript的新手，所以很有可能它是一个我忽略的简单事物。

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

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

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
) { ... }

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

1 个答案: