Question

我有一个Angular 6项目，我想像浏览器一样解析html（使用脚本等），所以我决定使用JSDOM。问题是，运行ng serve时出现很多错误。可能我还没有安装某些软件包，但是我已经尝试了很多组合，但没有任何效果。

这是我对jsdom的“调用”：

import { JSDOM } from 'jsdom';

const dom = new JSDOM(`<!DOCTYPE html><p>Hello world</p>`);

这是我的package.json：

"dependencies": {
    "@angular/animations": "^6.0.5",
    "@angular/common": "^6.0.5",
    "@angular/compiler": "^6.0.5",
    "@angular/core": "^6.0.5",
    "@angular/forms": "^6.0.5",
    "@angular/http": "^6.0.5",
    "@angular/platform-browser": "^6.0.5",
    "@angular/platform-browser-dynamic": "^6.0.5",
    "@angular/platform-server": "^6.0.5",
    "@angular/router": "^6.0.5",
    "angularfire2": "^5.0.0-rc.10",
    "core-js": "^2.5.7",
    "firebase": "^5.0.4",
    "ngx-slick": "^0.1.3",
    "rxjs": "^6.2.1",
    "rxjs-compat": "^6.2.1",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.6.8",
    "@angular/cli": "^6.0.8",
    "@angular/compiler-cli": "^6.0.5",
    "@angular/language-service": "^6.0.5",
    "@types/core-js": "^2.5.0",
    "@types/jasmine": "^2.8.8",
    "@types/jasminewd2": "~2.0.2",
    "@types/jsdom": "11.0.6",
    "@types/node": "^10.3.4",
    "codelyzer": "^4.3.0",
    "jasmine-core": "^3.1.0",
    "jasmine-spec-reporter": "~4.2.1",
    "jsdom": "^11.11.0",
    "karma": "^2.0.3",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "1.2.1",
    "karma-jasmine": "^1.1.2",
    "karma-jasmine-html-reporter": "0.2.2",
    "protractor": "^5.3.2",
    "ts-node": "^6.1.1",
    "tslint": "^5.10.0",
    "typescript": "^2.9.2"
  }

这是错误：

WARNING in ./node_modules/jsdom/lib/jsdom/utils.js
186:21-40 Critical dependency: the request of a dependency is an expression

WARNING in ./node_modules/parse5/lib/index.js
55:23-49 Critical dependency: the request of a dependency is an expression

WARNING in ./node_modules/sax/lib/sax.js
Module not found: Error: Can't resolve 'stream' in 'E:\moj-git\MovieApp\node_modules\sax\lib'

ERROR in ./node_modules/jsdom/lib/jsdom/living/xmlhttprequest.js
Module not found: Error: Can't resolve 'child_process' in 'E:\moj-git\MovieApp\node_modules\jsdom\lib\jsdom\living'
ERROR in ./node_modules/aws4/aws4.js
Module not found: Error: Can't resolve 'crypto' in 'E:\moj-git\MovieApp\node_modules\aws4'
ERROR in ./node_modules/ecc-jsbn/index.js
Module not found: Error: Can't resolve 'crypto' in 'E:\moj-git\MovieApp\node_modules\ecc-jsbn'
ERROR in ./node_modules/oauth-sign/index.js
Module not found: Error: Can't resolve 'crypto' in 'E:\moj-git\MovieApp\node_modules\oauth-sign'
ERROR in ./node_modules/request/lib/helpers.js
Module not found: Error: Can't resolve 'crypto' in 'E:\moj-git\MovieApp\node_modules\request\lib'
ERROR in ./node_modules/request/lib/hawk.js
Module not found: Error: Can't resolve 'crypto' in 'E:\moj-git\MovieApp\node_modules\request\lib'
ERROR in ./node_modules/request/lib/oauth.js
Module not found: Error: Can't resolve 'crypto' in 'E:\moj-git\MovieApp\node_modules\request\lib'
ERROR in ./node_modules/request/node_modules/aws-sign2/index.js
Module not found: Error: Can't resolve 'crypto' in 'E:\moj-git\MovieApp\node_modules\request\node_modules\aws-sign2'
ERROR in ./node_modules/request/node_modules/http-signature/lib/verify.js
Module not found: Error: Can't resolve 'crypto' in 'E:\moj-git\MovieApp\node_modules\request\node_modules\http-signature\lib'
ERROR in ./node_modules/request/node_modules/http-signature/lib/signer.js
Module not found: Error: Can't resolve 'crypto' in 'E:\moj-git\MovieApp\node_modules\request\node_modules\http-signature\lib'
ERROR in ./node_modules/sshpk/lib/utils.js
Module not found: Error: Can't resolve 'crypto' in 'E:\moj-git\MovieApp\node_modules\sshpk\lib'
ERROR in ./node_modules/sshpk/lib/private-key.js
Module not found: Error: Can't resolve 'crypto' in 'E:\moj-git\MovieApp\node_modules\sshpk\lib'
ERROR in ./node_modules/sshpk/lib/identity.js
Module not found: Error: Can't resolve 'crypto' in 'E:\moj-git\MovieApp\node_modules\sshpk\lib'
ERROR in ./node_modules/sshpk/lib/fingerprint.js
Module not found: Error: Can't resolve 'crypto' in 'E:\moj-git\MovieApp\node_modules\sshpk\lib'
ERROR in ./node_modules/sshpk/lib/signature.js
Module not found: Error: Can't resolve 'crypto' in 'E:\moj-git\MovieApp\node_modules\sshpk\lib'
ERROR in ./node_modules/sshpk/lib/dhe.js
Module not found: Error: Can't resolve 'crypto' in 'E:\moj-git\MovieApp\node_modules\sshpk\lib'
ERROR in ./node_modules/sshpk/lib/key.js
Module not found: Error: Can't resolve 'crypto' in 'E:\moj-git\MovieApp\node_modules\sshpk\lib'
ERROR in ./node_modules/sshpk/lib/certificate.js
Module not found: Error: Can't resolve 'crypto' in 'E:\moj-git\MovieApp\node_modules\sshpk\lib'
ERROR in ./node_modules/sshpk/lib/formats/openssh-cert.js
Module not found: Error: Can't resolve 'crypto' in 'E:\moj-git\MovieApp\node_modules\sshpk\lib\formats'
ERROR in ./node_modules/sshpk/lib/formats/pem.js
Module not found: Error: Can't resolve 'crypto' in 'E:\moj-git\MovieApp\node_modules\sshpk\lib\formats'
ERROR in ./node_modules/sshpk/lib/formats/ssh-private.js
Module not found: Error: Can't resolve 'crypto' in 'E:\moj-git\MovieApp\node_modules\sshpk\lib\formats'
ERROR in ./node_modules/cssstyle/lib/CSSStyleDeclaration.js
Module not found: Error: Can't resolve 'fs' in 'E:\moj-git\MovieApp\node_modules\cssstyle\lib'
ERROR in ./node_modules/jsdom/lib/jsdom/browser/resource-loader.js
Module not found: Error: Can't resolve 'fs' in 'E:\moj-git\MovieApp\node_modules\jsdom\lib\jsdom\browser'
ERROR in ./node_modules/jsdom/lib/jsdom/living/xhr-utils.js
Module not found: Error: Can't resolve 'fs' in 'E:\moj-git\MovieApp\node_modules\jsdom\lib\jsdom\living'
ERROR in ./node_modules/pn/fs.js
Module not found: Error: Can't resolve 'fs' in 'E:\moj-git\MovieApp\node_modules\pn'
ERROR in ./node_modules/request/lib/har.js
Module not found: Error: Can't resolve 'fs' in 'E:\moj-git\MovieApp\node_modules\request\lib'
ERROR in ./node_modules/forever-agent/index.js
Module not found: Error: Can't resolve 'http' in 'E:\moj-git\MovieApp\node_modules\forever-agent'
ERROR in ./node_modules/jsdom/lib/jsdom/living/xmlhttprequest.js
Module not found: Error: Can't resolve 'http' in 'E:\moj-git\MovieApp\node_modules\jsdom\lib\jsdom\living'
ERROR in ./node_modules/request/request.js
Module not found: Error: Can't resolve 'http' in 'E:\moj-git\MovieApp\node_modules\request'
ERROR in ./node_modules/request/node_modules/http-signature/lib/signer.js
Module not found: Error: Can't resolve 'http' in 'E:\moj-git\MovieApp\node_modules\request\node_modules\http-signature\lib'
ERROR in ./node_modules/tunnel-agent/index.js
Module not found: Error: Can't resolve 'http' in 'E:\moj-git\MovieApp\node_modules\tunnel-agent'
ERROR in ./node_modules/forever-agent/index.js
Module not found: Error: Can't resolve 'https' in 'E:\moj-git\MovieApp\node_modules\forever-agent'
ERROR in ./node_modules/request/request.js
Module not found: Error: Can't resolve 'https' in 'E:\moj-git\MovieApp\node_modules\request'
ERROR in ./node_modules/tunnel-agent/index.js
Module not found: Error: Can't resolve 'https' in 'E:\moj-git\MovieApp\node_modules\tunnel-agent'
ERROR in ./node_modules/forever-agent/index.js
Module not found: Error: Can't resolve 'net' in 'E:\moj-git\MovieApp\node_modules\forever-agent'
ERROR in ./node_modules/tough-cookie/lib/cookie.js
Module not found: Error: Can't resolve 'net' in 'E:\moj-git\MovieApp\node_modules\tough-cookie\lib'
ERROR in ./node_modules/tunnel-agent/index.js
Module not found: Error: Can't resolve 'net' in 'E:\moj-git\MovieApp\node_modules\tunnel-agent'
ERROR in ./node_modules/jsdom/lib/jsdom/living/file-api/Blob-impl.js
Module not found: Error: Can't resolve 'os' in 'E:\moj-git\MovieApp\node_modules\jsdom\lib\jsdom\living\file-api'
ERROR in ./node_modules/jsdom/lib/jsdom/living/navigator/NavigatorConcurrentHardware-impl.js
Module not found: Error: Can't resolve 'os' in 'E:\moj-git\MovieApp\node_modules\jsdom\lib\jsdom\living\navigator'
ERROR in ./node_modules/cssstyle/lib/CSSStyleDeclaration.js
Module not found: Error: Can't resolve 'path' in 'E:\moj-git\MovieApp\node_modules\cssstyle\lib'
ERROR in ./node_modules/jsdom/lib/api.js
Module not found: Error: Can't resolve 'path' in 'E:\moj-git\MovieApp\node_modules\jsdom\lib'
ERROR in ./node_modules/jsdom/lib/jsdom/utils.js
Module not found: Error: Can't resolve 'path' in 'E:\moj-git\MovieApp\node_modules\jsdom\lib\jsdom'
ERROR in ./node_modules/mime-types/index.js
Module not found: Error: Can't resolve 'path' in 'E:\moj-git\MovieApp\node_modules\mime-types'
ERROR in ./node_modules/combined-stream/lib/combined_stream.js
Module not found: Error: Can't resolve 'stream' in 'E:\moj-git\MovieApp\node_modules\combined-stream\lib'
ERROR in ./node_modules/delayed-stream/lib/delayed_stream.js
Module not found: Error: Can't resolve 'stream' in 'E:\moj-git\MovieApp\node_modules\delayed-stream\lib'
ERROR in ./node_modules/iconv-lite/lib/streams.js
Module not found: Error: Can't resolve 'stream' in 'E:\moj-git\MovieApp\node_modules\iconv-lite\lib'
ERROR in ./node_modules/iconv-lite/lib/extend-node.js
Module not found: Error: Can't resolve 'stream' in 'E:\moj-git\MovieApp\node_modules\iconv-lite\lib'
ERROR in ./node_modules/isstream/isstream.js
Module not found: Error: Can't resolve 'stream' in 'E:\moj-git\MovieApp\node_modules\isstream'
ERROR in ./node_modules/jsprim/node_modules/assert-plus/assert.js
Module not found: Error: Can't resolve 'stream' in 'E:\moj-git\MovieApp\node_modules\jsprim\node_modules\assert-plus'
ERROR in ./node_modules/request/request.js
Module not found: Error: Can't resolve 'stream' in 'E:\moj-git\MovieApp\node_modules\request'
ERROR in ./node_modules/request/node_modules/assert-plus/assert.js
Module not found: Error: Can't resolve 'stream' in 'E:\moj-git\MovieApp\node_modules\request\node_modules\assert-plus'
ERROR in ./node_modules/sshpk/lib/ed-compat.js
Module not found: Error: Can't resolve 'stream' in 'E:\moj-git\MovieApp\node_modules\sshpk\lib'
ERROR in ./node_modules/sshpk/node_modules/assert-plus/assert.js
Module not found: Error: Can't resolve 'stream' in 'E:\moj-git\MovieApp\node_modules\sshpk\node_modules\assert-plus'
ERROR in ./node_modules/verror/node_modules/assert-plus/assert.js
Module not found: Error: Can't resolve 'stream' in 'E:\moj-git\MovieApp\node_modules\verror\node_modules\assert-plus'
ERROR in ./node_modules/forever-agent/index.js
Module not found: Error: Can't resolve 'tls' in 'E:\moj-git\MovieApp\node_modules\forever-agent'
ERROR in ./node_modules/tunnel-agent/index.js
Module not found: Error: Can't resolve 'tls' in 'E:\moj-git\MovieApp\node_modules\tunnel-agent'
ERROR in ./node_modules/request/request.js
Module not found: Error: Can't resolve 'zlib' in 'E:\moj-git\MovieApp\node_modules\request'

Answer 1

您看到的错误是因为ng正在调用Webpack来打包JSDOM。在this issue报告的结尾处，您会发现JSDOM可以简单地转换为将在browserify的浏览器中运行的捆绑软件，因为browserify自动为JSDOM提供了Node模块的替代品调用（例如fs模块）。 Webpack不会自动提供此类替换。因此，您必须自定义应用程序构建以配置Webpack运行以提供此类替换。或使用browserify作为独立步骤。我已经编写了一些Angular应用程序，但始终使用自己的构建过程，而不是使用ng，所以我不知道您如何使用ng来解决这个问题。

话虽这么说，但我根本没有看到为什么使用JSDOM。

我有一个Angular 6项目，我想像浏览器一样解析html（使用脚本等）

Angular通常在浏览器中运行。诸如Angular Universal之类的东西在做服务器端渲染，但是在您的依赖项中什么也没有，这表明您正在尝试这样做。因此，在没有明确声明的情况下，假设您正在以人们通常使用的方式将Angular用作浏览器应用程序。在这种情况下，就没有必要使用JSDOM。如果只想解析，则可以使用DOMParser实例。如果您还想执行页面中可能存在的脚本，则可以创建指向要执行的源的iframe，然后打开其上的sandbox标志并使用same-origin policy中的。 JSDOM不会比使用iframe更快或更安全。告诉JSDOM运行脚本的设置是{ runScripts: "dangerously" }，原因是，如documentation所述：

jsdom沙箱不是万无一失的，如果在DOM的<script>中运行的代码可以尽力而为，则可以访问Node.js环境，从而可以访问您的计算机。

别误会，我喜欢JSDOM。我曾几次为它贡献代码，但我看不出有理由使用它。

在Angular中使用JSDOM

1 个答案: