如何将 ng-flexmonster 与 Angular Universal 一起使用？

Question

ng-flexmonster 不适用于 Angular Universal。

我正在尝试将服务器端渲染功能添加到我现有的 Angular (v7.0.3) 应用程序中。但是我对 ng-flexmonster(v2.7.11) 有一些问题。在运行node dist/server 后，我得到window is not definedReferenceError（堆栈跟踪包含在最后）。

经过大量调查，我将问题归结为使用 ng-flexmonster 的 FlexMonsterPivotModule 和 FlexMonster 组件的模块的两个组件。我还包装了所有 ts 和 html 代码，其中枢轴组件与isPlatformBrowser(this.platformId) 检查一起使用。但是，我仍然遇到同样的错误。因此，我深入挖掘，发现在 FlexMonster 组件的 ts 文件中，顶部有 import * as Flexmonster from 'flexmonster';，它实际上导入了 FlexMonster js 包并引用了浏览器 window 对象。

所以，我的问题是“有没有办法将这种类型的包与 Angular Universal (SSR) 一起使用，以便仅在浏览器中导入 flexmonster？”。

D:\Projects\src\Portal-RnD\Portal-Features-1-SSR-Node-Angular-Guide\src\portal-ui\dist\server.js:396797
__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));a.Flexmonster=b()})(window,function(){return function(a){'use strict';
B6jj.a71="fm-filtered";j6jj.z9F="font-family";h6jj.o81="linear";m6jj.J2v="columnSortTuple";w6jj.j7F="currencySymbol";w6jj.v8p="truestyle";j6jj.V9F="padding-left";
I6jj.u3p="data-index";I6jj.K2p="week";m6jj.q2v="lastRowsTupleInteracted";T6jj.i8V=2;I6jj.F8p="rgb(255,255,255)";B6jj.u21="password";m6jj.M2v="extendedDataWidth";
h6jj.C81=".level";F6jj.W5y="useToken";h6jj.V91="fm-text-display";j6jj.O5F="defaultHierarchySortName";j6jj.B9F="class='";h6jj.P81="dx";h6jj.G51="fm-content";
j6jj.L9F=".{0}{{1}}\n";I6jj.g3p="label";w6jj.a2F="column";T6jj.w6p=4759;j6jj.Y1v="style";T6jj.j5V=400;w6jj.q3F="credentials";F6jj.N8y="fm-ui-col";B6jj.R9v="D4+";
I6jj.n4p=",";I6jj.V3p="originalCaption";I6jj.d0p="ntr";m6jj.i2v="columnCount";h6jj.i4y="fm-moreicon- 

ReferenceError: window is not defined    
at Object.<anonymous> (D:\Projects\src\Portal-RnD\Portal-Features-1-SSR-Node-Angular-Guide\src\portal-ui\dist\server.js:396797:122)    
at Object.module.exports (D:\Projects\src\Portal-RnD\Portal-Features-1-SSR-Node-Angular-Guide\src\portal-ui\dist\server.js:397346:30)    
at __webpack_require__ (D:\Projects\src\Portal-RnD\Portal-Features-1-SSR-Node-Angular-Guide\src\portal-ui\dist\server.js:20:30)    
at Module.__WEBPACK_AMD_DEFINE_ARRAY__ (D:\Projects\src\Portal-RnD\Portal-Features-1-SSR-Node-Angular-Guide\src\portal-ui\dist\server.js:396587:69)    
at __webpack_require__ (D:\Projects\src\Portal-RnD\Portal-Features-1-SSR-Node-Angular-Guide\src\portal-ui\dist\server.js:20:30)    
at Object.ng-flexmonster (D:\Projects\src\Portal-RnD\Portal-Features-1-SSR-Node-Angular-Guide\src\portal-ui\dist\server.js:223596:18)    
at __webpack_require__ (D:\Projects\src\Portal-RnD\Portal-Features-1-SSR-Node-Angular-Guide\src\portal-ui\dist\server.js:129039:30)    
at Module../node_modules/ng-flexmonster/ng-flexmonster.ngfactory.js (D:\Projects\src\Portal-RnD\Portal-Features-1-SSR-Node-Angular-Guide\src\portal-ui\dist\server.js:151859:72)    
at __webpack_require__ (D:\Projects\src\Portal-RnD\Portal-Features-1-SSR-Node-Angular-Guide\src\portal-ui\dist\server.js:129039:30)    
at Module../src/app/dashboard/dashboard-report/flex-grid/flex-grid.component.ngfactory.js (D:\Projects\src\Portal-RnD\Portal-Features-1-SSR-Node-Angular-Guide\src\portal-ui\dist\server.js:172922:112)

Answer 1

我可以通过使用 webpack 的 NormalModuleReplacementPlugin 解决这个问题。起初，我在 src 目录下创建了一个名为 server-mocks 的目录。在那里，我创建了一个名为 flexmonster 的子目录，并将以下名为 mock-flexmonster.js 的 JS 文件放入其中。 js 文件包含我的应用所需的 Flexmonster 命名空间和属性。

(function() {
  var Flexmonster = {
    Format: {},
    Options: {},
    Report: {},
    Slice: {},
    Toolbar: {},
    CellData: {},
    CellBuilder: {}
  };

  return Flexmonster;
})();

之后，我在 webpack.server.config.js 内的 plugins 数组中添加了以下插件设置。

new webpack.NormalModuleReplacementPlugin(
      // fixes ReferenceError: window is not defined coming from flexmonster
      /^flexmonster$/,
      path.join(__dirname, 'src', 'server-mocks', 'flexmonster', 'mock-flexmonster.js')
    )

此解决方案可在 Angular 的通用入门存储库问题部分中找到。这是评论link。