2

首先是ng t为空的问题:
已经在首页写入了一些内容,在ng s下显示如下图
image.png
但是当用ng test启动时就会发现仍是空白,并且没有任何报错。
image.png

起初认为是我在修改中错误的修改了一些地方,寻找无果后直接用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,以便于开发人员更快地进行测试。
图片.png
我们如果还想像以前一样可以在单元测试中看到内容可以通过配置TestBed,让这功能关闭即可
图片.png

问题二: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>

image.png
发生报错,根据所给 thyIconName 找不到图标。

首先想到的是查看官方给出的demo,但是也同样出现了报错,所以只能再次查看其官方文档
image.png
按照官方文档所写,我们引入图标只需要在angular.json 中引入 assets 配置即可
image.png
根据给出的路径我们可以找到其所需的包
image.png
再查看其readme,发现文件结构也没有发生缺失
image.png

然后就去了解了一下 assets 的配置
在angular官方文档中对assets解释为:
包含静态资源路由的对象从而应用到项目全局的上下文中。默认路径指向项目的图标文件及其assets文件夹。也就是我们新建angular项目时自带的配置。
图片.png
官方文档中还说明了如何自己配置资源项:
其中 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:
图片.png
dist:
图片.png
也就是说理论上并没有问题,但是实际上当我们使用<thy-icon>时还是会报错——寻找不到资源,这一问题仍然没有解决。
问题三
当使用 <router-outlet></router-outlet>时发生报错
图片.png
图片.png
但是运行中并未发生报错。
检查后并没有发现明显错误,RouterModule也正常导入。
在之前项目中查询<router-outlet>来源,根据之前项目中的来源在此项目中寻找后发现并没有发生变化,<router-outlet>并未改名或是修改位置。
图片.png
谷歌查询后发现是webstorm的问题需要将webstorm更新至最新版,之前项目中也遇到过类似错误,如webstorm显示报错但是运行正常,由此也可以得知webstorm针对不同的angular版本也会出现不同的问题,webstorm也会有bug,如果运行无误就无需在意webstorm给出的类似上面的报错。


李明
441 声望19 粉丝