Question

我有以下webpack.config.js

const path = require('path');
const project = require(path.join(process.cwd(), 'project.json'));
const nodeExternals = require('webpack-node-externals');
const webpack = require('webpack');

const locales = Object.keys(project.locales);

const config = {
entry: {
  server: './server.ts'
},
resolve: {
  extensions: ['.ts', '.js'],
  alias: {}
},
target: 'node',
externals: [nodeExternals({
  whitelist: [
     /^@ng-bootstrap/,
     /dropzone/,
     /dropzone\/dist/,
     /^ngx-dropzone-wrapper/,
     /^ngx-dropzone-wrapper\/dist/,
     /^@agm\/core/
  ]
})],
output: {
  path: path.join(__dirname, 'dist'),
  filename: '[name].js'
},
module: {
  rules: [{
     test: /\.ts$/,
     loader: 'ts-loader'
  }]
},
plugins: [
  // ...
  new webpack.DefinePlugin({
     'process.env.BROWSER': JSON.stringify(true),
     'window': JSON.stringify(true),
     'document': JSON.stringify(true),
     'localStorage': {
        getItem: function () {
           return true
        },
        setItem: function () {
           return true
        },
     }
  }),
  // ...
]
};

for (let i = 0; i < locales.length; i++) {
  config.resolve.alias[`main.server.${locales[i].toLowerCase()}`] = path.join(__dirname, 'dist', 'server', locales[i].toLowerCase(), 'main.js')
}

module.exports = config;

当我尝试运行时出现此错误

node ./dist/server.js

错误：

/home/michalis/Documents/Boxes/18-24/admin/dist/server.js:1
(function (exports, require, module, __filename, __dirname) { !function(n){var l={};function e(t){if(l[t])return l[t].exports;var o=l[t]={i:t,l:!1,exports:{}};return n[t].call(o.exports,o,o.exports,e),o.l=!0,o.exports}e.m=n,e.c=l,e.d=function(n,l,t){e.o(n,l)||Object.defineProperty(n,l,{configurable:!1,enumerable:!0,get:t})},e.r=function(n){Object.defineProperty(n,"__esModule",{value:!0})},e.n=function(n){var l=n&&n.__esModule?function(){return n.default}:function(){return n};return e.d(l,"a",l),l},e.o=function(n,l){return Object.prototype.hasOwnProperty.call(n,l)},e.p="",e(e.s=108)}([function(n,l){n.exports=require("@angular/core")},function(n,l,e){"use strict";function t(n){return parseInt(""+n,10)}function o(n){return void 0!==n&&null!==n?""+n:""}function u(n,l,e){return void 0===e&&(e=0),Math.max(Math.min(n,l),e)}function r(n){return"string"==typeof n}function a(n){return!isNaN(t(n))}function i(n){return"number"==typeof n&&isFinite(n)&&Math.floo

TypeError: Cannot read property 'documentElement' of undefined
at /home/michalis/Documents/Boxes/18-24/admin/dist/server.js:1:227894
at Object.<anonymous> (/home/michalis/Documents/Boxes/18-24/admin/dist/server.js:1:228489)
at Object.<anonymous> (/home/michalis/Documents/Boxes/18-24/admin/dist/server.js:1:228520)
at e (/home/michalis/Documents/Boxes/18-24/admin/dist/server.js:1:172)
at Object.<anonymous> (/home/michalis/Documents/Boxes/18-24/admin/dist/server.js:997:393)
at e (/home/michalis/Documents/Boxes/18-24/admin/dist/server.js:1:172)
at Object.ngx-dropzone-wrapper (/home/michalis/Documents/Boxes/18-24/admin/dist/server.js:1981:55)
at e (/home/michalis/Documents/Boxes/18-24/admin/dist/server.js:997:33646)
at Object../node_modules/ngx-dropzone-wrapper/dist/ngx-dropzone-wrapper.ngfactory.js (/home/michalis/Documents/Boxes/18-24/admin/dist/server.js:1233:156)
at e (/home/michalis/Documents/Boxes/18-24/admin/dist/server.js:997:33646)

您可以看到我的webpack.config.js文件，将ngx-dropzone-wrapper添加到白名单中。你知道发生了什么吗？所有外部库都有全局解决方案吗？

Answer 1

我认为这可能是事实，即服务器端没有DOM，并且您的代码或某些依赖项的代码都可以直接进行DOM操作

Angular SSR-无法读取未定义的属性'documentElement'

1 个答案: