乐趣区

关于前端:总结一下本周遇到的问题

jiezi

首先是 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 给出的相似下面的报错。

退出移动版