javascript - 分发各种@angular/material模块的 Angular 共享模块NullInjectorError : No provider

Question

我有一个 uiModule。它导入和导出各种@angular/material模块。

我曾希望当我导入uiModule时进入anotherModule ;现在anotherModule将可以访问@angular/material的东西...但这并不完全有效。

虽然 Material 在 uiModule 内工作正常 — anotherModule识别物质元素，但存在很多错误，例如

NullInjectorError: No provider for InjectionToken mat-menu-scroll-strategy!

NullInjectorError: No provider for Overlay!

我在尝试使用 <mat-menu> 后得到了这些例子

这里是 uiModule

// material
import { MatExpansionModule } from '@angular/material/expansion';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatChipsModule } from '@angular/material/chips';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatMenuModule } from '@angular/material/menu';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material/core';
import { MatIconModule } from '@angular/material/icon';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatDialogModule } from '@angular/material/dialog';

const material = [
  MatIconModule,
  MatProgressSpinnerModule,
  MatProgressBarModule,
  MatExpansionModule,
  MatInputModule,
  MatChipsModule,
  MatAutocompleteModule,
  MatFormFieldModule,
  MatDatepickerModule,
  MatNativeDateModule,
  MatMenuModule,
  OverlayModule,
  MatDialogModule,
  ScrollingModule,
];

@NgModule({
  declarations: [
    PaginationComponent,
  ],
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    ...material,
  ],
  providers: [],
  exports: [
    PaginationComponent,
    ...material,
  ],
})

Answer 1

您看到的错误有一个模式，它们都是有关提供商的错误!您使用 Material 组件的地方缺少一些提供程序。示例:覆盖提供程序。

组件和服务的工作方式有点不同。

如果您在模块 A 中导出组件 A 并在 B 中导入组件的模块，则可以在另一个模块 (B) 中使用组件 (A)。这需要在您想要使用组件 A 的每个模块中完成.

但是，如果模块 A 需要服务，则可以在模块级别或根级别提供该服务。如果您缺少提供此信息，您可能会收到此错误。

由于您尚未发布任何使用 Material 组件并面临错误的代码，因此我将展示一个可能发生这种情况的用例。

案例: anotherModule 有一个组件，该组件的 html 中有一个可打开对话框的按钮。

对话框组件不会在打开它们的组件内呈现。他们确实可以访问另一个模块的注入(inject)器。因此，即使您已在 materialModule 中导入了 uiModule，但如果尚未在 AppModule 中导入，也会弹出 Noprovider for XYZ 错误。

因此，请尝试在 AppModule 中导入此 uiModule。