Domino 的 Angular 通用：获取“instanceof”的右侧不是对象答案

【问题标题】：Angular universal with Domino : Getting Right-hand side of 'instanceof' is not an objectDomino 的 Angular 通用：获取“instanceof”的右侧不是对象
【发布时间】：2019-11-16 03:13:42
【问题描述】：

我正在使用 Angular 通用和多米诺骨牌来“伪造”快递服务器上的 DOM 服务器端。在npm cache clean --force 和npm install 之前，一切都运行良好

我收到以下错误：

/path/to/app/src/gui/dist/server/server.js:2378
 */(s),2))[0],l=i[1]),this.engine.listen(this.namespaceId,a,s,l,function(e){var t=e._data||-1;o.factory.scheduleListenerCallback(t,n,e)})}return this.delegate.listen(e,t,n)},t}(h);var g=function(e){function t(t,n,r){return e.call(this,t.body,n,r)||this}return Object(r.c)(t,e),t=Object(r.b)([Object(i.Injectable)(),Object(r.e)(0,Object(i.Inject)(l.DOCUMENT)),Object(r.d)("design:paramtypes",[Object,s.AnimationDriver,s["ɵAnimationStyleNormalizer"]])],t)}(s["ɵAnimationEngine"]);function v(){return Object(s["ɵsupportsWebAnimations"])()?new s["ɵWebAnimationsDriver"]:new s["ɵCssKeyframesDriver"]}function y(){return new s["ɵWebAnimationsStyleNormalizer"]}function b(e,t,n){return new f(e,t,n)}var w=new i.InjectionToken("AnimationModuleType"),_=[{provide:a.AnimationBuilder,useClass:u},{provide:s["ɵAnimationStyleNormalizer"],useFactory:y},{provide:s["ɵAnimationEngine"],useClass:g},{provide:i.RendererFactory2

TypeError: Right-hand side of 'instanceof' is not an object
    at bt (/path/to/app/src/gui/dist/server/server.js:2378:180688)
    at yt (/path/to/app/src/gui/dist/server/server.js:2378:180563)
    at ir (/path/to/app/src/gui/dist/server/server.js:2378:203358)
    at We.insertToken (/path/to/app/src/gui/dist/server/server.js:2378:179949)
    at /path/to/app/src/gui/dist/server/server.js:2378:183251
    at kt (/path/to/app/src/gui/dist/server/server.js:2378:183266)
    at Xe (/path/to/app/src/gui/dist/server/server.js:2378:178211)
    at Object.parse (/path/to/app/src/gui/dist/server/server.js:2378:177177)
    at Object.t.createDocument (/path/to/app/src/gui/dist/server/server.js:2833:9750)
    at Object.t.createWindow (/path/to/app/src/gui/dist/server/server.js:2833:10129)

domino的HTMLParser.js中出现错误，第2177行如下：

doc._appendChild(root);
stack.push(root);
if (fragmentContext instanceof impl.HTMLTemplateElement) {
  templateInsertionModes.push(in_template_mode);
}

impl.HTMLTemplateElement 实际上是空的。

我使用多米诺声明的 server.ts 片段是：

// const domino = require('@angular/platform-server/node_modules/domino');
const domino = require('domino');

const template = fs.readFileSync(path.join(process.cwd(), 'dist', 'browser', 'index.html')).toString();
const win = domino.createWindow(template);
global['window'] = win;
global['document'] = win.document;
global['DOMTokenList'] = win.DOMTokenList;
global['Node'] = win.Node;
global['Text'] = win.Text;
global['jQuery'] = {};
// global['$'] = require('jquery');
// global['window.$'] = require('jquery');
global['HTMLElement'] = win.HTMLElement;
global['Materialize'] = win.Materialize;
global['navigator'] = win.navigator;

对这个问题有什么建议吗？

【问题讨论】：

它可能来自某个已更新的库。如果您在angular.json 中禁用buildOptimizer，您仍然有错误吗？
我还是有这个问题。

标签： javascript angular webpack angular-universal

【解决方案1】：

我发现问题的根源在于将“生产”模式设置为 webpack。事实上，出于性能原因，我在webpack.server.config.js中设置了

module.exports = {
    mode: 'production',
    ...
}

这种模式会导致多米诺骨牌出现意外行为。设置mode: 'none' 解决了这个问题。

【讨论】：

如果你仍然需要设置模式生产并且还要最小化 server.js 怎么办？

【解决方案2】：

正如 Radouane 的回答中提到的，这个问题似乎与 webpack 对生产模式构建的缩小有关。如果您需要生产模式提供的优化，有a fork of domino with a fix。更多讨论请参见多米诺骨牌上的issue 146。

【讨论】：