Question

我有一个Angular 6应用，可在浏览器中很好地运行，但在Googlebot尝试抓取时崩溃。

我的理论：这是Javascript兼容性的问题，TypeScript正在输出与Googlebot不兼容的JS。

问题：我的Angular应用需要什么垫片才能在Googlebot尝试抓取时不会崩溃？我还能做些什么来最大限度地提高兼容性？

由于Googlebot不提供console.log的输出，因此我开始尝试使用PhantomJS屏蔽我的网站，这是Google所使用的。

这样做时，我收到以下控制台错误（我不确定，但是我猜这也是Googlebot正在运行的错误）：

 https://www.example.com/ng2/vendor.js:46405 in ./node_modules/@angular/core/fesm5/core.js
TypeError: undefined is not a constructor (evaluating 'new Array(HEADER_OFFSET).fill(null)')

  https://www.example.com/ng2/vendor.js:46407 in ./node_modules/@angular/core/fesm5/core.js
  https://www.example.com/ng2/runtime.js:82 in __webpack_require__
  https://www.example.com/ng2/main.js:1815 in ./src/main.ts
  https://www.example.com/ng2/runtime.js:82 in __webpack_require__
  https://www.example.com/ng2/main.js:1863
  https://www.example.com/ng2/runtime.js:82 in __webpack_require__
  https://www.example.com/ng2/runtime.js:44 in checkDeferredModules
  https://www.example.com/ng2/runtime.js:31 in webpackJsonpCallback

PhantomJS似乎正在vendor.js中的这一行代码中运行并挂断了：

var HEADER_FILLER = new Array(HEADER_OFFSET).fill(null);

我可以添加某种类型的polyfill以便不会发生这种情况吗？

Answer 1

要解决此问题并使Googlebot正确渲染Angular应用，我必须打开应用的polyfills.ts文件并进行以下更改：

        /* enable these */
    import 'core-js/es6/symbol';
    import 'core-js/es6/object';
    import 'core-js/es6/function';
    import 'core-js/es6/parse-int';
    import 'core-js/es6/parse-float';
    import 'core-js/es6/number';
    import 'core-js/es6/math';
    import 'core-js/es6/string';
    import 'core-js/es6/date';
    import 'core-js/es6/array';
    import 'core-js/es6/regexp';
    import 'core-js/es6/map';
    import 'core-js/es6/weak-map';
    import 'core-js/es6/set';

    /* ... */

    /* and these: */

    /**
    * Date, currency, decimal and percent pipes.
    * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
    */
    import 'intl';  // Run `npm install --save intl`.
    /**
    * Need to import at least one locale-data with intl.
    */
    import 'intl/locale-data/jsonp/en';

Source

Angular 6应用在Googlebot / PhantomJS上崩溃。缺少垫片？

1 个答案: