node.js - Angular Quickstart 未能通过开箱即用的 karma 测试

Question

在 Windows 10 上全新安装后，官方 Angular 快速入门无法运行 karma 测试。我只输入了以下 4 个命令:

C:\projects\temp>git clone https://github.com/angular/quickstart.git
C:\projects\temp>cd C:\projects\temp\quickstart  
C:\projects\temp\quickstart>npm install    
...install logs omitted for brevity  
C:\projects\temp\quickstart>npm start  
...app launched successfully, but logs omitted for brevity  
C:\projects\temp\quickstart>npm test  
...Error shown in complete logs below  

最终命令后产生的完整错误消息如下:

C:\projects\temp\quickstart>npm test

> angular-quickstart@1.0.0 pretest C:\projects\temp\quickstart
> npm run build


> angular-quickstart@1.0.0 build C:\projects\temp\quickstart
> tsc -p src/


> angular-quickstart@1.0.0 test C:\projects\temp\quickstart
> concurrently "npm run build:watch" "karma start karma.conf.js"

[0]
[0] > angular-quickstart@1.0.0 build:watch C:\projects\temp\quickstart
[0] > tsc -p src/ -w
[0]
[1] 01 06 2017 14:33:49.385:WARN [watcher]: Pattern "C:/projects/temp/quickstart/testing/**/*.js" does not match any file.
[1] 01 06 2017 14:33:49.406:WARN [watcher]: Pattern "C:/projects/temp/quickstart/testing/**/*.ts" does not match any file.
[1] 01 06 2017 14:33:49.407:WARN [watcher]: Pattern "C:/projects/temp/quickstart/testing/**/*.js.map" does not match any file.
[1] 01 06 2017 14:33:49.891:WARN [karma]: No captured browser, open http://localhost:9876/
[1] 01 06 2017 14:33:49.906:WARN [karma]: Port 9876 in use
[1] 01 06 2017 14:33:49.908:INFO [karma]: Karma v1.7.0 server started at http://0.0.0.0:9877/
[1] 01 06 2017 14:33:49.908:INFO [launcher]: Launching browser Chrome with unlimited concurrency
[1] 01 06 2017 14:33:49.958:INFO [launcher]: Starting browser Chrome
[1] 01 06 2017 14:33:51.821:INFO [watcher]: Changed file "C:/projects/temp/quickstart/src/app/app.component.js".
[1] 01 06 2017 14:33:51.843:INFO [watcher]: Changed file "C:/projects/temp/quickstart/src/app/app.component.spec.js".
[1] 01 06 2017 14:33:51.850:INFO [watcher]: Changed file "C:/projects/temp/quickstart/src/app/app.module.js".
[0] 2:33:51 PM - Compilation complete. Watching for file changes.
[1] 01 06 2017 14:33:51.873:INFO [watcher]: Changed file "C:/projects/temp/quickstart/src/main.js".
[1] 01 06 2017 14:33:51.965:INFO [Chrome 58.0.3029 (Windows 10 0.0.0)]: Connected on socket pXysNFDP8RC3agm8AAAA with id 9156960
[1] 01 06 2017 14:33:52.077:INFO [karma]: Delaying execution, these browsers are not ready: Chrome 58.0.3029 (Windows 10 0.0.0)

为了让 npm test 在 Windows 10 上开箱即用成功，需要进行哪些更改？

Answer 1

Angular 快速入门项目已基本被 Angular CLI 取代。我建议在任何新项目中使用 CLI，因为它不仅为您的应用程序提供了一个初始框架，而且还会生成您扩展应用程序时所需的附加样板。

在安装 Angular CLi 之前，请确保您拥有最新版本的 Node(6.9.0 或更高版本)和 NPM(3 或更高版本)。另外可能还有文档中未列出的其他先决条件，要在 Android 系统上安装，我发现它还需要安装 Python 2.7 和 g++。

安装方式:

npm install -g @angular/cli

创建新项目:

ng new PROJECT-NAME
cd PROJECT-NAME
ng serve

ng new 将需要一些时间才能完成，因为除了构建项目结构之外，它还执行 npm install。

使用 ng test 运行单元测试，并使用 ng e2e 运行端到端测试。ng test 和 ngserve 都将持续运行，监视更改并重建受影响的代码。如果您愿意，您甚至可以让两者在单独的窗口中运行。

nggenerateBLUEPRINT 将生成新的代码，蓝图包括 module、component、service、class、directive、enum、guard、interface、pipe其他有用的命令:在编写真正的应用程序之前，您可能需要对此进行一些试验:默认情况下，每个组件或服务都会进入其自己的子目录并添加到顶级应用程序模块中，但如果您愿意，您可以显式创建模块以提供额外的结构.

• ng build:将您的应用程序构建到输出路径中。
• ng doc KEYWORD:打开该关键字的 Angular 文档。
• ng pop:弹出应用程序并输出 webpack 配置
• ng lint:对项目进行 lints
• ng xi18n:从项目中提取 i18n 消息。