Angular 开箱即用的快速入门未能通过业力测试

Angular Quickstart fails karma testing out of the box

官方 Angular quickstart 无法 运行 在 Windows 10 上全新安装后进行业力测试。我输入了以下 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 开箱即用需要改变什么?

这不是答案,只是给出更多案例以找出根本原因。 我按照您描述的步骤进行操作并得到了这个:

D:\Project\temp\quickstart>npm test

> angular-quickstart@1.0.0 pretest D:\Project\temp\quickstart
> npm run build


> angular-quickstart@1.0.0 build D:\Project\temp\quickstart
> tsc -p src/


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

[0]
[0] > angular-quickstart@1.0.0 build:watch D:\Project\temp\quickstart
[0] > tsc -p src/ -w
[0]
[1] 02 06 2017 22:34:04.733:WARN [watcher]: Pattern 
"D:/Project/temp/quickstart/testing/**/*.js" does not match any file.
[1] 02 06 2017 22:34:04.746:WARN [watcher]: Pattern 
"D:/Project/temp/quickstart/testing/**/*.ts" does not match any file.
[1] 02 06 2017 22:34:04.747:WARN [watcher]: Pattern 
"D:/Project/temp/quickstart/testing/**/*.js.map" does not match any file.
[1] 02 06 2017 22:34:05.103:WARN [karma]: No captured browser, open 
http://localhost:9876/
[1] 02 06 2017 22:34:05.120:INFO [karma]: Karma v1.7.0 server started at 
http://0.0.0.0:9876/
[1] 02 06 2017 22:34:05.120:INFO [launcher]: Launching browser Chrome with 
unlimited concurrency
[1] 02 06 2017 22:34:05.156:INFO [launcher]: Starting browser Chrome
[1] 02 06 2017 22:34:06.742:INFO [Chrome 58.0.3029 (Windows 10 0.0.0)]: 
Connected on socket GGConP8Ks64GubSYAAAA with id 70486747
[1] 02 06 2017 22:34:07.822:INFO [watcher]: Changed file 
"D:/Project/temp/quickstart/src/app/app.component.js".
[1] 02 06 2017 22:34:07.837:INFO [watcher]: Changed file 
"D:/Project/temp/quickstart/src/app/app.component.spec.js".
[1] 02 06 2017 22:34:07.856:INFO [watcher]: Changed file 
"D:/Project/temp/quickstart/src/app/app.module.js".
[0] 10:34:07 PM - Compilation complete. Watching for file changes.
[1] 02 06 2017 22:34:07.865:INFO [watcher]: Changed file 
"D:/Project/temp/quickstart/src/main.js".
[1] 02 06 2017 22:34:08.084:INFO [karma]: Delaying execution, these browsers 
are not ready: Chrome 58.0.3029 (Windows 10 0.0.0)
Chrome 58.0.3029 (Windows 10 0.0.0): Executed 2 of 2 SUCCESS (0.159 secs / 
0.149 secs)
Chrome 58.0.3029 (Windows 10 0.0.0): Executed 2 of 2 SUCCESS (0.117 secs / 
0.112 secs)

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 testng serve 都将 运行 持续观察变化并重建受影响的代码。如果您愿意,您甚至可以将 运行ning 分开 windows。

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

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