首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在没有angular-cli的Angular 2项目中,Jasmine中出现意外的标记“Import”问题

是由于缺少对应的依赖或配置导致的。在Angular 2项目中,使用Jasmine进行单元测试时,需要引入一些依赖和配置,以使测试代码能够正确运行。

解决这个问题的步骤如下:

  1. 确保项目中已经安装了Jasmine依赖。可以通过在项目根目录下运行以下命令来安装Jasmine:npm install jasmine --save-dev
  2. 确保项目中已经安装了相关的TypeScript依赖。可以通过在项目根目录下运行以下命令来安装TypeScript:npm install typescript --save-dev
  3. 在项目的根目录下创建一个tsconfig.spec.json文件,并添加以下内容:{ "extends": "./tsconfig.json", "compilerOptions": { "outDir": "./out-tsc/spec", "types": [ "jasmine", "node" ] }, "files": [ "src/test.ts", "src/polyfills.ts" ], "include": [ "src/**/*.spec.ts", "src/**/*.d.ts" ] }
  4. 在项目的根目录下创建一个src/test.ts文件,并添加以下内容:import 'zone.js/dist/zone-testing'; import { getTestBed } from '@angular/core/testing'; import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';

declare const require: any;

getTestBed().initTestEnvironment(

代码语言:txt
复制
 BrowserDynamicTestingModule,
代码语言:txt
复制
 platformBrowserDynamicTesting()

);

const context = require.context('./', true, /.spec.ts$/);

context.keys().map(context);

代码语言:txt
复制
  1. 在项目的根目录下的karma.conf.js文件中,确保已经正确配置了Jasmine测试框架。可以参考以下示例配置:module.exports = function (config) { config.set({ basePath: '', frameworks: ['jasmine', '@angular-devkit/build-angular'], plugins: [ require('karma-jasmine'), require('karma-chrome-launcher'), require('karma-jasmine-html-reporter'), require('karma-coverage-istanbul-reporter'), require('@angular-devkit/build-angular/plugins/karma') ], client: { clearContext: false // leave Jasmine Spec Runner output visible in browser }, coverageIstanbulReporter: { dir: require('path').join(__dirname, './coverage/my-app'), reports: ['html', 'lcovonly', 'text-summary'], fixWebpackSourcePaths: true }, reporters: ['progress', 'kjhtml'], port: 9876, colors: true, logLevel: config.LOG_INFO, autoWatch: true, browsers: ['Chrome'], singleRun: false, restartOnFileChange: true }); };

完成以上步骤后,重新运行Jasmine测试,应该就不会再出现意外的标记“Import”问题了。

关于Jasmine的更多信息和用法,请参考腾讯云的相关产品和文档:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • node-sass 埋坑记录

    后来,接手新项目中Angular-CLI:v8.x 由于升级了 Angular 版本,同样也升级了 Angular-CLI 版本,导致 v8.x 版本 node 已经无法编译 angular 项目...请确认 声明路径正确,且磁盘上存在该文件 gyp ERR!...小结 之所以以前正常,新项目出现种种问题,原因在于各环境版本升级,所以,需要明确,各个环境、框架之间都是有依赖关系,不是任意版本组合就可以,比如: angular v8 版本就需要依赖 angular-cli...下载失败 请先确认是否是镜像问题,可以手动浏览器地址栏输入 node-sass 下载地址(可在 package.json.lock 查看),看是否能够找到对应版本 node-sass 出现文章开头说过几种...,所以下载基本 node 之类库是没有问题,上面的解决步骤也一样可以参考执行。

    4.3K10

    angular 2+组件 - 框架 - 集成 - 构建文档 - ckeditor5文文档

    由于缺乏angular-cli调整webpack配置能力,因此无法集成从源构建CKEditor 5。...虽然目前还没有支持从源代码集成CKEditor 5,但您仍然可以创建CKEditor 5自定义构建并将其包含在Angular应用程序。...快速开始 现有的Angular目中,为Angular 2+安装CKEditor 5 WYSIWYG编辑器组件: npm install --save @ckeditor/ckeditor5-angular...CKEditorModule,         ...     ],     ... } ) Angular组件中导入编辑器构建并将其分配给public属性,以便在模板可以访问它: import...贡献和报告问题 Angular 2+富文本编辑器组件源代码可以GitHub上https://github.com/ckeditor/ckeditor5-angular中找到。

    3.5K20

    Angular学习(01)-架构概览

    那么,组件是怎么告诉 Angular 呢? 同样 Android 项目或者后端项目中,也有一些依赖注入框架,那些通常都是借助注解方式来实现。...angular.json 这是 Angular-CLI 配置文件,而 Angular-CLI 是自动化工程构建工具,也就是利用这个工具,可以帮助我们完成很多工作,比如创建项目、创建文件、构建、打包等等...这些工作就可以借助 Angular-CLI 来进行。另外,创建一个模块,创建一个组件,也都可以通过 Angular-CLI 来。...app/src 源码 以上就是利用 Angular-CLI 创建项目生成初始架构各个文件大概用途,下面讲讲 Angular 项目的大概运行流程。...比如,我们新创建个 Home 模块,然后根模块创建个 app-routing 路由配置文件: //app-routing.module.ts import { NgModule } from '@angular

    3.6K50

    Angular开发实践(二):HRM运行机制

    引言 angular-start项目中启用了模块热替换(HMR - Hot Module Replacement)功能,关于如何在angular-cli启用HRM,请查看HRM配置 那HMR是个什么东西呢...HMR是webpack提供一个功能,angular-cli使用了它,它会在应用程序运行过程替换、添加或删除模块,而无需重新加载整个页面。...通常将这些ID存储在内存(例如,使用webpack-dev-server时),但是也可能将它们存储一个JSON文件模块 HMR是可选功能,只会影响包含HMR代码模块。...如果请求失败,说明没有可用更新。如果请求成功,待更新chunk会和当前加载过chunk进行比较。对每个加载过chunk,会下载相对应待更新chunk。...apply方法将所有被更新模块标记为无效。对于每个无效模块,都需要在模块中有一个更新处理函数,或者父级模块们中有更新处理函数。否则,无效标记冒泡,并也使父级无效。

    1.7K70

    有了ng-zorro-mobile,ionic4如虎添翼

    前端一般会听过阿里Ant Design,而对于angular使用者,大多也听过ng-zorro(Ant Design for AngularPC版),最近一次ng-zorro更新,带来了新开源迷弟...ionic使用 众所周知,ionic自身也是一个UI框架,涵盖绝大多数常用组件,但有些组件没有或不好用,就要借助第三方组件,现在有了ng-zorro-mobile,对ionic有了极大补充。...创建项目 ionic start PROJECT-NAME 然后接入ng-zorro-antd-mobile,其中有两种方式: 使用angular-cli只需要以下一句命令即可完成模块初始化配置(前提安装了...angular-cli): ng add ng-zorro-antd-mobile 使用npm,则先安装模块: npm install ng-zorro-antd-mobile --save 然后 app.modules.ts...,全局引入 ng-zorro-antd-mobile: import { NgZorroAntdMobileModule } from 'ng-zorro-antd-mobile'; imports

    2.6K30

    angular4实战(1) angular-cli

    https://cli.angular.io/ 提供了搭建一个angular项目的简单介绍。 本文就angular-cli这块指令属性,在做一些扩展介绍。...在下载好angular-cli之后,通过命令行输入ng help可以获得angular-cli指令详细介绍。 ? 如果新建一个项目仅仅用上述5条,显然是不满足开发需求介绍5条属性。...—routing angular生成项目默认是不带路由,而路由但也应用基本上是必备模块,因此在生成项目时需添加此属性。...我这边都是没有做inline设置,个人不喜欢这种把其他东西柔脚本里方式。 组件生成 之前用angularjs时候,有自己写生成组件脚本,换到4之后,发现天生带这个功能,很喜欢。...比如生成一个名为stones组件,只需运行命令: ng g component stones 就ok了,然后会依照之前ng new项目时配置app目录下生成相应组件,并自动加入到依赖,非常方便

    66820

    Angular开发实践(一):环境准备及框架搭建

    引言 在工作引入Angular框架将近一年了,在这一年不断踩坑和填坑,当然也学习和积累了很多知识,包括MVVM框架、前后端分离、前端工程化、SPA优化等等。...介绍之前,我假定你了解或者熟悉: NodeJs Npm Git Sass TypeScript angular-cli 环境准备 全局安装NodeJs(>6.9.x),包含npm(>3.x.x) 全局安装...angular-cli npm install -g @angular/cli IDE推荐使用WebStorm 框架搭建 angular-start是我GitHub上维护一个起步项目,你可以直接下载作为基础开发框架来使用...可能你还想了解下该项目中文件都是干什么用,那么我们就来了解下。 项目文件概览 src文件夹 应用代码位于src文件夹。所有的Angular组件、模板、样式、图片以及应用所需任何东西都在这里。...其它文件是用来帮助我们构建、测试、维护、文档化和发布应用。它们放在根目录下,和src/平级。 ? 根目录 e2e/下是端到端(end-to-end)测试。

    1.3K70

    (翻译)开始使用ABP.CORE模板 (ASP.NET Core with Angular)

    在这个模版,multi-tenancy默认是启用,如果需要,你可以core项目中禁用他们 If you have problems with running the application, please...如果在运行过程中出现什么问题,请尝试关闭你vs然后重新打开。往往第一次还原包时候容易失败。...Angular 项目需要按照下面的工具: nodejs 6.9版本及其以上,npm3.10版本及其以上 Typescript 2.0版本及其以上 我们是用angular-cli来构建Angular项目...注意,npm安装包时可能会出现一些警告信息,这不是我们解决方案相关一般没问题。该解决方案还可以配置yarn上运行,如果你电脑可以使用yarn,我们建议使用。...这个应用程序从主机appsettings.json文件获取连接字符串。开始它和Web.Hostappsettings.json文件一样。确保配置文件连接字符串是要数据库。

    2.9K20

    Angular 请求拦截

    这是我参与「掘金日新计划 · 4 月更文挑战」第6天。 在上一篇文章 Angular 中使用 Api 代理,我们处理了本地联调接口问题,使用了代理。...我们接口是单独编写处理实际开发项目中,有众多接口,有些需要登陆凭证,有些不需要。一个一个接口处理不妥,我们是否可以考虑对请求进行拦截封装呢? 本文章来实现下。...使用 angular-cli 生成项目的时候,它已经自动做好了环境区分, app/enviroments 目录下: environments...// http-interceptor.service.ts import { Injectable } from '@angular/core'; import { HttpEvent, HttpHandler...那么,问题来了。我们登陆之后,需要怎么带上凭证呢?

    2.4K20

    Angular学习(02)--Angular-CLI命令

    而且,不仅在创建文件方面,在对项目的编译、打包等各种操作也需要借助 Angular-CLI。...所以,日常开发,不管是借助 WebStrom 图形操作,还是直接自己使用命令方式,都需要跟 Angular-CLI 打交道,了解一些基本配置和命令也是有好处。...组件声明相应 declarations 列表。...因为指令并没有对应 Template 模板和 CSS 样式文件,所以,默认生成文件,只有 xxx.directive.ts 和 xxx.spec.ts 两份文件。...有时候,前端和后端工作都由同一个人开发,此时本地调试时,前端就没必要造假数据,可以直接将 Angular 项目编译输出到后端项目的容器,直接在本地调试后端接口。

    2.6K10

    Angular4记账webApp练手项目之二(angular4项目中使用Angular WeUI)

    写在前面 angular4项目中 例子是基于之前文章:利用angular-cli构建Angular4.X项目 可以参考官网:https://cipchk.github.io/ngx-weui/...安装及引用 安装 npm install angular-weui --save 安装后还需要引用weui 样式以及我们font-awesome图标苦,我们项目index.html引用 <!...import { WeUIModule } from 'angular-weui'; imports: [ BrowserModule, FormsModule, HttpModule...我选择固定中间按钮,使用动态绑定样式让中间部分高度等于页面高度-底部和顶部高度,设置overflo为scroll; accounting.component.ts添加样式数据如下: contentStyle...import {WeUITopTips} from 'angular-weui'; @ViewChild('TopTip') TopTip: WeUITopTips; toastText= ''

    2.2K20

    Angular2学习笔记

    现在基本上都是用angular-cli来组织文件,这个项目对Angular2提供了强大支持,我们用起来也比以前方便了很多。...具体过程就不细说了,可以参考angular-cliwiki,主要是以下步骤: 安装新版本node。...包括属性绑定、事件绑定、插值绑定以及双向绑定,主要用于组件内变量页面显示以及页面等。 服务。这包括两方面,一个是访问RESTFUL服务,另一个是用来保存本地变量。...但是他也有很多缺点,Angular2文档列举了下面几点: 渲染得更快; 需要异步请求更少; 需要下载Angular框架体积更小; 提早检测模板错误; 更安全; 于是,Angular2又提出了一个新编译方法叫...参考文章 angular-cli angular中文文档 nginx发布Angular2

    2K10

    发布 Angular 应用至生产环境

    两年前, 写过一篇使用 rollup 来为生产环境编译 Angular 2 应用文章, 因为当时还没有 angular-cli 项目。...angular-cli 用起来虽然方便, 但是针对生产环境编译的话, 还是有一些地方要注意, 接下来就介绍我项目部署时一些做法。...,这样客户端请求 .js 文件时, nginx 会先检查一下是否存在对应 .js.gz文件, 如果存在的话, 就直接返回 .js.gz 文件内容, 从而省去了服务端进行压缩过程, 节省服务器资源...nginx 支持反向代理, 可以作为后台接口网关, 这样可以省去一些跨域调用 (cors) 问题, 一般反向代理配置如下: location /api { proxy_pass http...这几点都是目中积累一些小技巧, 如果想要了解细节, 请查看这个 ng-seed 项目。

    1K50

    选用TypeScript开发AngularJS2

    AngularJS开发模式可以有多种方案,本人选择以下方案目标解决下面几个目的: 1. 强类型语言使用惯了,养成了一些习惯,javascript这在弱类型语言开发中常常掉坑。...说到这儿,很多事情就是明白了,语言本身没有什么特别,只有好用不好用区别,解析后目标代码跟语言就没什么关联了,而目标代码调用API后面依然可以是藏着很多密码,如此,自己实现一遍浏览器内核还是很有必要...常用脚手架有Angular-Seed和Angular-cli。...Angular-cli是AngularJS框架原生脚手架,并且当下似乎已经完成了1.0版本,然后移动到了@angular/cli,和AngularJS融为一体了。...因此安装Angular-cli命令已经改成: npm install -g @angular/cli 详情请看: https://github.com/angular/angular-cli

    73720

    Angular CLI 使用教程指南参考

    npm install -g angular-cli Mac 或 Linux 平台上,你可能需要添加sudo前缀提权进行全局安装: sudo npm install -g angular-cli...> [options] 创建一个新 Angular 项目,默认在当前所在目录下 参数 描述 --dry-run -d 只输出要创建文件和执行操作,实际上并没有创建项目 --verbose -v...Angular 项目 参数 描述 --dry-run -d 只输出要创建文件和执行操作,实际上并没有创建项目 --verbose -v 输出详细信息 --skip-npm 项目第一次创建时不执行任何... 浏览器打开Angular文档并搜索当前关键字 ng e2e 命令 描述 ng e2e 使用protractor在当前应用运行e2e测试 ng format 命令 描述 ng...format 使用clang-format格式化当前项目代码 ng generate 命令 描述 ng generate [options] 目中构建新代码 ng g

    3K50

    Angular2 之 单元测试

    By.css静态方法产生标准CSS选择器 predicate,与JQuery选择器相同方式过滤。 detectChanges:测试Angular变化检测。...它参数看起来和普通it参数主体一样。 没有任何地方显示异步特征。 比如,它不返回承诺,并且没有done方法可调用,因为它是标准Jasmine异步测试程序。...第二个参数是传递给事件处理器事件对象。 ---- 自己遇到坑儿 下面都是自己实际编写单元测试时,真实遇到问题,自己真的是在这上面花费了很多时间啊!!!为什么没有说花冤枉时间呢?...第二点就是模拟时候,我竟然傻傻自己去spec文件自己去new了BaseDataRemoteService,所以我根本没有办法去执行spyOn(foo, "getBar")这样模拟,然后就是一直出错...其实不是代码写问题,是单元测试写有有问题第一个expect去判断时候,第二个 service.getRelatedList已经执行完了,所以才会出错。

    5.5K20

    WEB 前端插件整理

    : #3 Image Preview 图像预览 #4 TODO Highlight 这个插件能够在你代码中标记出所有的 TODO 注释,以便更容易追踪任何未完成业务。...你只需空文件输入 html,并按 Tab 键,即可生成干净文档结构。 #10 CSS Peek 使用此插件,你可以追踪至样式表 CSS 类和 ids 定义地方。...当你 HTML 文件右键单击选择器时,选择“ Go to Definition 和 Peek definition ”选项,它便会给你发送样式设置 CSS 代码。...AngularJs、Ts、JQ插件 #1 angular2-switcher 通过三个简单键绑定,组件,模板和样式之间快速切换。当光标位于变量上时,只需按下F12键即可支持转到模板变量定义。...#12 TypeScript Import 专门处理TS内模块导入,和#12互补; #13 stylelint 语法校验,比内置要全更智能 #14 Angular Files vsc中集成angular-cli

    1.5K30
    领券