Angular 16中FileSaverService需JIT编译但@angular/compiler不可用求助

错误信息 #

ERROR Error: Uncaught (in promise): Error: 可注入对象'FileSaverService'需要使用JIT编译器编译，但'@angular/compiler'不可用。

用户package.json配置 #

{
  "name": "psboleto",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^16.0.4",
    "@angular/cdk": "^16.0.3",
    "@angular/common": "^16.0.4",
    "@angular/compiler": "^16.0.4",
    "@angular/core": "^16.0.4",
    "@angular/forms": "^16.0.4",
    "@angular/material": "^16.0.3",
    "@angular/platform-browser": "^16.0.4",
    "@angular/platform-browser-dynamic": "^16.0.4",
    "@angular/router": "^16.0.4",
    "export-from-json": "^1.4.1",
    "file-saver": "^2.0.5",
    "jspdf": "^2.5.1",
    "loadash": "^1.0.0",
    "lodash": "^4.17.1",
    "moment": "^2.29.1",
    "ngx-filesaver": "^8.1.0",
    "ngx-mask": "^16.1.0",
    "rxjs": "~6.6.7",
    "tslib": "^2.0.0",
    "xlsx": "https://cdn.sheetjs.com/xlsx-0.19.3/xlsx-0.19.3.tgz",
    "zone.js": "^0.13.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^16.0.4",
    "@angular/cli": "^16.0.4",
    "@angular/compiler-cli": "^16.0.4",
    "@angular/language-service": "^16.0.4",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^0.0.28",
    "export-from-json": "1.5.1",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.4.2",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "^7.0.0",
    "ts-node": "~7.0.0",
    "tslint": "~6.1.0",
    "typescript": "~4.9.5"
  }
}

解决方案 #

• 升级ngx-filesaver到兼容Angular 16的版本
  当前使用的ngx-filesaver@8.1.0适配Angular 8，与Angular 16版本不匹配，导致服务需要JIT编译。执行以下命令升级：

  npm uninstall ngx-filesaver
  npm install ngx-filesaver@^16.0.0
  

• 确认Angular构建配置为AOT模式
  打开angular.json，找到项目构建配置部分，确保aot设为true，且没有启用jit选项：

  "projects": {
    "psboleto": {
      "architect": {
        "build": {
          "options": {
            "aot": true,
            // 移除或注释掉任何"jit": true的配置
          }
        }
      }
    }
  }
  

• 清理缓存并重新构建项目
  执行命令彻底清理依赖缓存，重新安装并构建：

  npm cache clean --force
  rm -rf node_modules package-lock.json
  npm install
  ng build --aot
  

• 检查模块导入方式
  确保在使用FileSaverService的模块中正确导入FileSaverModule，而非直接导入服务：

  // 示例模块文件
  import { NgModule } from '@angular/core';
  import { FileSaverModule } from 'ngx-filesaver';
  
  @NgModule({
    imports: [
      // 其他模块
      FileSaverModule
    ]
  })
  export class YourFeatureModule { }
  

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