Flexlayout 不适用于 angular 通用

Question

我创建了一个 angular 通用和 pwa 应用程序。我正在使用 mat-toolbar 和 flexlayout 创建一个导航栏。

我已经在我的模块中导入了 FlexLayoutModule、FlexLayoutServerModule。

我的示例导航栏是

<div [hidden]="loading" class="example-container">
  <mat-toolbar class="example-toolbar">
    <span>Navigation</span>
    <span class="example-spacer"></span>
    <div fxShow fxHide.lt-md>
      <a href="#" mat-button>Menu Item 1</a>
      <a href="#" mat-button>Menu Item 2</a>
    </div>
    <div fxHide fxShow.gt-sm>
      <a href="#">Show Side Menu</a>
    </div>
  </mat-toolbar>
</div>

Answer 1

您必须在 FlexLayoutModule 之后导入 FlexLayoutServerModule。

 imports: [
    ... other imports here
    FlexLayoutServerModule
  ]

此导入应该发生在您的 ServerModule 中。

这里有一个 link 展示了 FlexLayoutModule 与 Angular Universal 的正确使用：https://github.com/angular/flex-layout/wiki/Using-SSR-with-Flex-Layout
请注意，如果您将 FlexLayoutModule 包含在延迟加载的模块中，仍然可能存在问题。这些问题有望随着 v6 的发布得到解决。

Answer 2

警告：

确保不要将 FlexLayoutServerModule 添加到将由浏览器加载的任何内容。不要将其添加到 AppModule 或 MyWidgetsModule 等

这可能会导致您的浏览器控制台出现以下错误，并且会阻止您的应用在 JS 加载后重新加载。

Strict mode code may not include a with statement

Flexlayout 不适用于 angular 通用

Flexlayout not working with angular universal

angular

angular-universal

angular-flex-layout

警告：