总结一下本周遇到的问题

首先是ng t为空的问题:
已经在首页写入了一些内容,在ng s下显示如下图
总结一下本周遇到的问题_第1张图片
但是当用ng test启动时就会发现仍是空白,并且没有任何报错。
总结一下本周遇到的问题_第2张图片

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

问题二:tethys/icon引入失败



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

首先想到的是查看官方给出的demo,但是也同样出现了报错,所以只能再次查看其官方文档
总结一下本周遇到的问题_第5张图片
按照官方文档所写,我们引入图标只需要在angular.json 中引入 assets 配置即可
总结一下本周遇到的问题_第6张图片
根据给出的路径我们可以找到其所需的包
总结一下本周遇到的问题_第7张图片
再查看其readme,发现文件结构也没有发生缺失
总结一下本周遇到的问题_第8张图片

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

你可能感兴趣的:(前端angular)