Question

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

我已经在我的模块中导入了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中进行。
这是一个链接，显示FlexLayoutModule与Angular Universal的正确使用：https://github.com/angular/flex-layout/wiki/Using-SSR-with-Flex-Layout
如果您在延迟加载的模块中包含FlexLayoutModule，请注意仍然可能存在问题。希望通过发布v6来解决这些问题。

Answer 2

警告：

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

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

<块引用>

严格模式代码不能包含 with 语句

Uncaught SyntaxError: Strict mode code may not include a with statement

Flexlayout无法使用角度通用

2 个答案:

警告：