如何在Angular混合应用的APP_INITIALIZER钩子中注入$templateCache？

作为刚接触Angular 5和TypeScript的开发者，遇到混合应用的配置问题太正常了，咱们一步步拆解你的问题：

首先明确：这个操作是完全可行的 #

你想在应用初始化前预加载AngularJS模板到$templateCache的思路没问题，ngUpgrade完全支持Angular侧访问AngularJS的核心服务，报错主要是语法/依赖注入配置问题，不是操作本身不可行。

错误原因分析 #

你遇到的"Cannot find name '$templateCacheService'"错误，大概率是两个问题：

1. 名称拼写错误：AngularJS的模板缓存服务名称是$templateCache，没有Service后缀，你可能误写了服务名；
2. TypeScript类型/注入方式问题：AngularJS的服务是基于字符串token的，在Angular中注入时需要明确指定这个token，同时TypeScript默认不知道AngularJS服务的类型，需要做类型声明或临时兼容。

正确实现步骤 #

1. 确保基础配置到位 #

首先确认你的AppModule已经导入并初始化了UpgradeModule，这是ngUpgrade混合应用的基础：

import { NgModule } from '@angular/core';
import { UpgradeModule } from '@angular/upgrade/static';
// 导入你的AngularJS根模块
import { angularjsRootModule } from './your-angularjs-app.module';

@NgModule({
  imports: [UpgradeModule]
})
export class AppModule {
  constructor(private upgrade: UpgradeModule) {
    // 启动AngularJS应用
    this.upgrade.bootstrap(document.body, [angularjsRootModule.name], { strictDi: true });
  }
}

2. 配置APP_INITIALIZER并正确注入$templateCache #

在providers中配置初始化钩子，注意用字符串token'$templateCache'指定依赖，同时处理TypeScript类型问题：

import { APP_INITIALIZER, NgModule } from '@angular/core';
import { UpgradeModule } from '@angular/upgrade/static';
import { HttpClient } from '@angular/common/http';
import { angularjsRootModule } from './your-angularjs-app.module';

// 初始化函数：预加载模板到$templateCache
export function preloadAngularJSTemplates(http: HttpClient, $templateCache: any): () => Promise<void> {
  return () => {
    // 示例：批量加载模板并存入缓存
    return Promise.all([
      // 加载单个模板
      http.get('assets/angularjs-templates/template1.html', { responseType: 'text' })
        .then(content => $templateCache.put('template1.html', content)),
      http.get('assets/angularjs-templates/template2.html', { responseType: 'text' })
        .then(content => $templateCache.put('template2.html', content))
    ]).then(() => {});
  };
}

@NgModule({
  imports: [UpgradeModule],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: preloadAngularJSTemplates,
      // 依赖注入：HttpClient用于加载模板，'$templateCache'是AngularJS服务的token
      deps: [HttpClient, '$templateCache'],
      multi: true // 允许多个初始化钩子
    }
  ]
})
export class AppModule {
  constructor(private upgrade: UpgradeModule) {
    this.upgrade.bootstrap(document.body, [angularjsRootModule.name], { strictDi: true });
  }
}

3. 优化TypeScript类型支持（可选） #

如果不想用any类型，可以安装AngularJS的TypeScript类型定义包，获得更好的代码提示：

npm install @types/angular --save-dev

之后就可以把$templateCache: any改成$templateCache: angular.ITemplateCacheService，让类型检查更严谨。

额外注意点 #

• 如果你的模板数量较多，建议把模板路径整理成数组，循环处理，避免重复代码；
• 确保模板文件的路径正确，Angular的HttpClient会从项目根目录开始查找资源；
• 若使用了AngularJS的ng-include或路由模板，预加载后会直接从缓存读取，不会再发HTTP请求，提升加载速度。

内容的提问来源于stack exchange，提问作者adam0101