这篇博文展示了以下多个内容。
- 如何在Angular中显示应用程序的版本
- 如何在Angular中从package.json中获取版本信息
版本号是任何节点应用程序的package.json中配置的代码库的版本。
例如，package.json位于Angular应用程序的根文件夹中。
它包含
{
"name": "angular-icon-example",
"version": "2.0.1",
}
版本号在每个开发的敏捷冲刺周期都会改变，有更多的附加功能。
如何在Angular应用程序中从package.json中获取版本号？
如何在Angular应用程序中打印应用程序的版本？
我们有多种方法可以将应用程序的版本打印到浏览器界面。
- 在Angular组件中直接读取package.json。
在AppComponent中，导入package.json文件，如下图所示
import { Component } from '@angular/core';
import packagejson from '../../package.json';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
public appVersion: string = packagejson.version;
constructor() {
}
}
它抛出了以下错误 Error: src/app/app.component.ts:3:25 - error TS2732: Cannot find module '././package.json'.考虑使用'-resolveJsonModule'来导入扩展名为'.json'的模块。
原因是，Angular默认不允许你导入json文件。
所以你必须在resolveJsonModule 配置tsconfig.json或tsconfig.app.json 中添加typescript编译器选项。
resolveJsonModule。你可以像普通的javascript模块一样导入json模块tsconfig.json: { "compileOnSave": false, "compilerOptions":{ "resolveJsonModule": true,
},
重新启动angular应用程序，你会看到另一个错误
This module is declared using 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.
这个错误，说你需要导入用导出选项声明的模块。如果模块中没有使用导出，你必须在tsconfig.json或tsconfig.app.json中配置allowSyntheticDefaultImports 。allowSyntheticDefaultImports。你可以像正常导入一样导入没有导出选项的模块。
{
"compileOnSave": false,
"compilerOptions": {
"resolveJsonModule": true,
"allowSyntheticDefaultImports": true,
},
现在它工作并显示
通过这种方法，以下是获得版本的步骤总结
-
在tsconfig.json或tsconfig.app.json中添加typescript编译器选项。
{ "compileOnSave": false, "compilerOptions": { "resolveJsonModule": true, "allowSyntheticDefaultImports": true, }, -
在组件中
像普通组件一样导入package.json文件。
import packageJson from '../../package.json';
声明一个字符串变量，并用packageJson的版本属性进行初始化。
public appVersion: string = packageJson.version;
在模板中，使用angular表达式大括号语法打印变量。
<div>{{appVersion}}</div>
