Angular 测试模式项目教程
1. 项目的目录结构及介绍
angular-test-patterns/
├── src/
│ ├── gitignore
│ ├── travis.yml
│ ├── README.md
│ ├── angular.json
│ ├── karma.conf.js
│ ├── package-lock.json
│ ├── package.json
│ ├── protractor.conf.js
│ ├── tsconfig.json
│ └── tslint.json
├── init-repo.sh
└── README.md
src/
:包含项目的源代码和配置文件。gitignore
:Git 忽略文件配置。travis.yml
:Travis CI 配置文件。README.md
:项目说明文档。angular.json
:Angular 项目配置文件。karma.conf.js
:Karma 测试运行器配置文件。package-lock.json
:锁定依赖版本的文件。package.json
:Node.js 项目配置文件。protractor.conf.js
:Protractor 端到端测试配置文件。tsconfig.json
:TypeScript 编译配置文件。tslint.json
:TypeScript 代码风格检查配置文件。
init-repo.sh
:初始化本地仓库的脚本。README.md
:项目的主说明文档。
2. 项目的启动文件介绍
项目的启动文件主要是 package.json
中的 scripts
部分。以下是一些常用的启动命令:
{
"scripts": {
"test": "npm run test-unit && npm run test-e2e",
"test-unit": "karma start karma.conf.js",
"test-e2e": "protractor protractor.conf.js",
"start": "ng serve"
}
}
npm start
:启动开发服务器。npm test
:运行单元测试和端到端测试。npm run test-unit
:运行单元测试。npm run test-e2e
:运行端到端测试。
3. 项目的配置文件介绍
angular.json
angular.json
是 Angular 项目的配置文件,包含了项目的构建、测试和服务器配置等信息。
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"angular-test-patterns": {
"projectType": "application",
"schematics": {},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/angular-test-patterns",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css"
],
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"bundleBudget": {
"maximumWarning": "2mb",
"maximumError": "5mb"
},
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"