Question

ng-flexmonster不适用于Angular Universal。

我正在尝试向现有的Angular（v7.0.3）应用程序添加服务器端渲染功能。但是我在ng-flexmonster（v2.7.11）上遇到了一些问题。运行node dist/server后，我得到未定义窗口 ReferenceError（最后包括堆栈跟踪）。

经过大量调查，我将问题归结为使用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}Data:
let massdata = {
Years: [1998,1999,2000,2001,2002,2003,2004,2005,2006,2007,2008,2009,2010,2011,2012,2013,2014,2015,2016,2017], 
USAttacks: [2,5,1,1,1,3,3,2,3,4,3,4,2,3,7,3,3,4,4,4]
}
\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的通用入门资源库问题部分。这是评论link。

如何在Angular Universal中使用ng-flexmonster？

1 个答案: