如何使用具有角向宇宙的ng-挠曲怪物？

Question

吴-屈兽不适用于角通用。

我正在尝试将服务器端呈现功能添加到现有的角(v7.0.3)应用程序中。但我对ng-柔性怪物有一些意见(v2.7.11)。在运行ReferenceError之后，“我得到的窗口是未定义的”node dist/server (堆栈跟踪包含在最后)。

经过大量的研究，我把这个问题集中到了一个模块的两个组件上，这个组件使用了ng-柔性怪物的FlexMonsterPivotModule和FlexMonster组件。我还包装了所有ts和html代码，其中这个pivot组件与isPlatformBrowser(this.platformId)检查一起使用。然而，我仍然收到同样的错误。因此，我进行了更深入的挖掘，发现在FlexMonster组件的ts文件中，顶部就有import * as Flexmonster from 'flexmonster';，它实际上导入了FlexMonster js包并引用了浏览器窗口对象。

因此，我的问题是，“有没有办法使用这种带有角通用(SSR)的软件包，以便只在浏览器中导入柔性怪物？”

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的目录。在该目录中，我创建了一个名为福氏怪物的子目录，并将下面的JS文件放入其中，名为模拟-Flexmonster.js。js文件包含我的应用程序中需要的Flexmonster命名空间和属性。

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

  return Flexmonster;
})();

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

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

这个解决方案是在角的通用启动库问题部分找到的。以下是评论链接。