Angular version update and configuration file problem

To write the log system this week, we need to initialize an angular project ourselves. We encountered many problems during the initialization process.

problem

Version issue

The unit test cannot be used because of the angular version issue during initialization. Then I tried to initialize an angular project by myself, and encountered some problems during the initialization process.
The first is when I initialized because the version of Angular-cli installed on my computer is the tutorial version 11.0.7. Although there is no problem with this version of the unit test, there are problems when using some of the team’s libraries, because the version of the smart community is 12.1 .2, and the version of the tutorial is relatively old, some libraries will have problems when they are introduced.

Solution

The first thing I thought of was whether there is a way to directly upgrade the current project. After Google, I found that I can execute ng update to upgrade, but the blog is not very clear. After I executed it, I found no effect, but I found it in the blog Such a sentence

Then try to directly modify all the version numbers of @angular in the package without reporting an error. Although this method does not feel very reliable, it works. The packages listed in the devDependencies section of package.json can help you develop applications on this machine
After that, I didn’t care about it anymore, but I found a very useful tool in the official documentation when I was writing a blog.
angular update guide

This tool will tell you how to update
ng update
Perform a basic update to the current stable version of the core framework and CLI by running the following command

ng update @angular/cli @angular/core

To update from one major version to another, use the following format

ng update @angular/cli@^<major_version> @angular/core@^<major_version>

We recommend that you always update to the latest patch version because it contains fixes that we have released since the initial major version. For example, use the following command to get the latest 10.xx version and update with that version.

ng update @angular/cli@^10 @angular/core@^10

Summarize

The best way to update a project just started is to delete it, switch the version of angular-cli, and then create a new one. If you have already written a lot, you need to use the tools mentioned above and update according to the method given.

angular configuration file

When an angular file is initialized, there are the following files

├── README.md         项目介绍文件，后期我们可以变更为对当前项目的介绍，比如项目完成了什么功能，在开发时需要什么
├── angular.json       Angular项目的配置文件
├── e2e                专门放集成测试文件的文件夹 
├── karma.conf.js      Karma对应的配置文件
├── node_modules       本项目依赖的其它npm包
├── package-lock.json  本项目依赖于其它包（库）的具体安装情况（版本、下载地址等）
├── package.json       本项目依赖于其它包（库）的情况
├── src                源代码文件夹
├── tsconfig.app.json  typescript相关的配置文件
├── tsconfig.json      typescript相关的配置文件
├── tsconfig.spec.json typescript测试相关的配置文件
└── tslint.json        语法校验配置文件

The main modification of the smart community is only

TypeScript configuration

TypeScript is the main language used in Angular application development. It is one of the "dialects" of JavaScript, and it provides design-period support for type safety and tooling.
The browser cannot directly execute TypeScript. It has to be translated (transpile) into JavaScript with a tsc compiler first, and the compiler needs some configuration.
official document link

package-lock.json

Whether you use npm or yarn to install packages, they will be recorded in
package.json file.
CLI's ng new command will create a package.json at the same time as a new workspace is created. This package.json is used for all projects in this workspace, including the initial project created by CLI when the workspace is created.
Initially, this package.json includes a set of initial packages, some of which are needed by Angular itself, and others are used to support some common application scenarios. As the application evolves, you may add or even remove some packages from package.json.
The packages in the package.json file are divided into two groups:
dependencies are the basis for running the application, including
Angular package: Angular's core and optional modules, their package names start with @angular/.
Support package: those third-party libraries necessary for Angular application runtime.
Putty script: Putty script is responsible for smoothing out the differences between the JavaScript implementations of different browsers.
devDependencies are only used when developing applications.

tslint.json

Use the TypeScript grammar checker (linter) installed by npm to detect TypeScript code and alert you when you violate its rules.
This file is not in the smart community
Many commonly used grammars will report errors when there is this file.

Summarize

In the past, teachers built the project and we wrote the components directly. Now we have to start a project from scratch. At the very beginning, we will encounter many problems, and of course we also understand many basic things.