尽管程序运行没有问题, 但是测试还是出现了问题: router-outlet is not an angular component. 可以看一下spec list: ? ?...这时因为运行测试的时候, admin模块是独立运行的, 所以该模块并没有引用Router模块, 所以无法识别router-outlet. 那么如何解决这个问题?...-sm 生成sourcemaps 默认开启 --watch -w 运行测试一次, 并且检测变化 默认开启 ng test 就是运行测试, 并且如果文件有变化, 就会重新运行测试....E2E测试的参数. 实际上angular cli是配合着protractor来进行这个测试的. 它的命令是 ng e2e....ng e2e -ee Debug E2E测试.
背景 端到端测试(End-to-end Testing),用于验证应用的整体行为。...相对于单元测试(Unit Testing)专注在函数功能验证,e2e 更容易出现外部依赖,比如依赖外部 HTTP 接口数据、MYSQL 数据、Redis 数据等,这些都可以理解为外部数据依赖,影响应用的行为...所以,只要能 mock 这些依赖,就能稳定的运行 e2e 测试用例。 问题引入 这里把问题聚焦在 Node 应用,隔离其他 HTTP 依赖,稳定运行每个接口的测试用例。...所以这里的问题是: 一个外部 HTTP 依赖,要记录多种场景的请求参数/返回数据; 记录的数据和测试用例匹配; 测试用例运行时,能根据命令,执行录制外部 HTTP 请求,或者读取已经录制的 HTTP 请求...测试中,就可以稳定的重放 HTTP 响应,保证 CI 的时候测试用例正常运行。
端到端测试(e2e) Angular中的测试有哪些种,基于哪些测试框架 Angular的测试主要包括单元测试(Unit Test)和端到端测试(e2e)。...端到端测试(e2e):基于protractor。protractor是Angular专用的e2e框架。 什么是Karma? 在Angular中有什么作用?...Karma还会监视文件,并且只要文件发生更改,就可以触发测试重新运行。 同时Karma还可以统计代码覆盖率(Code Coverage)。...它在真实的浏览器中运行测试,并像真实的人一样与之交互。 与单元测试不同,在单元测试中,我们测试各个功能,而在这里,我们测试整个逻辑。...(e2e) 基于Protractor,测试成本比较高,一般能覆盖阳光测试用例(sunny case)即可。
Angular CLI 使用教程指南参考 Angular CLI 现在虽然可以正常使用但仍然处于测试阶段. Angular CLI 依赖 Node 4 和 NPM 3 或更高版本....安装 要安装Angular CLI你需要先安装node和npm,然后运行以下命令来安装最新的Angular CLI: 注意:Angular CLI 需要Node 4.X 和 NPM 3.X 以上的版本支持...文档并搜索当前关键字 ng e2e 命令 描述 ng e2e 使用protractor在当前应用中运行e2e测试 ng format 命令 描述 ng format 使用clang-format格式化当前项目代码...ng lint 命令 描述 ng lint 在项目上运行codelyzer linter ng test 命令 描述 ng test [options] 使用 karma 运行单元测试 参数 描述...--watch 继续运行测试.
使用Angular CLI进行单元测试和E2E测试 第一篇文章是: "使用angular cli生成angular5项目" : http://www.cnblogs.com/cgzl/p/8594571...可以看一下spec list: 这时因为运行测试的时候, admin模块是独立运行的, 所以该模块并没有引用Router模块, 所以无法识别router-outlet. 那么如何解决这个问题?...-sm 生成sourcemaps 默认开启 --watch -w 运行测试一次, 并且检测变化 默认开启 ng test 就是运行测试, 并且如果文件有变化, 就会重新运行测试....ng e2e -ee Debug E2E测试....所以执行ng e2e: 测试通过, 但是浏览器闪了一下就关闭了.
angualr cli就是一个支持 创建工程,添加文件,对各种任务如测试、打包、部署等迭代。...点击这个网址,Nodejs安装文件下载 在命令行中,执行: sudo npm install -g @angular/cli 注意执行命令的权限,否则会提示无法写入文件异常。...src . ├── README.md ├── e2e │ ├── app.e2e-spec.ts │ ├── app.po.ts │ └── tsconfig.e2e.json ├── karma.conf.js...CLI会自动添加js和css资源 main.ts 应用的主要入口,基于JIT编译应用,并在浏览器中运行。...file 作用 e2e 里面包含了点对点的测试文件 node_modules 依赖的资源,基于package.json管理 .angular-cli.json cli的配置文件 .editorconfig
Node.js Angular 需要 Node.js 的 8.x 或 10.x 版本。 要想检查你的版本,请在终端/控制台窗口中运行 node -v 命令。 2....第二步:创建工作区和初始应用 Angular 工作区就是你开发应用的上下文环境。 每个工作区包含一些供一个或多个项目使用的文件。 每个项目都是一组由应用、库或端到端(e2e)测试构成的文件。...还将创建下列工作区和初始项目文件: 一个新的工作区,根目录名叫 my-app 一个初始的骨架应用项目,也叫 my-app(但位于 src 子目录下) 一个端到端测试项目(位于 e2e 子目录下) 相关的配置文件...端到端测试文件(基本用不到) 根级的 e2e/ 文件夹中包含一组针对根应用的端到端测试的源文件,以及测试专属的配置文件。...对于多项目的工作空间,应用专属的端到端测试文件都位于项目各自的根目录下,即 projects/project-name/e2e/。
node 官网:https://nodejs.org/ nodejs不是一个js框架,千万不要认为是类似jquery的框架,nodejs是js运行时,运行环境,类比java中jvm。...nodejs是和jvm同等地位的js运行环境,打开了前端人员走向后端的道路。...无法接受代码的同时还夹个HTML代码这样原始的方式。 对UI的描述自成一体,而不是采用CSS或者SCSS。...有官方的UI方案Material Design供选择 官工具链相对于React要成熟 有angular-cli这个便利化的工具,并提供E2E的测试,用以方便测试,并保证项目的质量。...就这么 简单,这时候你的项目已经运行起来了。
第一步:安装 Angular CLI 你要使用 Angular CLI 来创建项目、创建应用和库代码,并执行多种开发任务,比如测试、打包和发布。 全局安装 Angular CLI。...每个项目都是一组由应用、库或端到端(e2e)测试构成的文件。...希望创建工作区和初始化应用项目: 运行 CLI 命令 ng new,并提供一个名字 my-app,如下所示:ng new my-app ng new 会提示你要把哪些特性包含在初始的应用项目中。...还将创建下列工作区和初始项目文件: 一个新的工作区,根目录名叫 my-app 一个初始的骨架应用项目,也叫 my-app(但位于 src 子目录下) 一个端到端测试项目(位于 e2e 子目录下) 相关的配置文件...初始的应用项目是一个简单的 "欢迎" 应用,随时可以运行它。
一、Overview angular 入坑记录的笔记第一篇,完成开发环境的搭建,以及如何通过 angular cli 来创建第一个 angular 应用。...4.1.2、运行第一个 Angular 应用 通过 Angular CLI 命令来创建一个新的应用 ## 指定位置,创建新的 angular 应用 ng new my-app 常用命令参数 options...运行项目 ## 运行项目 ng serve 常用命令参数 options 解释 --open / -o 是否直接打开浏览器 --port 指定程序运行的端口 ?...e2e - 端到端测试文件 src - 单元测试源代码路径 app.e2e-spec.ts - 针对当前应用的端到端单元测试文件 app.po.ts - 单元测试源文件 protractor.conf.js...NET 项目中的解决方案,在一个工作空间内可以创建多个的项目↩ 2 现代浏览器支持的某些原生 API,当用户使用老版本的浏览器或某些浏览器时并不支持,只要使用了 polyfills 这个库, 即可对于这些无法使用的浏览器添加支持
app.component.html(HTML模板) |--app.component.css(CSS样式表) 目录结构描述: ## 说明 ```javascript |-- 文件名 // 说明 |-- 首层目录 |-- e2e...[请求数据时使用] ngDoCheck() 检测,并在发生 Angular 无法或不愿意自己检测的变化时作出反应。...它允许你做以下这些事情: 创建一个新的 Angular 应用程序 运行带有 LiveReload 支持的开发服务器,以便在开发过程中预览应用程序 添加功能到现有的 Angular 应用程序 运行应用程序的单元测试...运行应用程序的端到端 (E2E) 测试 构建应用程序 使用命令添加功能到现有的 Angular 应用程序: 可以使用 ng generate 命令,为已有的 Angular 应用程序添加新的功能: ng...在my-blog项目中创建博客后台页面首页组件,配置路由(多模块路由配置),声明运行组件: 1、创建首页组件: ng generate component /pages/my-blog/index ?
本项目用的是angular6搭建,用动态组件的形式来显示页面,之前遇到过因为内存溢出而导致无法aot的问题, Angular4以上的该方法都适用 解决方法:手动改写内存上限 修改目录: my-project...4201 --live-reload false", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e...": "ng e2e", "build-prod": "node --max_old_space_size=8192 ...."@angular/compiler": "^6.1.0", "@angular/core": "^6.1.0", "@angular/forms": "^6.1.0", "@angular..."tslint": "~5.11.0", "typescript": "~2.9.2" } } 下一篇: Docker 安装运行
/spring-boot-angular/* . 使用 Travis CI 测试此应用程序时,我运行了 npm install 作为该过程的一部分。...在 Jenkins X 中运行 Protractor 测试 对我来说,弄清楚如何在 Jenkins X 中运行端到端测试是最难的。.../mvnw verify -Pprod,e2e 以在本地运行端到端测试。请注意,你需要将 E2E_USERNAME 和 E2E_PASSWORD 定义为环境变量。...: 在 crypto-pwa/e2e/spec/login.e2e-spec.ts 中,我无法通过 should show a login button 测试,所以我忽略了它,将 it(…) 改为 xit...第一次运行时测试可能会失败,因为未为新预览环境配置注销重定向URI。
-X GET http://localhost:8080/get返回结果{"1":"Hello Java","2":"Hello Angular"}测试修改数据接口curl -X PUT http:/...测试删除数据接口curl -X DELETE 'http://localhost:8080/delete?...(212 bytes)CREATE angular/e2e/protractor.conf.js (752 bytes)CREATE angular/e2e/tsconfig.e2e.json (213...bytes)CREATE angular/e2e/src/app.e2e-spec.ts (299 bytes)CREATE angular/e2e/src/app.po.ts (204 bytes)..."e2e": { "builder": "@angular-devkit/build-angular:protractor", "options": {
运行项目 ng serve --open 4....项目结构 e2e: end-to-end测试 src: 项目源码 .angular-cli.json: angular cli配置文件 tsconfig.json tsconfig.app.json tsconfig.spec.json...browserslist: 浏览器支持配置 main.ts: 应用入口 polyfills.ts: 腻子脚本,能把浏览器对 Web不同点进行标准化 styles.css: 全局样式 test.ts: 测试入口.../app.component'; // 告诉angular如何编译启动模块 @NgModule({ // 当前项目运行的组件 declarations: [ AppComponent...], // 项目运行依赖的其他模块 imports: [ BrowserModule ], // 当前项目所需服务 providers: [], // 指定应用主视图组件
安装 Angular CLI 后,您需要运行一个命令来生成一个项目,并运行另一个命令来使用本地开发服务器来运行您的应用程序。...Angular CLI 快速指南 安装 Angular CLI 后,您可以运行许多命令。...e2e (e): 构建并提供 Angular 应用程序,然后使用 Protractor 运行端到端测试。 generate (g): 根据原理图生成和/或修改文件。...run: 运行项目中定义的自定义目标。 serve (s): 构建并服务您的应用程序,根据文件更改进行重建。 test (t): 在项目中运行单元测试。 update: 更新您的应用程序及其依赖项。...我们看看各个文件的作用: /e2e/:包含网站的端到端(模拟用户行为)测试 /node_modules/:使用 npm install 将所有 3rd 方库安装到此文件夹 /src/:包含应用程序的源代码
在 Jenkins X 中运行 Protractor 测试 对我来说,弄清楚如何在 Jenkins X 中运行端到端测试是最难的。...我发现运行 npm e2e 与 frontend-maven-plugin 不兼容,因为它只调用其他 npm run 命令。.../mvnw verify -Pprod,e2e 以在本地运行端到端测试。请注意,你需要将 E2E_USERNAME 和 E2E_PASSWORD 定义为环境变量。...我确实需要做一些额外的调整才能通过所有的 Protractor 测试: 在 crypto-pwa/e2e/spec/login.e2e-spec.ts 中,我无法通过 should show a login...第一次运行时测试可能会失败,因为未为新预览环境配置注销重定向URI。
创建一个新工作区并且初始化应用 Angular 的工作区就是你开发应用所在的上下文环境。一个工作区包含一个或多个项目所需的文件。每个项目都是一组由应用、库或端到端(e2e)测试组成的文件集合。...运行 CLI 命令 ng new 然后提供空间的名字 angular-tour-of-heroes, 完整的命令如下显示: ng new angular-tour-of-heroes ng new...Angular CLI 会安装必要的 Angular npm 包和其它依赖项。这可能需要几分钟。...一个最初的骨架应用项目,同样叫做 angular-tour-of-heroes(位于 src 子目录下)。 一个端到端测试项目(位于 e2e 子目录下)。 相关的配置文件。...初始应用项目是一个简单的 "欢迎" 应用,随时可以运行它。 启动应用服务器 进入工作区目录,并启动这个应用。
创建一个新工作区并且初始化应用 Angular 的工作区就是你开发应用所在的上下文环境。一个工作区包含一个或多个项目所需的文件。每个项目都是一组由应用、库或端到端(e2e)测试组成的文件集合。...运行 CLI 命令 ng new 然后提供空间的名字 angular-tour-of-heroes, 完整的命令如下显示: ng new angular-tour-of-heroes ng new ...Angular CLI 会安装必要的 Angular npm 包和其它依赖项。这可能需要几分钟。...一个最初的骨架应用项目,同样叫做 angular-tour-of-heroes(位于 src 子目录下)。 一个端到端测试项目(位于 e2e 子目录下)。 相关的配置文件。...初始应用项目是一个简单的 "欢迎" 应用,随时可以运行它。 启动应用服务器 进入工作区目录,并启动这个应用。
/node_modules/protractor/bin/webdriver-manager update", "e2e": "ng e2e" }, "private":...kakirigi/ika.jvectormap" }, "dependencies": { "@agm/core": "1.0.0-beta.0", "@angular.../animations": "4.0.2" }, "devDependencies": { "@angular/cli": "1.0.0", "@angular...比如,abc命令对应的脚本是ng generate component MyGridApplication 我们如果要执行abc指令应该这样运行npm run abc
领取专属 10元无门槛券
手把手带您无忧上云