ng serve 启动后抛出 Critical dependency and Module not found 警告和错误

现象

使用 ng serve –open 启动项目后，控制台打印

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
                                                                                          
Date: 2019-03-25T14:38:18.307Z
Hash: 98d84aa65fa50422d274
Time: 15261ms
chunk {main} main.js, main.js.map (main) 75.1 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 237 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]
chunk {scripts} scripts.js, scripts.js.map (scripts) 479 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 17.1 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 6.08 MB [initial] [rendered]

WARNING in ./node_modules/protractor/built/debugger.js 40:33-40
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

WARNING in ./node_modules/protractor/built/runner.js 405:19-41
Critical dependency: the request of a dependency is an expression

WARNING in ./node_modules/webdriver-manager/built/lib/config.js 62:25-57
Critical dependency: the request of a dependency is an expression

WARNING in ./node_modules/webdriver-manager/built/lib/config.js 47:25-57
Critical dependency: the request of a dependency is an expression

WARNING in ./node_modules/protractor/built/configParser.js 135:25-42
Critical dependency: the request of a dependency is an expression

WARNING in ./node_modules/protractor/built/plugins.js 52:32-45
Critical dependency: the request of a dependency is an expression

WARNING in ./node_modules/protractor/built/util.js 43:27-75
Critical dependency: the request of a dependency is an expression

WARNING in ./node_modules/webdriver-manager/built/lib/config.js 75:26-59
Critical dependency: the request of a dependency is an expression

WARNING in ./node_modules/protractor/built/configParser.js
Module not found: Error: Can't resolve 'LiveScript' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\protractor\built'

WARNING in ./node_modules/protractor/built/configParser.js
Module not found: Error: Can't resolve 'coffee-script' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\protractor\built'

WARNING in ./node_modules/protractor/built/configParser.js
Module not found: Error: Can't resolve 'coffeescript' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\protractor\built'

WARNING in ./node_modules/protractor/node_modules/source-map-support/source-map-support.js
Module not found: Error: Can't resolve 'fs' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\protractor\node_modules\source-map-support'

WARNING in ./node_modules/protractor/node_modules/source-map-support/source-map-support.js
Module not found: Error: Can't resolve 'module' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\protractor\node_modules\source-map-support'

WARNING in ./node_modules/minimatch/minimatch.js
Module not found: Error: Can't resolve 'path' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\minimatch'

WARNING in ./node_modules/sax/lib/sax.js
Module not found: Error: Can't resolve 'stream' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\sax\lib'

ERROR in ./node_modules/saucelabs/index.js
Module not found: Error: Can't resolve './lib-cov/SauceLabs' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\saucelabs'
ERROR in ./node_modules/protractor/built/runner.js
Module not found: Error: Can't resolve 'child_process' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\protractor\built'
ERROR in ./node_modules/protractor/built/debugger.js
Module not found: Error: Can't resolve 'child_process' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\protractor\built'
ERROR in ./node_modules/protractor/built/bpRunner.js
Module not found: Error: Can't resolve 'child_process' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\protractor\built'
ERROR in ./node_modules/selenium-webdriver/firefox/binary.js
Module not found: Error: Can't resolve 'child_process' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\selenium-webdriver\firefox'
ERROR in ./node_modules/selenium-webdriver/io/exec.js
Module not found: Error: Can't resolve 'child_process' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\selenium-webdriver\io'
ERROR in ./node_modules/selenium-webdriver/net/portprober.js
Module not found: Error: Can't resolve 'child_process' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\selenium-webdriver\net'
ERROR in ./node_modules/saucelabs/lib/SauceLabs.js
Module not found: Error: Can't resolve 'crypto' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\saucelabs\lib'
ERROR in ./node_modules/selenium-webdriver/node_modules/tmp/lib/tmp.js
Module not found: Error: Can't resolve 'crypto' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\selenium-webdriver\node_modules\tmp\lib'
ERROR in ./node_modules/blocking-proxy/built/lib/webdriver_logger.js
Module not found: Error: Can't resolve 'fs' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\blocking-proxy\built\lib'
ERROR in ./node_modules/fs.realpath/index.js
Module not found: Error: Can't resolve 'fs' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\fs.realpath'
ERROR in ./node_modules/fs.realpath/old.js
Module not found: Error: Can't resolve 'fs' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\fs.realpath'
ERROR in ./node_modules/glob/glob.js
Module not found: Error: Can't resolve 'fs' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\glob'
ERROR in ./node_modules/glob/sync.js
Module not found: Error: Can't resolve 'fs' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\glob'
ERROR in ./node_modules/protractor/built/logger.js
Module not found: Error: Can't resolve 'fs' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\protractor\built'
ERROR in ./node_modules/protractor/built/driverProviders/local.js
Module not found: Error: Can't resolve 'fs' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\protractor\built\driverProviders'
ERROR in ./node_modules/protractor/built/driverProviders/direct.js
Module not found: Error: Can't resolve 'fs' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\protractor\built\driverProviders'
ERROR in ./node_modules/rimraf/rimraf.js
Module not found: Error: Can't resolve 'fs' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\rimraf'
ERROR in ./node_modules/selenium-webdriver/chrome.js
Module not found: Error: Can't resolve 'fs' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\selenium-webdriver'
ERROR in ./node_modules/selenium-webdriver/edge.js
Module not found: Error: Can't resolve 'fs' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\selenium-webdriver'
ERROR in ./node_modules/selenium-webdriver/opera.js
Module not found: Error: Can't resolve 'fs' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\selenium-webdriver'
ERROR in ./node_modules/selenium-webdriver/ie.js
Module not found: Error: Can't resolve 'fs' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\selenium-webdriver'
ERROR in ./node_modules/selenium-webdriver/phantomjs.js
Module not found: Error: Can't resolve 'fs' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\selenium-webdriver'
ERROR in ./node_modules/selenium-webdriver/firefox/extension.js
Module not found: Error: Can't resolve 'fs' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\selenium-webdriver\firefox'
ERROR in ./node_modules/selenium-webdriver/firefox/binary.js
Module not found: Error: Can't resolve 'fs' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\selenium-webdriver\firefox'
ERROR in ./node_modules/selenium-webdriver/firefox/profile.js
Module not found: Error: Can't resolve 'fs' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\selenium-webdriver\firefox'
ERROR in ./node_modules/selenium-webdriver/io/index.js
Module not found: Error: Can't resolve 'fs' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\selenium-webdriver\io'
ERROR in ./node_modules/selenium-webdriver/lib/devmode.js
Module not found: Error: Can't resolve 'fs' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\selenium-webdriver\lib'
ERROR in ./node_modules/selenium-webdriver/net/portprober.js
Module not found: Error: Can't resolve 'fs' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\selenium-webdriver\net'
ERROR in ./node_modules/selenium-webdriver/node_modules/tmp/lib/tmp.js
Module not found: Error: Can't resolve 'fs' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\selenium-webdriver\node_modules\tmp\lib'
1mERROR in ./node_modules/selenium-webdriver/remote/index.js
Module not found: Error: Can't resolve 'fs' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\selenium-webdriver\remote'
ERROR in ./node_modules/webdriver-manager/built/lib/cli/logger.js
Module not found: Error: Can't resolve 'fs' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\webdriver-manager\built\lib\cli'
ERROR in ./node_modules/blocking-proxy/built/lib/client.js
Module not found: Error: Can't resolve 'http' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\blocking-proxy\built\lib'
ERROR in ./node_modules/blocking-proxy/built/lib/blockingproxy.js
Module not found: Error: Can't resolve 'http' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\blocking-proxy\built\lib'
ERROR in ./node_modules/blocking-proxy/built/lib/simple_webdriver_client.js
Module not found: Error: Can't resolve 'http' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\blocking-proxy\built\lib'
ERROR in ./node_modules/blocking-proxy/built/lib/webdriver_proxy.js
Module not found: Error: Can't resolve 'http' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\blocking-proxy\built\lib'
ERROR in ./node_modules/browserstack/lib/client.js
Module not found: Error: Can't resolve 'http' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\browserstack\lib'
ERROR in ./node_modules/selenium-webdriver/http/index.js
Module not found: Error: Can't resolve 'http' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\selenium-webdriver\http'
ERROR in ./node_modules/agent-base/patch-core.js
Module not found: Error: Can't resolve 'https' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\agent-base'
ERROR in ./node_modules/browserstack/lib/client.js
Module not found: Error: Can't resolve 'https' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\browserstack\lib'
ERROR in ./node_modules/saucelabs/lib/SauceLabs.js
Module not found: Error: Can't resolve 'https' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\saucelabs\lib'
ERROR in ./node_modules/selenium-webdriver/http/index.js
Module not found: Error: Can't resolve 'https' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\selenium-webdriver\http'
ERROR in ./node_modules/https-proxy-agent/index.js
Module not found: Error: Can't resolve 'net' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\https-proxy-agent'
ERROR in ./node_modules/protractor/built/debugger.js
Module not found: Error: Can't resolve 'net' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\protractor\built'
ERROR in ./node_modules/selenium-webdriver/net/portprober.js
Module not found: Error: Can't resolve 'net' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\selenium-webdriver\net'
ERROR in ./node_modules/browserstack/lib/client.js
Module not found: Error: Can't resolve 'os' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\browserstack\lib'
ERROR in ./node_modules/selenium-webdriver/net/index.js
Module not found: Error: Can't resolve 'os' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\selenium-webdriver\net'
ERROR in ./node_modules/webdriver-manager/built/lib/config.js
Module not found: Error: Can't resolve 'os' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\webdriver-manager\built\lib'
ERROR in ./node_modules/blocking-proxy/built/lib/webdriver_logger.js
Module not found: Error: Can't resolve 'path' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\blocking-proxy\built\lib'
ERROR in ./node_modules/fs.realpath/old.js
Module not found: Error: Can't resolve 'path' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\fs.realpath'
ERROR in ./node_modules/glob/common.js
Module not found: Error: Can't resolve 'path' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\glob'
ERROR in ./node_modules/glob/sync.js
Module not found: Error: Can't resolve 'path' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\glob'
ERROR in ./node_modules/glob/glob.js
Module not found: Error: Can't resolve 'path' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\glob'
ERROR in ./node_modules/protractor/built/logger.js
Module not found: Error: Can't resolve 'path' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\protractor\built'
ERROR in ./node_modules/protractor/built/util.js
Module not found: Error: Can't resolve 'path' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\protractor\built'
ERROR in ./node_modules/protractor/built/configParser.js
Module not found: Error: Can't resolve 'path' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\protractor\built'
ERROR in ./node_modules/protractor/built/driverProviders/direct.js
Module not found: Error: Can't resolve 'path' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\protractor\built\driverProviders'
ERROR in ./node_modules/protractor/built/driverProviders/local.js
Module not found: Error: Can't resolve 'path' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\protractor\built\driverProviders'
ERROR in ./node_modules/protractor/node_modules/source-map-support/source-map-support.js
Module not found: Error: Can't resolve 'path' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\protractor\node_modules\source-map-support'
ERROR in ./node_modules/rimraf/rimraf.js
Module not found: Error: Can't resolve 'path' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\rimraf'
ERROR in ./node_modules/selenium-webdriver/firefox/extension.js
Module not found: Error: Can't resolve 'path' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\selenium-webdriver\firefox'
ERROR in ./node_modules/selenium-webdriver/firefox/binary.js
Module not found: Error: Can't resolve 'path' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\selenium-webdriver\firefox'
ERROR in ./node_modules/selenium-webdriver/firefox/profile.js
Module not found: Error: Can't resolve 'path' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\selenium-webdriver\firefox'
ERROR in ./node_modules/selenium-webdriver/io/index.js
Module not found: Error: Can't resolve 'path' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\selenium-webdriver\io'
ERROR in ./node_modules/selenium-webdriver/io/zip.js
Module not found: Error: Can't resolve 'path' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\selenium-webdriver\io'
ERROR in ./node_modules/selenium-webdriver/lib/devmode.js
Module not found: Error: Can't resolve 'path' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\selenium-webdriver\lib'
ERROR in ./node_modules/selenium-webdriver/node_modules/tmp/lib/tmp.js
Module not found: Error: Can't resolve 'path' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\selenium-webdriver\node_modules\tmp\lib'
ERROR in ./node_modules/selenium-webdriver/remote/index.js
Module not found: Error: Can't resolve 'path' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\selenium-webdriver\remote'
ERROR in ./node_modules/webdriver-js-extender/built/lib/command_definition.js
Module not found: Error: Can't resolve 'path' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\webdriver-js-extender\built\lib'
ERROR in ./node_modules/webdriver-manager/built/lib/config.js
Module not found: Error: Can't resolve 'path' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\webdriver-manager\built\lib'
ERROR in ./node_modules/webdriver-manager/built/lib/cli/logger.js
Module not found: Error: Can't resolve 'path' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\webdriver-manager\built\lib\cli'
ERROR in ./node_modules/protractor/built/debugger.js
Module not found: Error: Can't resolve 'repl' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\protractor\built'
ERROR in ./node_modules/jszip/lib/readable-stream-browser.js
Module not found: Error: Can't resolve 'stream' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\jszip\lib'
ERROR in ./node_modules/xml2js/lib/parser.js
Module not found: Error: Can't resolve 'timers' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\xml2js\lib'
ERROR in ./node_modules/https-proxy-agent/index.js
Module not found: Error: Can't resolve 'tls' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\https-proxy-agent'
ERROR in ./node_modules/protractor/built/debugger.js
Module not found: Error: Can't resolve 'vm' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\protractor\built'
ERROR in ./node_modules/selenium-webdriver/firefox/profile.js
Module not found: Error: Can't resolve 'vm' in 'D:\Learn\douban_fake\src\angular\douban\node_modules\selenium-webdriver\firefox'
ERROR in ./node_modules/blocking-proxy/built/lib/bin.js 1:0
Module parse failed: Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
> #!/usr/bin/env node
| "use strict";
| Object.defineProperty(exports, "__esModule", { value: true });

解决

试过源码，读不懂，遂放弃。百度按照报错原因进行搜索，大部分结果都是某模块无法找到，用 npm 重新安装，无法解决。将错误原因

Module parse failed: Unexpected character '#' (1:0) You may need an appropriate loader to handle this file type. > #!/usr/bin/env node | "use strict"; | Object.defineProperty(exports, "__esModule", { value: true });

使用 google 搜索，第一条就是 angular 框架的 issue 列表(https://github.com/angular/angular-cli/issues/12756
)，其中提到一个原因是项目中使用 Protractor 的下面方法会导致该错误import { EventEmitter } from 'protractor';，而项目中恰好使用到该类，

image.png

导致该错误，应该使用

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';

重新启动，成功进行项目

今天的文章ng serve 启动后抛出 Critical dependency and Module not found 警告和错误分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。