热门搜索 :
汽车文化
您的当前位置:首页正文

angular6根据environments配置文件更改开发所需要的环境的方法

2023-12-07 来源:学车网

前端开发过程中,我们常常需要根据需求去运行或者打包不同环境的代码,幸运的是,angular给我们提供了environments配置,但是angular6.x的配置方式和angular的其他版本的配置方式是有所不同的,下面我就分别介绍在测试test、预生产pre环境下实现environments配置。

一、angular6.x下environments的配置

首先,在environments文件夹下创建environment.test.ts和environment.pre.ts文件,如下图

然后分别在里面添加如下内容

然后找到angular.json文件,在architect对象下的configurations下添加如下代码:

然后在找到serve,添加如下的代码

可以通过运行ng serve --configuration=test或者ng serve -c test课件在控制台打印:

 {production: false, path: "https://test.webapi.sxmaps.com/"} path: "https://test.webapi.sxmaps.com/" production: false __proto__: Object

同理运行ng serve --configuration=pre或者ng serve -c pre可获取到预生产环境的域名,所以,你只需要在需要用到环境变量的地方引入即可,如

import {environment} from '../environments/environment';

二、angular其他版本environments的配置

同样的,首先在environments创建environment.test.ts和environment.pre.ts,然后按照上文的步骤,在里面添加相同的内容,然后去到angular-cli.json文件找到environments,在里面添加如何内容:

然后通过运行ng s --env=test就可以运行测试环境了,在需要的地方引入environment即可。

小编还为您整理了以下内容,可能对您也有帮助:

angular8项目多环境配置方案

项目在打包发布的时候往往需要配置不同的server的地址,当然,有些同学用的是nginx转发,因此不需要。

但不仅仅局限于请求地址,有可能某些变量密钥等等,比如微信的appid,测试环境和正式环境用的可能是不一致的。

为了方便打包,angular工程化中为开发者做了一些改进。打包时候,引入environment的设计。

注意一下几点:

1 environments中可以配置多套不同的环境

2 默认引入的都是environment.ts,这一点必须一致。

3 修改angular.json

4 打包指定参数 ----configuration=dev

json中的projects -> 项目名 -> architect -> build -> configurations -> proction。增加不同的环境配置,复制比较容易。ng build --prod -c=dev:

然后设置 json中的projects -> 项目名 -> architect -> serve,这样就可以在ng serve中增加更多的环境配置, ng serve -c=dev

是不是很简单呢,有任何问题就在下面留言吧!

angular8项目多环境配置方案

项目在打包发布的时候往往需要配置不同的server的地址,当然,有些同学用的是nginx转发,因此不需要。

但不仅仅局限于请求地址,有可能某些变量密钥等等,比如微信的appid,测试环境和正式环境用的可能是不一致的。

为了方便打包,angular工程化中为开发者做了一些改进。打包时候,引入environment的设计。

注意一下几点:

1 environments中可以配置多套不同的环境

2 默认引入的都是environment.ts,这一点必须一致。

3 修改angular.json

4 打包指定参数 ----configuration=dev

json中的projects -> 项目名 -> architect -> build -> configurations -> proction。增加不同的环境配置,复制比较容易。ng build --prod -c=dev:

然后设置 json中的projects -> 项目名 -> architect -> serve,这样就可以在ng serve中增加更多的环境配置, ng serve -c=dev

是不是很简单呢,有任何问题就在下面留言吧!

热模块替换有哪几种实现方法


这次给大家带来热模块替换有哪几种实现方法,热模块替换的注意事项有哪些,下面就是实战案例,一起来看一下。
稍微研究了一下,发现在angular/cli创建的项目中,实现这个不算太难,步骤如下:
1、首先创建一个src/environments/environment.hmr.ts文件,内容如下
export const environment = {
proction: false,
hmr: true
};当然,对应的environment.prod.ts和environment.ts需要增加一个hmr:false.
如果environment.ts里面的hmr设置为ture,那么ng serve --hmr也有同样效果。不过我对热替换功能还不是那么相信,重新刷新浏览器能保证状态更加干净一些,所以让environment.ts中的hmr为false.
2、在.angular-cli.json文件的环境中增加hmr的环境,大致如下:
"environments": {
...
"hmr": "environments/environment.hmr.ts",
}3、在package.json的scripts中增加一个新的命令。(当然也可以不增加,直接运行ng serve --hmr -e=hmr和运行npm run hmr效果一样)
"scripts": {
...
"hmr": "ng serve --hmr -e=hmr"
}4、安装hmr模块,命令如下:
npm install --save-dev @angularclass/hmr5、创建srchmr.ts文件,内容如下:
import { NgMoleRef, ApplicationRef } from '@angular/core';
import { createNewHosts } from '@angularclass/hmr';
export const hmrBootstrap = (mole: any, bootstrap: () => Promise<NgMoleRef<any>>) => {
let ngMole: NgMoleRef<any>;
mole.hot.accept();
bootstrap().then(currentMole => ngMole = currentMole);
mole.hot.dispose(() => {
const appRef: ApplicationRef = ngMole.injector.get(ApplicationRef);
const elements = appRef.components.map(c => c.location.nativeElement);
const removeOldHosts = createNewHosts(elements);
ngMole.destroy();
removeOldHosts();
});
};这事热替换的关键,hmrBootstrap会替换原始的bootstrap(下面会看到), 替换后,当有新的模块更新时,hmr会首先移除掉旧有的模块,然后接收新的模块。这些都是发生在浏览器里面。所以页面不会刷新。
6、更新srcmain.ts文件如下:
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppMole } from './app/app.mole';
import { environment } from './environments/environment';
import { hmrBootstrap } from './hmr';
if (environment.proction) {
enableProdMode();
}
const bootstrap = () => platformBrowserDynamic().bootstrapMole(AppMole);
if (environment.hmr) {
if (mole[ 'hot' ]) {
hmrBootstrap(mole, bootstrap);
} else {
console.error('Ammm.. HMR is not enabled for webpack');
}
} else {
bootstrap();
}这里替换就得启动文件,如果设置为hmr,那么调用hmrBootStrap来启动网页,否则就用过去的
7、现在运行npm run hmr或者ng serve --hmr -e=hmr,就实现了热替换功能。
相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!
推荐阅读:
Angular5对组件标签添加样式class步骤说明

nodejs中如何使用websocket(附代码)

怎样获得Number类型数组中最大元素

热模块替换有哪几种实现方法


这次给大家带来热模块替换有哪几种实现方法,热模块替换的注意事项有哪些,下面就是实战案例,一起来看一下。
稍微研究了一下,发现在angular/cli创建的项目中,实现这个不算太难,步骤如下:
1、首先创建一个src/environments/environment.hmr.ts文件,内容如下
export const environment = {
proction: false,
hmr: true
};当然,对应的environment.prod.ts和environment.ts需要增加一个hmr:false.
如果environment.ts里面的hmr设置为ture,那么ng serve --hmr也有同样效果。不过我对热替换功能还不是那么相信,重新刷新浏览器能保证状态更加干净一些,所以让environment.ts中的hmr为false.
2、在.angular-cli.json文件的环境中增加hmr的环境,大致如下:
"environments": {
...
"hmr": "environments/environment.hmr.ts",
}3、在package.json的scripts中增加一个新的命令。(当然也可以不增加,直接运行ng serve --hmr -e=hmr和运行npm run hmr效果一样)
"scripts": {
...
"hmr": "ng serve --hmr -e=hmr"
}4、安装hmr模块,命令如下:
npm install --save-dev @angularclass/hmr5、创建srchmr.ts文件,内容如下:
import { NgMoleRef, ApplicationRef } from '@angular/core';
import { createNewHosts } from '@angularclass/hmr';
export const hmrBootstrap = (mole: any, bootstrap: () => Promise<NgMoleRef<any>>) => {
let ngMole: NgMoleRef<any>;
mole.hot.accept();
bootstrap().then(currentMole => ngMole = currentMole);
mole.hot.dispose(() => {
const appRef: ApplicationRef = ngMole.injector.get(ApplicationRef);
const elements = appRef.components.map(c => c.location.nativeElement);
const removeOldHosts = createNewHosts(elements);
ngMole.destroy();
removeOldHosts();
});
};这事热替换的关键,hmrBootstrap会替换原始的bootstrap(下面会看到), 替换后,当有新的模块更新时,hmr会首先移除掉旧有的模块,然后接收新的模块。这些都是发生在浏览器里面。所以页面不会刷新。
6、更新srcmain.ts文件如下:
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppMole } from './app/app.mole';
import { environment } from './environments/environment';
import { hmrBootstrap } from './hmr';
if (environment.proction) {
enableProdMode();
}
const bootstrap = () => platformBrowserDynamic().bootstrapMole(AppMole);
if (environment.hmr) {
if (mole[ 'hot' ]) {
hmrBootstrap(mole, bootstrap);
} else {
console.error('Ammm.. HMR is not enabled for webpack');
}
} else {
bootstrap();
}这里替换就得启动文件,如果设置为hmr,那么调用hmrBootStrap来启动网页,否则就用过去的
7、现在运行npm run hmr或者ng serve --hmr -e=hmr,就实现了热替换功能。
相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!
推荐阅读:
Angular5对组件标签添加样式class步骤说明

nodejs中如何使用websocket(附代码)

怎样获得Number类型数组中最大元素

angular6 如何关闭console.log 打印

在开发环境下,我们一般需要打开log日志,不方便开发与追踪bug,但是这些log日志传到正式环境会有很大风险,所以我们应该区分出来,angular6.x已经降这部分做好了,请跟随如下步骤:

1、使用angular-cli脚手架里面会有环境文件,包含了开发和生产

environments.prod.ts       ==> 生产环境编辑如下

environments.ts              ==> 开发环境编辑如下

这是environments.ts的文件,这个文件上面注释已经说得很清楚,大概就是说,当去执行ng build --env=prod进行打包的时候,如果 proction为 true,那么此文件将会被覆盖。当然相对的也要将environments.prod.ts   文件的proction设定为 false。这样,当去构建打包的时候,开发环境将会被覆盖

2,angular.json

3,将 main.ts 程序出口时,将console 用你想要的方式处理掉

Angular项目如何升级至Angular6步骤全纪录

前言

前段时间将所负责的 Angular2 项目升级到了 Angular5 版本,这两天又进行了升级至 Angular6 的尝试。总的来说,两次升级过程比较类似,也不算复杂。

2018年5月4日,Angular6.0.0版正式发布,新版本主要关注底层框架和工具链,目的在于使其变得更小更快。

特性的小改动:

animations: 只能使用 WA-polyfill 和 AnimationBuilder

animations: 在转换匹配器中暴露元素和参数

common: 在 NgIf 中使用非模板元素时更好的错误消息

common: 导出函数来格式化数字,百分数,货币和日期

compiler: 实现“enableIvy”编译选项

core: 添加绑定名称到内容更改错误

0. 项目特点

该项目有如下特点:

历史悠久,项目庞大,源码文件数量近千

业务代码为主,极少应用 Angular 高级特性(升级简单)

采用 pug 编写 html 结构

采用 Less 编写 css 样式

采用 Express 和 http-proxy 实现 server 及后端 API 的代理

采用 compodoc 生成文档

采用自开发的 @lzwme/simple-mock 实现 API mock

采用 Fis3 编译,项目源码中深度使用了 fis3 的一些文件引用特性

采用 webpack 和 karma、jasmine 配置和执行单元测试

采用 styleLint、tsLint、husky 和 prettier 执行编码风格校验及格式化处理

项目升级后也没有使用 @angular/cli,继续采用 fis3 作为编译工具。这一是因为许多历史悠久的代码风格无法通过 tslint 校验,ng build 根本无法执行通过;二是因为项目的部分代码编写和构建与发布流程使用了一些 fis3 的特性,改造成本较大。而且经过比对,@angular/cli 的编译过程并没有比 fis3 好很多。

下面简要介绍一下升级的过程和方法。

1. 更新 package.json 的依赖

将 Angular 依赖库改为 ^6.1.0 版本,并且注意项目依赖的 Angular 组件库的兼容版本更新。如我们的项目依赖有如下变更:

@ngx-translate/core 需要更新至 ^10.0.2 版本;

angular-tree-component 需要更新至 7.x 版本;

@ngrx/store 需要更新至 ^6.1.0 版本;

注意:一些组件库的 API 也会有不兼容更新,相关代码逻辑应作改进(可在升级完成后根据文档和错误提示去调试和修改)。

升级后的项目依赖参考:

{

"devDependencies": {

"@compodoc/compodoc": "^1.1.5",

"@lzwme/simple-mock": "~0.0.8",

"@types/core-js": "^0.9.46",

"@types/jasmine": "~2.8.6",

"@types/jasminewd2": "~2.0.3",

"@types/node": "~8.9.4",

"@types/webpack": "~2.2.14",

"angular2-template-loader": "~0.6.2",

"awesome-typescript-loader": "~3.2.3",

"body-parser": "1.17.0",

"cookie-parser": "1.4.3",

"cross-env": "^5.1.6",

"debug": "2.6.1",

"ejs": "2.5.6",

"express": "4.15.0",

"fis-optimizer-htmlmin": "0.1.2",

"fis-optimizer-png-compressor": "0.2.0",

"fis-parser-less": "0.1.3",

"fis-parser-pug": "0.0.1",

"fis-postpackager-replace": "0.0.3",

"fis3": "3.4.39",

"fis3-deploy-local-supply": "0.0.2",

"fis3-hook-commonjs": "0.1.27",

"fis3-hook-node_moles": "2.3.1",

"fis3-hook-relative": "2.0.3",

"fis3-packager-deps-pack": "0.1.2",

"fis3-parser-typescript": "^1.2.2",

"fis3-postpackager-loader": "2.1.11",

"fis3-preprocessor-cssprefixer": "0.0.2",

"fis3-preprocessor-js-require-css": "0.1.3",

"fis3-preprocessor-js-require-file": "0.1.3",

"fis3-preprocessor-ng2-inline": "0.0.1",

"fs-extra": "^6.0.1",

"http-proxy": "1.16.2",

"husky": "^0.14.3",

"istanbul-instrumenter-loader": "^3.0.1",

"jasmine-core": "^3.1.0",

"karma": "^2.0.2",

"karma-chrome-launcher": "^2.2.0",

"karma-coverage": "^1.1.1",

"karma-coverage-istanbul-reporter": "^2.0.1",

"karma-jasmine": "^1.1.2",

"karma-jasmine-html-reporter": "^1.1.0",

"karma-mocha-reporter": "^2.2.5",

"karma-remap-coverage": "^0.1.5",

"karma-sonarqube-unit-reporter": "^0.0.14",

"karma-sourcemap-loader": "~0.3.7",

"karma-webpack": "^3.0.0",

"less": "^3.0.4",

"less-loader": "^4.1.0",

"liftoff": "2.3.0",

"lint-staged": "^7.1.3",

"minimist": "1.2.0",

"morgan": "1.8.1",

"prettier": "^1.13.5",

"pug": "^2.0.3",

"pug-html-loader": "^1.1.5",

"raw-loader": "~0.5.1",

"serve-favicon": "2.4.1",

"stylelint": "^9.4.0",

"stylelint-config-prettier": "^4.0.0",

"supervisor": "^0.12.0",

"to-string-loader": "^1.1.5",

"tslint": "^5.10.0",

"typedoc": "^0.11.1",

"typescript": "^2.8.3",

"webpack": "~3.6.0"

},

"dependencies": {

"@angular/animations": "^6.1.0",

"@angular/common": "^6.1.0",

"@angular/compiler": "^6.1.0",

"@angular/core": "^6.1.0",

"@angular/forms": "^6.1.0",

"@angular/http": "^6.1.0",

"@angular/platform-browser": "^6.1.0",

"@angular/platform-browser-dynamic": "^6.1.0",

"@angular/router": "^6.1.0",

"@ngrx/router-store": "6.1.0",

"@ngrx/store": "^6.1.0",

"@ngx-translate/core": "^10.0.2",

"@ngx-translate/http-loader": "^3.0.0",

"angular-tree-component": "^7.2.1",

"buffer": "4.9.1",

"core-js": "^2.5.7",

"fis-mod": "1.0.1",

"is-buffer": "1.1.4",

"jquery": "1.12.4",

"moment": "2.18.1",

"ngrx-store-freeze": "0.2.4",

"ngrx-store-logger": "0.2.2",

"process": "0.11.9",

"reflect-metadata": "0.1.12",

"rxjs": "^6.0.0",

"rxjs-compat": "^6.2.2",

"throttle-debounce": "^2.0.1",

"zone.js": "0.8.26"

}

}

2. 添加 rxjs-compat 依赖

为了兼容 rxjs 5 的用法,必须引入 rxjs-compat。

添加依赖:

yarn add rxjs-compat

然后在项目入口文件 main.ts 中引入它:

import 'rxjs-compat';

注意,后续的开发应有意识地以 rxjs6 的新写法去编码。

当然,如决定改掉 rxjs5 的旧写法,可以移除对 rxjs-compat 的引入,参照浏览器错误提示去一一修改即可。

3. 按官方指引和项目实际情况选择性操作

打开 Angular 官方升级指引网站 https://update.angular.io 按提示和项目实际情况操作。

实际上项目没有太多高级的用法,需要修改的内容并不多。大致有以下几点:

如有用到 extends OnInit,应该为 implements OnInit 方式

模板中如有用到 <template> 标签,将它改为 <ng -template>。全局查找和替换即可。

HttpMole 和 Http 应分别改用 HttpClientMole 和 HttpClient。HttpClient 支持,这可以在 http 请求过程中实现注入,实现更自由的逻辑,如角色权限验证等。项目中的 http 请求已经基于 Http 模块进行了封装,所以这一步可以忽略。但应考虑全局改进 http 封装,或者在后续的开发中采用 HttpClient。

全局安装 rxjs-tslint,执行源码级的升级,主要是修改 rxjs@6 废弃的用法。这个操作会修改很多文件。

npm install -g rxjs-tslint

rxjs-5-to-6-migrate -p src/tsconfig.app.json

以上操作完成后,尝试启用项目构建编译,如无报错即已成功升级。

总结:

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

Top