首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Angular 5 ng build --在装饰器中不支持prod函数表达式

Angular 5中的ng build命令用于构建Angular应用程序。在装饰器中使用prod函数表达式是不被支持的。

装饰器是一种特殊的语法,用于修改类、属性或方法的行为。在Angular中,装饰器常用于定义组件、指令、服务等。

prod函数表达式通常用于在生产环境中执行一些特定的操作,例如启用AOT(Ahead-of-Time)编译、优化代码等。然而,在Angular 5中,ng build命令的装饰器不支持prod函数表达式。

要在Angular 5中执行类似的操作,可以使用环境变量来区分开发环境和生产环境。在Angular项目的根目录下,有一个名为"environments"的文件夹,其中包含了不同环境的配置文件。默认情况下,有两个文件:environment.ts(开发环境)和environment.prod.ts(生产环境)。

可以在environment.ts和environment.prod.ts文件中定义不同的变量和配置,然后在应用程序中使用这些变量来执行相应的操作。例如,可以在environment.prod.ts中定义一个名为"production"的变量,并设置为true,然后在应用程序中检查该变量的值来执行相应的操作。

以下是一个示例:

代码语言:txt
复制
// environment.prod.ts
export const environment = {
  production: true,
  apiUrl: 'https://api.example.com'
};

// app.component.ts
import { Component } from '@angular/core';
import { environment } from '../environments/environment';

@Component({
  selector: 'app-root',
  template: `
    <h1>My Angular App</h1>
    <p>Environment: {{ environment }}</p>
  `
})
export class AppComponent {
  environment = environment.production ? 'Production' : 'Development';
}

在上面的示例中,根据environment.production的值,AppComponent会显示不同的环境信息。

关于Angular的更多信息和相关产品,您可以参考腾讯云的文档和产品介绍:

  • Angular官方网站:https://angular.io/
  • 腾讯云云开发(CloudBase):https://cloud.tencent.com/product/tcb
  • 腾讯云云函数(SCF):https://cloud.tencent.com/product/scf
  • 腾讯云云数据库MongoDB版(TencentDB for MongoDB):https://cloud.tencent.com/product/mongodb
  • 腾讯云对象存储(COS):https://cloud.tencent.com/product/cos
  • 腾讯云区块链服务(Tencent Blockchain as a Service):https://cloud.tencent.com/product/tbaas
  • 腾讯云物联网开发平台(IoT Explorer):https://cloud.tencent.com/product/ioe
  • 腾讯云移动应用分析(MTA):https://cloud.tencent.com/product/mta
  • 腾讯云云存储(Cloud Storage):https://cloud.tencent.com/product/cos
  • 腾讯云元宇宙(Metaverse):https://cloud.tencent.com/product/metaverse

请注意,以上链接仅供参考,具体的产品和服务选择应根据实际需求和情况进行。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Angular 2 + 折腾记 :(2)初步认识angular2,不一样的开发模式

dev,prod各一份 import { environment } from '....> {{title}} 复制代码 app.component.spec.ts: 测试用例,够繁琐,以后再说 app.components.ts:组件逻辑处理 // 导入装饰...:装饰可以理解为一些函数的封装,使其书写起来非常简洁明了 import { Component } from '@angular/core'; @Component({...'@angular/platform-browser'; // 这也是一个装饰,用来定义模块和组件相关的,比如服务,组件元素,指令,导入导出模块的识别 // 每个模块的定义必须有这个才能生效...绑定赋值的条件表达式的特殊之处: 不支持: 赋值 (=, +=, -=, ...) new运算符 使用;或,的链式表达式 自增或自减操作符 (++和--) 不支持位运算|和& 支持: 逻辑运算(

6.2K20

Angular 2.x折腾记 :(2)初步认识angular2,不一样的开发模式

装饰可以理解为一些函数的封装,使其书写起来非常简洁明了 import { Component } from '@angular/core'; @Component({ selector...; // 声明一个public的变量并且赋值 } ``` app.module.ts:模块 // 浏览NG模块 import { BrowserModule } from...'@angular/platform-browser'; // 这也是一个装饰,用来定义模块和组件相关的,比如服务,组件元素,指令,导入导出模块的识别 // 每个模块的定义必须有这个才能生效...绑定赋值的条件表达式的特殊之处: 不支持: 赋值 (=, +=, -=, ...)...new运算符 使用;或.的链式表达式 自增或自减操作符 (++和--) 不支持位运算|和& 支持: 逻辑运算(|| , &&) 三目运算符( true ?

9210

一个Angular 5教程:一步一步指导实现你的第一个Angular 5应用程序

在这个Angular 5教程,我们将从头开始构建一个笔记应用程序。如果您一直等待学习Angular 5,本教程适合您。 ? 应用程序的最终源代码可以在这里找到。...它是一个函数装饰,它接受我们想要监听的本地事件的名称,以及Angular想要调用的函数来响应它。...只是为了让您对这些环境文件在这里有所了解,它们实际上包含在编译阶段的项目中,并且.prod.该部分由--environment交换机为ng serveor 定义ng build。...但是相同的代码,我们看到了另一个效果,它ServerFailure使用装饰参数处理动作dispatch: false。这是什么意思?...准备生产 因此,让我们构建我们的应用程序供生产使用 为此,我们运行build命令: ng build --aot -prod 65% building modules 465/466 modules

42.5K10

玩转 Angular 环境变量

作为一个 Angular 的忠实粉丝,我们来介绍一下 Angular 项目开发,如何玩转 Angular 环境变量。...通过上面的注释,我们知道执行 ng build ---prod 命令,进行项目构建的时候,会执行文件替换操作。...,我们通过以下命令进行项目构建: $ ng build --prod 那么有的同学,可能想到对于构建测试环境的包,是不是只要运行: $ ng build --test 想象很完美,但实际上并不是这样,...ng build 命令并不支持 --test 参数,感兴趣的同学可以运行 ng build --help 命令查看 ng build 命令所支持的参数: usage: ng build <project...如果你本地已经安装了 python,可以进入该目录,然后命令行执行: $ python -m SimpleHTTPServer 最后我们浏览访问 http://localhost:8000/ 地址

3.2K20

Angular CLI 简介

首先修改上一个例子的代码: 执行ng build: 可以看到生成了这些文件. 把dist里面的index.html格式化一下看看: 可以看到它引用了生成的5个js文件....ng build ng build --prod Environment environment.ts environment..prod.ts 缓存 只缓存css里引用的图片 所有build的文件 source...否 是(和AOT以及Angular5) --named-chunks 是 否 --output-hashing media 所有 下面命令都是针对开发时的build, 它们的作用是一样的: ng build...build --prod ng build --prod -e=prod ng build --target=production --environment=prod 其它常用的参数还有: --sourcemap...--proxy-config -pc 代理配置 --prod 在内存serve 生产模式build的文件 试试 --prod: ng serve --prod 通过文件大小可以看出确实是prod

6K110

使用Angular CLI进行Build (构建) 和 Serve

angular和第三方库 可以使用source-map-explorer来分析依赖, 并且查看哪些模块和类bundle里面....首先修改上一个例子的代码: ? 执行ng build: ? ? 可以看到生成了这些文件. 把dist里面的index.html格式化一下看看: ? 可以看到它引用了生成的5个js文件....下面运行程序: ng serve -o: ? 可以看到ng serve的时候, 加载了上述的文件. 因为ng build是开发时的build, 所以没有做任何优化, 文件挺大的....否 是(和AOT以及Angular5) --named-chunks 是 否 --output-hashing media 所有 下面命令都是针对开发时的build, 它们的作用是一样的: ng build...--proxy-config -pc 代理配置 --prod 在内存serve 生产模式build的文件 试试 --prod: ng serve --prod ?

2.3K70

Angular 2.x折腾记 :(1)初识Angular-cli及脱坑要点

正式版的配置稍微有些改动,我比较了下基本不大,放心使用 系统环境配置 window 安装lts版本的nodejs v6.10.0 , Angular-cli的node-sass不支持7.x,装不上的...-format可以帮助格式和修复部分问题 启动 ng serve: 启动脚手架服务,默认端口4200;自定义什么看帮助额 打包 ng build: 开发模式打包,调用的环境文件是/src/environments.../environments.ts; ng build --prod: 以前调用aot打包还需要带上--aot,从beta31开始,--prod模式下自动调用aot打包, 调用的环境文件是/src/environments.../environments.prod.ts 弹出配置文件(还原真实的配置文件) ng eject : 这个东西的配置很多,可以弹出各种各样的源配置和文件 我们看到的ng开头的命令都是二重封装的。。。...ng serve --proxy-config proxy.conf.json配置反向代理(用webpack)这个老版本是支持的,现在不知道支不支持,写法如下 { "/": { "target

11910

【17】进大厂必须掌握的面试题-50个Angular面试

不仅如此,Angular还具有内置数据流,类型安全性和模块化CLI的功能,被认为是成熟的Web框架。 5.什么是角度表达式?...另一方面,装饰是用于分离装饰或修改类的设计模式,而无需实际更改原始源代码。 9.您对Angular的控制了解多少? 控制是JavaScript函数,可为HTML UI提供数据和逻辑。...它们本质上是Angular编译DOM中找到它们时执行的函数Angular指令分为三部分: 组件指令 结构指令 属性指令 12.什么是数据绑定?...JavaScript对象,变量和函数都隐式地成为window对象的成员 4.处理HTML文档 4.访问和操纵浏览窗口 5....W3C推荐的标准规格 5.每个浏览都有自己的实现 33.什么是Angular的Transpiling? Angular的编译是指将源代码从一种编程语言转换为另一种编程语言的过程。

41.2K51

angular入门教程_初学者织围巾简单教程慢动作

所以,正常的开发过程里面请不要加 –prod 参数。 ng serve 是在内存里面生成项目,如果你想看到项目编译之后的产物,请运行 ng build。...构建最终产品版本可以加参数,ng buildprod。...构建项目:ng build,如果你想构建最终的产品版本,可以用 ng buildprod 更多的命令和参数请在终端里面敲 ng 仔细查看,尽快熟悉这些工具可以非常显著地提升你的编码效率。...以下是一个最简单的 Angular 组件定义: @Component:这是一个 Decorator(装饰),其作用类似于 Java 里面的注解。...对于 Angular 来说,强调“轻逻辑”还有另一个原因:组件的整个生命周期里面,模板函数会被执行很多次。

3.3K20

Angular 2 + 折腾记 :(1)初识Angular-cli及脱坑要点

---- 什么是Angular-cli 简言之:就是NG团队自行维护的一个`脚手架`[内置单元测试及webpack2打包工具等] -- 这货前身是ember-cli; 官网:cli.angular.io...正式版的配置稍微有些改动,我比较了下基本不大,放心使用 ---- 安装之前 window下: 安装lts版本的nodejs[6.10.0] , Angular-cli的node-sass不支持7.x,...4200;自定义什么看帮助额 ---- 打包 ng build: 开发模式打包,调用的环境文件是/src/environments/environments.ts; ng build --prod: 以前调用...aot打包还需要带上--aot,从beta31开始,--prod模式下自动调用aot打包, 调用的环境文件是/src/environments/environments.prod.ts ---- 弹出配置文件...ng serve --proxy-config proxy.conf.json配置反向代理(用webpack)这个老版本是支持的,现在不知道支不支持,写法如下 { "/": { "target

1.8K10

Angular 5.0.0发布!

首先,把你应用的某些部分标记为 pure,以便原有工具利用它改进“tree shaking”的优化效果,同时删除应用不必要的东西。 其次,构建优化会从你的应用删除Angular装饰代码。...保留空白 过去编译会忠实地复现并在模板包含制表符、换行符和空白。现在你可选择是否组件和应用包含空白了。 可以每个组件的装饰中指定这个配置,而当前的默认值为true。...data装饰表达式降级(expression lowering)。...这样可以使用只能在运行时计算的装饰中被降级(lower)的值。 因此现在可以不使用命名函数,而改用Lambda函数。换句话说,执行代码不会影响你的d.ts或你的外部API。...以前版本的Angular,我们一直依赖浏览及其i18n API提供数值、日期和货币格式。为此,很多开发者都在使用腻子脚本(polyfill),而结果也不好。

4.4K40

Angular CLI 常用终端操作命令

关于CLI生成路由 ---- CLI以多种方式支持路由: 初始化创建项目时,自动添加了 @angular/router ,自动添加到package.json 文件 生成模块路由的时候可以使用指令...CLI 构建正式服务打包文件和测试环境文件还有本地文件 ---- ng build 可以同时指定要与该构建(或)一起使用的构建目标( --target...--environment=dev--environment=prod 可以 angular-cli.json 该文件配置映射编译环境路径 //angular-cli.json...//cmd命令 //编译 angular-cli.json 文件配置 传的参数来编译不同服务端的文件如执行下面命令编译的是json文件 envuronments.loca 配置的文件路径...ng build --environment=loca ng build --environment=prod 关于代理服务 ---- webpack的dev服务中使用代理支持,我们可以高速缓存某些

2.1K40

Angular Library 快速入门

新建 Workspace $ ng new sf-lib-app $ cd sf-lib-app $ ng serve 介绍如何创建 Angular Library 之前,让我们来看一下 Angular...文件添加 sf-lib 项目; package.json 文件添加 ng-packagr 依赖; tsconfig.json 文件添加 sf-lib 库的引用; 项目中的 projects...: $ ng build --prod sf-lib 小伙伴们,构建 Library 时,记得始终添加 —prod 标志。...完成新建 ButtonComponent 组件的导出工作后,我们需要使用下列命令,重新构建 sf-lib 库: $ ng build --prod sf-lib sf-lib 重新构建成功后,我们就可以模板中使用刚创建的...(private http: HttpClient) {} } 实际开发,我们可能需要能够灵活配置 DataService 服务,请求服务的地址。

2.3K10

浅谈Angular

创建项目: 要想使用 npm 来安装 CLI,请打开终端/控制台窗口,并输入下列命令: npm install -g @angular/cli ②创建工作区和初始应用:ng new 文件名 ③启动开发服务...Angular里的数据绑定: 1.插值表达式 {{}}--括号里可填表达式,不能填语句!...来控制元素的显隐 自定义指令里获取指令添加到其上面的元素,需要依赖注入ElementRef服务 如果自定义指令想要接收从外部传入的值,需要使用@Input装饰\....从Observable的中文名:”可观察的”就能看出,Observable的作用是可以起到类似监听的作用,但它的监听往往都是跨页面, 6.组件间通信: 1.父向子 -- @Input装饰声明输入属性...,要声明子组件里 2.子向父 -- @Output装饰声明事件,要声明子组件里 3.兄弟之间 -- 中间人模式 拓展:事件源对象 事件,当前操作的那个元素就是事件源。

4.4K10

Angular 工具篇之分析包的大小

: $ npm i webpack-bundle-analyzer --save-dev 接下来我们使用 Angular CLI 来构建项目,构建的时候,需要添加相关参数,具体如下: $ ng build... angular6-example-app 项目中,也为我们提供了相应的 npm script,具体如下: "bundle-report": "ng build --prod --stats-json...首先我们先来在当前项目中安装 source-map-explorer: $ npm i source-map-explorer --save-dev 然后重新进行项目构建: $ ng build --.../source-map-explorer dist/main.d72e9d91fd17f9fe7b8c.js 成功执行上述命令后,浏览你将会看到以下内容: ?...为了方便操作,我们也可以定义一个 npm script 任务来处理上述的工作: "map-explorer": "ng build --prod --source-map && source-map-explorer

2.3K40

Angular 6.x 基础教程

CLI 是否安装成功 $ ng --version 使用 Angular CLI 新建项目 $ ng new angular6-fundamentals 启动本地服务 $ ng serve 若想进一步了解...)">点击 当 Angular 调用我们的事件处理函数时,会自动帮我们处理调用的参数。...第七节 - 使用 Input 装饰 为了让我们能够开发更灵活的组件,Angular 为我们提供了 Input 装饰,用于定义组件的输入属性。...第九节 - 使用 Output 装饰 Output 装饰的作用是用来实现子组件将信息,通过事件的形式通知到父级组件。...用过 AngularJS 1.x 的同学,对 ng-class 应该很熟悉,通过它我们能够根据条件,为元素动态的添加或移除对应的样式。 Angular ,对应的指令是 ngClass 。

15.6K20
领券