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

Question

ng-flexmonster 不适用于 Angular 通用。

我正在尝试将服务器端呈现功能添加到我现有的 Angular (v7.0.3) 应用程序中。但是我在使用 ng-flexmonster(v2.7.11) 时遇到了一些问题。在运行 node dist/server 之后，我得到 window is not defined ReferenceError (Stack Trace included in the end)。

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

所以，我的问题是 "Is there a way to use this type of package with Angular Universal (SSR) so that the flexmonster is imported only in browser?"。

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 的子目录，并将以下 JS 文件放在其中，名为 mock-flexmonster.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 的 universal-starter 存储库问题部分找到的。这是评论 link.

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

How to use ng-flexmonster with Angular Universal?

angular-universal