导入angular-moment-timezone时出现Angular编译错误求助

我的Angular项目原本运行正常，且已成功使用ngx-moment的管道功能。为解决时区相关问题，尝试引入angular-moment-timezone的管道，但仅在app.module.ts中添加导入语句import {MomentTimezoneModule} from "angular-moment-timezone";（尚未将其加入imports列表或实际使用），就触发编译错误：

./src/main.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: Emit attempted before Angular Webpack plugin initialization.

Error: Failed to initialize Angular compilation - Cannot read properties of null (reading 'fileName')

多次重新安装依赖仍无法解决问题，以下是项目配置文件内容：

配置文件内容 #

app.module.ts #

import { NgModule } from '@angular/core';
import { BrowserModule, HammerModule } from '@angular/platform-browser';

import {AppComponent, SafePipe} from './app.component';
import { ImageFeedComponent } from './feeds/image-feed/image-feed.component';
import { ImageFeedService } from "./backend/image.feed.service";
import { HttpClientModule } from "@angular/common/http";
import {AppRoutingModule} from "./app-routing.module";
import { FeedSelectorComponent } from './feed-selector/feed-selector.component';
import { BrandingBarComponent } from './display-components/branding-bar/branding-bar.component';
import { PanoFeedComponent } from './feeds/pano-feed/pano-feed.component';
import { HistoryFeedComponent } from './feeds/history-feed/history-feed.component';
import { ImageContainerComponent } from './display-components/media-container/image-container/image-container.component';
import { HistoryBarComponent } from './display-components/history-bar/history-bar.component';
import { ArchiveBarComponent } from './display-components/archive-bar/archive-bar.component';
import { TimelapseFeedComponent } from './feeds/timelapse-feed/timelapse-feed.component';
import { WeatherComponent } from './display-components/weather/weather.component';
import {WeatherService} from "./backend/weather.service";
import { AccordionComponent } from './display-components/accordion/accordion.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
import { VideoContainerComponent } from './display-components/media-container/video-container/video-container.component';
import { MomentModule } from 'ngx-moment';
import { BrowsableArchiveFeedComponent } from './feeds/browsable-archive-feed/browsable-archive-feed.component';
import {MatCardModule} from "@angular/material/card";
import {MatDatepickerModule} from "@angular/material/datepicker";
import {MatMomentDateModule} from "@angular/material-moment-adapter";
import {ColorService} from "./backend/color.service";
import {MomentTimezoneModule} from "angular-moment-timezone";

@NgModule({
  declarations: [
    AppComponent,
    ImageFeedComponent,
    FeedSelectorComponent,
    BrandingBarComponent,
    PanoFeedComponent,
    SafePipe,
    HistoryFeedComponent,
    ImageContainerComponent,
    HistoryBarComponent,
    ArchiveBarComponent,
    TimelapseFeedComponent,
    WeatherComponent,
    AccordionComponent,
    PageNotFoundComponent,
    VideoContainerComponent,
    BrowsableArchiveFeedComponent
  ],
  imports: [
    BrowserModule,
    HammerModule,
    HttpClientModule,
    AppRoutingModule,
    MomentModule,
    MatCardModule,
    MatMomentDateModule,
    MatDatepickerModule
  ],
  providers: [
    ImageFeedService,
    WeatherService,
    ColorService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

package.json #

{
  "name": "yellow-feed",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "lint": "ng lint"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^14.2.5",
    "@angular/cdk": "^14.2.4",
    "@angular/common": "^14.2.5",
    "@angular/compiler": "^14.2.5",
    "@angular/core": "^14.2.5",
    "@angular/forms": "^14.2.5",
    "@angular/material": "^14.2.4",
    "@angular/material-moment-adapter": "^14.2.4",
    "@angular/platform-browser": "^14.2.5",
    "@angular/platform-browser-dynamic": "^14.2.5",
    "@angular/router": "^14.2.5",
    "angular-moment-timezone": "^1.7.1",
    "hammerjs": "^2.0.8",
    "moment": "^2.29.4",
    "ngx-moment": "^6.0.2",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^14.2.5",
    "@angular-eslint/builder": "14.1.2",
    "@angular-eslint/eslint-plugin": "14.1.2",
    "@angular-eslint/eslint-plugin-template": "14.1.2",
    "@angular-eslint/schematics": "14.1.2",
    "@angular-eslint/template-parser": "14.1.2",
    "@angular/cli": "^14.2.5",
    "@angular/compiler-cli": "^14.2.5",
    "@types/jasmine": "~3.10.0",
    "@types/node": "^12.11.1",
    "@typescript-eslint/eslint-plugin": "^5.36.2",
    "@typescript-eslint/parser": "^5.36.2",
    "eslint": "^8.23.0",
    "jasmine-core": "~4.0.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.1.0",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "typescript": "~4.8.4"
  }
}

tsconfig.json #

{
  "compileOnSave": false,
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2020",
    "module": "es2020",
    "lib": [
      "es2020",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

解决方案 #

1. 改用ngx-moment + moment-timezone自定义管道方案 #

angular-moment-timezone@1.7.1维护时间较早，不兼容Angular 14的Ivy编译模式，建议采用更灵活的自定义管道方案：

• 卸载angular-moment-timezone：

  npm uninstall angular-moment-timezone
  

• 安装moment-timezone：

  npm install moment-timezone
  

• 创建自定义时区管道：

  import { Pipe, PipeTransform } from '@angular/core';
  import * as moment from 'moment-timezone';
  
  @Pipe({ name: 'momentTz' })
  export class MomentTimezonePipe implements PipeTransform {
    transform(
      value: Date | string | number,
      format: string = 'YYYY-MM-DD HH:mm:ss',
      timezone: string = 'UTC'
    ): string {
      return moment(value).tz(timezone).format(format);
    }
  }
  

• 在app.module.ts的declarations数组中注册该管道，即可在模板中使用：

  {{ someDate | momentTz:'YYYY-MM-DD HH:mm':'Asia/Shanghai' }}
  

2. 清理项目缓存（辅助步骤） #

执行以下命令清理缓存，确保依赖安装干净：

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

3. 临时禁用Ivy（不推荐） #

如果必须使用angular-moment-timezone，可尝试在tsconfig.json的angularCompilerOptions中添加：

"enableIvy": false

但此方案会关闭Angular 14默认的Ivy编译器，可能引发其他依赖兼容性问题，仅作临时测试用。

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