本文是自己的学习笔记,主要参考资料如下。
- B站《Angular全套实战教程》,达内官方账号制作,https://www.bilibili.com/video/BV1i741157Fj?https://www.bilibili.com/video/BV1R54y1J75g/?p=32&vd_source=ab2511a81f5c634b6416d4cc1067809f。
1、environment文件
1.1、简介
项目创建时会自动创建environmet
文件夹,其中包含environment.ts
和environment.prod.ts
两个文件。
系统在不同的环境会有不同的参数,比如开发环境的服务器地址和生产环境的服务器地址肯定不是同一个。
angular给我们提供了方便,属于生产环境的参数就定义在environment.prod.ts
中,属于普通环境的就定义在environment.ts
中。
当然我们可以根据自己的需要添加多个文件,毕竟环境可能不止一个。
1.2、配置
我们需要配置特定环境使用指定的文件读取参数,这里的配置是在angular.json
文件中。
下面的配置项目的默认配置,表示当项目以profile=production
启动时,环境配置文件会用environment.prod.ts
替代environment.ts
。
项目以profile=development
启动时则不替代环境配置文件,默认使用environment.ts
中的参数。
默认是以producetion
为profile
启动项目。
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"outputHashing": "all"
},
"development": {
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
}
},
"defaultConfiguration": "production"
}
1.3、使用环境变量
我们只需要在ts文件中直接````import environment.ts```就可使用环境变量,下面是示例。
这是environment.ts
和enviornment.prod.ts
的内容。
// environment.ts
export const environment = {
production: false,
profile: 'development'
};
// environment.prod.ts
export const environment = {
production: true,
profile: 'production'
};
这是使用示例,import environment
后就能直接用到环境参数。
import { Component } from '@angular/core';
import { environment } from 'src/environments/environment';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
profile = environment.profile;
}
然后打印出profile
参数,以不同的profile
启动项目查看环境变量的变化。文章来源:https://www.toymoban.com/news/detail-468081.html
<h1>profile = {profile}</h1>
- 以
development
启动。ng serve --configuration=development
文章来源地址https://www.toymoban.com/news/detail-468081.html
- 以
production
启动。ng serve --configuration=production
到了这里,关于Angular学习笔记:environment.ts文件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!