使用“一个未处理的异常发生：NGCC失败”编译angular项目

Question

我尝试编译我的项目，但出现了错误：

Error: Error on worker #3: Error: No typings declaration can be found for the referenced NgModule class in static withConfig(configOptions, 
        // tslint:disable-next-line:max-line-length
        breakpoints = []) {
            return {
                ngModule: FlexLayoutModule,
                providers: configOptions.serverLoaded ?
                    [
                        { provide: LAYOUT_CONFIG, useValue: Object.assign(Object.assign({}, DEFAULT_CONFIG), configOptions) },
                        { provide: BREAKPOINT, useValue: breakpoints, multi: true },
                        { provide: SERVER_TOKEN, useValue: true },
                    ] : [
                    { provide: LAYOUT_CONFIG, useValue: Object.assign(Object.assign({}, DEFAULT_CONFIG), configOptions) },
                    { provide: BREAKPOINT, useValue: breakpoints, multi: true },
                ]
            };
        }.

我使用了ng add @angular/material和npm install @angular/flex-layout@latest --save，但是出现了错误。

目前为止，我尝试过：

• 多次重新安装flexLayout。
• 删除node_modules并再次安装。

我的依赖项如下：

"dependencies": {
    "@angular/animations": "^9.1.11",
    "@angular/cdk": "^9.2.4",
    "@angular/common": "~9.1.11",
    "@angular/compiler": "~9.1.11",
    "@angular/core": "~9.1.11",
    "@angular/flex-layout": "^10.0.0-beta.32",
    "@angular/forms": "~9.1.11",
    "@angular/material": "^9.2.4",
    "@angular/platform-browser": "~9.1.11",
    "@angular/platform-browser-dynamic": "~9.1.11",
    "@angular/router": "~9.1.11",
    "rxjs": "~6.5.5",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  }

有人知道可能出了什么问题吗？

我的 app.module.ts 文件。

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    SharedModule,
    HomeModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

但是我将Flex添加到共享模块中，所以我也会粘贴shared.module.ts

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    FlexLayoutModule
  ],
  exports: [
    FlexLayoutModule
  ]
})
export class SharedModule { }

- derirative23

Answer 1

切换回FlexLayout 9.0.0-beta.31。根据它的变更日志，你正在使用的版本 "(...) 增加了对 Angular v10 和 Angular CDK v10 的支持。"

@angular的ModuleWithProviders在 @angular 9.x.x 中不是一个泛型，但在 @angular 10 rc.x 中是泛型。 FlexLayout x.x.x-beta.32 开始使用了泛型版本(ModuleWithProviders<T>)，所以它不能再与 @angular 版本 < 10 一起使用了。您需要切换回FlexLayout 9.0.0-beta.31。

在您的package.json中，将"@angular/flex-layout": "^10.0.0-beta.32"替换为"@angular/flex-layout": "~9.0.0-beta.31"，然后再次运行npm install (或者简单地运行npm install @angular/flex-layout@9.0.0-beta.31")。

- julianobrasil

---

我得到了一个错误，@angular/flex-layout@9^9.0.0-beta31没有匹配的版本。 - Flash

Answer 2

使用以下命令重新安装flex-layout:

npm i @angular/flex-layout@9.0.0-beta.31

- Ayush Mishra