Angular 与 Domino 通用：获取 'instanceof' 的右侧不是对象

Question

我正在使用 angular 通用和多米诺骨牌到 "fake" DOM Express 服务器上的服务器端。一切正常，直到 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)

错误发生在HTMLParser.js of domino, line: 2177 在以下行:

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

impl.HTMLTemplateElement 实际上是空的。

我的 server.ts 使用 domino 声明的片段是：

// 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;

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

Answer 1

我发现问题的根源是因为将'production'模式设置为webpack。事实上，出于性能原因，我在 webpack.server.config.js

中设置了

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

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

Answer 2

正如 Radouane 的回答中提到的，这个问题似乎与 webpack 对生产模式构建的缩小有关。如果您需要生产模式提供的优化，可以在 a fork of domino with a fix. See issue 146 on domino 上进行更多讨论。

Angular 与 Domino 通用：获取 'instanceof' 的右侧不是对象

Angular universal with Domino : Getting Right-hand side of 'instanceof' is not an object

javascript

webpack

angular-universal

angular