初始化angular13 + spring boot 2.7

讲一下初始化angular13 + spring boot 2.7 的流程，以及遇到的问题。

Angular初始化

安装Node.js

查看你的电脑是否安装了node.js, 若没有可以去https://nodejs.org/zh-cn/安装。我们将用其下的npm来安装一些软件.

转到终端并输入node -v，可以看到你安装的node -v 版本。

安装Angular CLI

运行npm install -g @angular/cli可以以安装 Angular CLI,

或者执行 npm i @angular/cli@^13.0.0 以安装特定版本的CLI。

然后输入ng version 以检查它正确地安装到了电脑上。

创建Angular项目

首先在终端中进入你选择的目录，然后运行
ng new <application name>

来创建一个Anagular项目

创建好的目录如下图

在Angular 项目目录中打开一个终端会话，然后运行以在ng serve中构建和运行应用程序。应该在终端中看到此编译成功消息。

期间遇到的问题

1. 版本不对

其实在创建的时候用的是angluar12的版本，

但是在后面想添加某一个组件的时候，

报错The package that you are trying to add does not support schematics.

后来查看官网得知后来发现这个组件需要的是的是angular13的版本，于是重新创建使用angular13版本。

这也提醒我们要注意所使用的组件的适配版本。

2. Jasmine tests单元测试为空

这个也找了很久都没有解决。单元测试什么都不显示

但是我在控制台中打印当前组件的htmlElement元素，是可以看到正常打印的

可以看到正确打印了htmlElement元素,说明渲染是成功的。但是页面仍然没有显示。

后来发现在 Angular 13 中，他们为测试引入了一个新的优化特性：

来自https://blog.angular.io/angul...

我们对 TestBed 进行了一些重要的改进，现在可以更好地在每次测试后拆除测试模块和环境。现在，每次测试后都会清理 DOM，开发人员可以期待更快、更少内存密集、更少相互依赖和更优化的测试。

原因是每次测试的时候会清理DOM，导致页面没有显示。

解决方法：添加 teardown: { destroyAfterEach: false } ，如下第9行的内容。

1 beforeEach(async () => {
2    await TestBed.configureTestingModule({
3      declarations: [],
4      imports: [
5        IndexModule,
6        HttpClientModule,
7        RouterTestingModule
8      ],
9      teardown: { destroyAfterEach: false }   +
10    })
11    .compileComponents();
12  });

就可以退出这个模式。

感想：
事实上我觉得使用fit的时候很有必要查看页面渲染的内容，但是angular13直接一刀切了。

如果加一个设置，全局打开/关闭这个模式，这样全局单元测试的时候清理DOM，使用fit的时候就不清理。两全其美多好。