本周写日志系统,需要我们自己初始化一个angular项目,在初始化过程中遇到很多问题
问题
版本问题
因为初始化时angular版本问题导致无法使用单元测试,然后尝试自己初始化一个angular项目,在初始化过程中遇到一些问题。
首先是我初始化的的时候因为我电脑上装的Angular-cli的版本是教程的版本11.0.7 这个版本单元测试虽然没有问题,但是在使用团队一些库的时候出现问题,因为智慧社区的版本是12.1.2,而教程的版本比较旧,有一些库在引入时会有问题。
解决办法
最开始想到的是有没有直接就可以对当前项目升级的方法,经过Google后,发现可以执行ng update 进行升级,但是那个博客写的不太清楚,我执行后发现没什么效果,但是在博客中发现这样一句话
文章图片
然后尝试直接修改package中所有@angular的版本号,然后不报错,这种做法虽然感觉不太靠谱,但是能用。package.json 的 devDependencies 区列出的这些包可以帮助你在本机开发应用
之后就没有再管这个东西,但在写博客时又在官方文档中发现一个非常有用的工具
angular更新指南
文章图片
这个工具会告诉你如何进行更新
ng update
通过运行以下命令,对核心框架和 CLI 的当前稳定版本执行基本更新
ng update @angular/cli @angular/core
要从一个主要版本更新到另一个,请使用以下格式
ng update @angular/cli@^ @angular/core@^
我们建议你始终更新到最新的补丁版本,因为它包含我们自最初的主版本以来发布的修复程序。例如,使用以下命令获取最新的 10.xx 版本并使用该版本进行更新。
ng update @angular/cli@^10 @angular/core@^10
总结 对于一个刚开始的项目最好的更新方法就是直接删了,切换angular-cli的版本,然后直接新建,如果时已经写了很多的则需要用上面提到的工具,根据给出的方法更新
angular 配置文件
一个angular 文件初始化时有如下文件
├── README.md项目介绍文件,后期我们可以变更为对当前项目的介绍,比如项目完成了什么功能,在开发时需要什么
├── angular.jsonAngular项目的配置文件
├── e2e专门放集成测试文件的文件夹
├── karma.conf.jsKarma对应的配置文件
├── node_modules本项目依赖的其它npm包
├── package-lock.json本项目依赖于其它包(库)的具体安装情况(版本、下载地址等)
├── package.json本项目依赖于其它包(库)的情况
├── src源代码文件夹
├── tsconfig.app.jsontypescript相关的配置文件
├── tsconfig.jsontypescript相关的配置文件
├── tsconfig.spec.json typescript测试相关的配置文件
└── tslint.json语法校验配置文件
智慧社区主要修改的只有
TypeScript 配置 【angular版本更新与配置文件问题】TypeScript 是 Angular 应用开发中使用的主语言。 它是 JavaScript 的“方言”之一,为类型安全和工具化而做了设计期支持。
浏览器不能直接执行 TypeScript。它得先用 tsc 编译器转译(transpile)成 JavaScript,而且编译器需要进行一些配置。
官方文档链接
package-lock.json 无论使用 npm 还是 yarn 安装的包,都会记录在
package.json文件中。
CLI 的 ng new 命令会在创建新的工作区的同时创建一个 package.json。 这个 package.json 用于此工作区中的所有项目,包括由 CLI 在创建工作区时创建的那个初始项目。
最初,这个 package.json 包括一组初始包,其中有些是 Angular 自身需要的,另一些是用来支持一些常见的应用场景。 随着应用的演化,你可能会往 package.json 中添加甚至移除一些包。
package.json 文件中的包被分成了两组:
dependencies 是运行应用的基础,包括
Angular 包:Angular 的核心和可选模块,它们的包名以 @angular/ 开头。
支持包:那些 Angular 应用运行时必需的第三方库。
腻子脚本:腻子脚本负责抹平不同浏览器的 JavaScript 实现之间的差异。
devDependencies 只有在开发应用时才会用到。
tslint.json 利用 npm 安装的 TypeScript 语法检查器 (linter) 检测 TypeScript 代码并在你违反它的规则时提示你。
这个文件在智慧社区中并没有
在有这个文件的时候很多常用的语法都会报错。
总结 以前都是老师建好了项目,我们直接写组件,现在要我们自己从头开始一个项目,在最开始的时候会遇到很多问题,当然也理解了很多基本的东西
推荐阅读
- Angular实现的增删改查
- 登录的实现
- ng : 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\ng.ps1,因为在此系统上禁止运行脚本。
- Angular 变化检测详解
- angualr|angular规范
- Angular重要概念
- 微前端( Single-SPA框架)
- 解决angular单个页面只能加载一个ng-app的问题