Ionic 3应用浏览器测试遇TranslateService依赖解析错误求助

我之前也碰到过一模一样的问题！这种Can't resolve all parameters的错误看起来是依赖注入的元数据出了问题，大概率和版本兼容、缓存损坏或者配置缺失有关，给你几个亲测有效的解决步骤：

1. 彻底清理依赖缓存并重装 #

单纯删除node_modules有时候不够，缓存里的损坏文件可能还在作祟，执行以下命令：

# 删除本地依赖包
rm -rf node_modules
# 删除锁文件（npm用package-lock.json，yarn用yarn.lock）
rm package-lock.json
# 强制清理npm缓存
npm cache clean --force
# 重新安装依赖
npm install

2. 检查TranslateModule的AppModule配置是否正确 #

确保你在根模块里正确导入了TranslateModule并配置了加载器，而且要用@angular/common/http的HttpClient（Ionic 3已经支持这个模块了）：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { MyApp } from './app.component';

// 必须导出这个工厂函数，供TranslateModule使用
export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

@NgModule({
  declarations: [MyApp],
  imports: [
    BrowserModule,
    HttpClientModule, // 别忘了导入这个！
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: createTranslateLoader,
        deps: [HttpClient]
      }
    })
  ],
  bootstrap: [MyApp]
})
export class AppModule {}

如果之前用的是旧的Http模块，一定要换成HttpClient，因为你的@ngx-translate/http-loader@2.0.1是依赖它的。

3. 确保TypeScript配置开启元数据支持 #

Angular的依赖注入需要装饰器元数据才能解析参数，检查tsconfig.json里的这两个选项是否为true：

{
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    // 其他配置项保持不变
  }
}

4. 升级Ionic App Scripts到兼容版本 #

你当前用的@ionic/app-scripts@3.1.0可以升级到3.x系列的最新版（比如3.2.4），这个版本修复了不少依赖解析的问题：

npm install @ionic/app-scripts@3.2.4 --save-dev

5. （可选但推荐）升级Node和npm版本 #

你当前用的Node v6和npm v3版本太老旧了，很多新的依赖包已经不再支持这个版本，容易出现各种兼容问题。建议升级到Node 12或14的LTS版本，npm也会随之升级到6.x以上，能从根源减少这类问题。

为什么旧版本也会出问题？ #

这种情况通常是npm缓存损坏，或者之前的node_modules里混入了不兼容的依赖文件，哪怕你切换回旧代码，这些损坏的依赖依然会导致错误。彻底清理缓存重装后就能解决这类问题。

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