首先是ng t为空的问题:
曾经在首页写入了一些内容,在ng s下显示如下图
然而当用ng test启动时就会发现仍是空白,并且没有任何报错。
起初认为是我在批改中谬误的批改了一些中央,寻找无果后间接用ng new project新建一个我的项目进行测试,因为我本地的angular cli没有更新,还是之前装置的angular 11 版本,新建完我的项目后间接执行ng test发现没有任何问题,随后我又将angular cli版本升至angular 13版本,再进行ng test 发现显示为空白,由此能够得悉是版本呈现了一些过错,并不是人为批改所造成的问题。
之后又尝试批改karma的版本至之前我的项目中的版本,然而依然没有成果,实践上依据angular官网办法新建的angular我的项目,所装置依赖的版本应该都是对应好的,不须要认为进行批改,于是就尝试着搜寻angular 13对应的karma版本,依据这些关键词终于找到了答案。
原来angular 13对TestBed进行了改良,在angular 13中每次测试后都会清理DOM,以便于开发人员更快地进行测试。
咱们如果还想像以前一样能够在单元测试中看到内容能够通过配置TestBed,让这性能敞开即可
问题二:tethys/icon引入失败
<thy-icon thyIconName="angle-double-down"></thy-icon><thy-icon thyIconName="bell-fill"></thy-icon><thy-icon thyIconName="bell" thyIconType="fill"></thy-icon>
产生报错,依据所给 thyIconName 找不到图标。
首先想到的是查看官网给出的demo,然而也同样呈现了报错,所以只能再次查看其官网文档
依照官网文档所写,咱们引入图标只须要在angular.json 中引入 assets 配置即可
依据给出的门路咱们能够找到其所需的包
再查看其readme,发现文件构造也没有产生缺失
而后就去理解了一下 assets 的配置
在angular官网文档中对assets解释为:
蕴含动态资源路由的对象从而利用到我的项目全局的上下文中。默认门路指向我的项目的图标文件及其assets文件夹。也就是咱们新建angular我的项目时自带的配置。
官网文档中还阐明了如何本人配置资源项:
其中 glob 为一个将input中门路作为根本目录的node-glob,node-glob能够起到一个通配符的作用。
*:匹配一个门路局部中0个或多个字符(除.外)
**:匹配0个或多个子文件夹。
也就是说
**/*.js 能匹配 foo.js,a/foo.js,a/b/foo.js,a/b/c/foo.js
input为绝对于工作空间的门路。
output为绝对于outDir(默认为dist)的门路。
{ "glob": "**/*", "input": "./node_modules/@tethys/icons", "output": "/assets/icons/" }
也就是说根据上述申明能够通过多种形式来保障能够寻找到咱们须要的资源。
这些门路所指向的文件也全副存在,不存在失落或时损坏的状况。
nodemodules:
dist:
也就是说实践上并没有问题,然而实际上当咱们应用<thy-icon>
时还是会报错——寻找不到资源,这一问题依然没有解决。
问题三
当应用 <router-outlet></router-outlet>时产生报错
然而运行中并未产生报错。
查看后并没有发现显著谬误,RouterModule也失常导入。
在之前我的项目中查问<router-outlet>起源,依据之前我的项目中的起源在此我的项目中寻找后发现并没有发生变化,<router-outlet>并未改名或是批改地位。
谷歌查问后发现是webstorm的问题须要将webstorm更新至最新版,之前我的项目中也遇到过相似谬误,如webstorm显示报错然而运行失常,由此也能够得悉webstorm针对不同的angular版本也会呈现不同的问题,webstorm也会有bug,如果运行无误就无需在意webstorm给出的相似下面的报错。