开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

ng build --与运行ng serve时相比，prod Angular 8 CSS渲染问题

ng build是Angular框架中的一个命令，用于将应用程序构建为生产环境可部署的静态文件。它将应用程序的源代码编译、打包和优化，生成用于部署的最终文件。

与运行ng serve相比，ng build主要有以下几个区别和优势：

静态文件生成：ng build将应用程序编译为静态文件，可以在任何支持HTML、CSS和JavaScript的Web服务器上部署。这样可以提高应用程序的加载速度和性能。
优化和压缩：ng build会对应用程序的代码进行优化和压缩，减少文件大小，提高加载速度。它会移除未使用的代码、压缩JavaScript和CSS文件，并使用Tree Shaking技术删除未使用的模块。
AOT编译：ng build默认使用AOT（Ahead of Time）编译模式，将模板编译为JavaScript代码，提前发现和解决潜在的错误，减少运行时的错误。
环境配置：ng build可以根据不同的环境配置文件（如environment.prod.ts）生成相应的构建文件。这样可以方便地在不同的环境中切换，如开发环境、测试环境和生产环境。
代码分离：ng build支持代码分离，将应用程序的代码分割成多个模块，按需加载，减少初始加载时间。
缓存控制：ng build会为生成的文件添加哈希值，以便在文件内容发生变化时，浏览器可以正确地缓存和更新文件。

对于解决Angular 8 CSS渲染问题，ng build可以通过以下方式进行优化：

使用CSS预处理器：可以使用Sass、Less或Stylus等CSS预处理器来编写样式，提高样式的可维护性和复用性。
压缩和合并CSS文件：可以使用工具对生成的CSS文件进行压缩和合并，减少文件大小和请求次数。
使用CSS模块化：可以将样式文件拆分成多个模块，按需加载，减少不必要的样式加载。
避免使用全局样式：尽量避免使用全局样式，而是使用组件级别的样式，减少样式冲突和影响范围。
使用CSS代码优化工具：可以使用工具对CSS代码进行优化，如去除不必要的样式、合并重复的样式等。

推荐的腾讯云相关产品和产品介绍链接地址：

云服务器（CVM）：提供可扩展的云服务器实例，用于部署和运行应用程序。详情请参考：https://cloud.tencent.com/product/cvm
云存储（COS）：提供高可靠、低成本的对象存储服务，用于存储静态文件。详情请参考：https://cloud.tencent.com/product/cos
云数据库MySQL版（CDB）：提供高性能、可扩展的关系型数据库服务，用于存储和管理数据。详情请参考：https://cloud.tencent.com/product/cdb
云安全中心（SSC）：提供全面的云安全解决方案，保护应用程序和数据的安全。详情请参考：https://cloud.tencent.com/product/ssc

请注意，以上推荐的腾讯云产品仅供参考，具体选择应根据实际需求和项目要求进行评估和决策。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

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

下面运行程序: ng serve -o: ? 可以看到在ng serve的时候, 加载了上述的文件. 因为ng build是开发时的build, 所以没有做任何优化, 文件挺大的....ng build ng build --prod Environment environment.ts environment..prod.ts 缓存只缓存css里引用的图片所有build的文件 source...是是 --build-optimizer 否是(和AOT以及Angular5) --named-chunks 是否 --output-hashing media 所有下面命令都是针对开发时的...在内存中serve 生产模式build的文件试试 --prod: ng serve --prod ?...这时运行程序就是 npm start了. 我还是把reject恢复回去吧, 使用git来恢复吧. 如果需要Serve 其他js/css/assets文件: ?

2.3K7 0

Angular CLI 简介

因为ng build是开发时的build, 所以没有做任何优化, 文件挺大的. 这时看一下文件目录, 并没有dist目录: 那么这些文件是怎么被serve的呢?...ng build ng build --prod Environment environment.ts environment..prod.ts 缓存只缓存css里引用的图片所有build的文件 source...=dev 下面则是生产build: ng build --prod ng build --prod -e=prod ng build --target=production --environment=...在内存中serve 生产模式build的文件试试 --prod: ng serve --prod 通过文件大小可以看出确实是prod build的. ng eject....CLI生成路由" : http://www.cnblogs.com/cgzl/p/8611532.html 第四篇文章时: “使用Angular CLI进行Build (构建) 和 Serve”: http

6.1K11 0

angular-cli.json配置参数解释，以及依稀常用命令的通用关键参数解释

一. angular-cli.json常见配置 { "project": { "name": "ng-admin", //项目名称 "ejected": false // 标记该应用是否已经执行过...常用命令的通用关键参数解释 1.ng serve --host (self) 指定本地Server绑定的域名，默认值：localhost.如果希望使用self来访问你的站点，须加入以上参数 2.ng serve...： if(module.hot) { module.hot.accept(); } 3.ng serve --aot 开启aot 4.ng serve --proxy-config proxy.conf.json...下面两条等价： ng build --target=production ng build --prod 7.--environment 指定应用执行环境。...下面两句等价： ng build --environment=prod ng build --env=prod 构建时会加载angular-cli.json指定的环境配置文件： "environments

1.6K3 0

玩转 Angular 环境变量

通过上面的注释，我们知道在执行 ng build ---prod 命令，进行项目构建的时候，会执行文件替换操作。...我们通过以下命令进行项目构建： $ ng build --prod 那么有的同学，可能想到对于构建测试环境的包，是不是只要运行： $ ng build --test 想象中很完美，但实际上并不是这样，ng...build 命令并不支持 --test 参数，感兴趣的同学可以运行 ng build --help 命令查看 ng build 命令所支持的参数： usage: ng build ...不过与 ng build 命令一样，我们也需要配置一下 angular.json 文件： "serve": { "builder": "@angular-devkit/build-angular:...}, 之后，我们就可以在命令行运行以下的命令，来启用测试环境： $ ng serve --configuration=test 总结本文简单介绍了 Angular 项目中，environment.ts

3.3K2 0

Angular CLI 常用终端操作命令

CLI常用命令 ---- ng new project-name - 创建一个新项目，置为默认设置 ng build - 构建/编译应用 ng test - 运行单元测试 ng e2e - 运行端到端（...--- CLI以多种方式支持路由：初始化创建项目时，自动添加了 @angular/router ，自动添加到package.json 文件中生成模块路由的时候可以使用指令...该--routing选项还会生成与模块名称相同的默认组件。您可以在创建或初始化项目时使用该--routing选项ng new来创建app-routing.module.ts文件。...--environment=dev--environment=prod 可以在 angular-cli.json 该文件中配置映射编译环境路径 //angular-cli.json...ng build --environment=loca ng build --environment=prod 关于代理服务器 ---- 在webpack的dev服务器中使用代理支持，我们可以高速缓存某些

2.1K4 0

Angular CLI 使用教程指南参考

安装要安装Angular CLI你需要先安装node和npm，然后运行以下命令来安装最新的Angular CLI：注意：Angular CLI 需要Node 4.X 和 NPM 3.X 以上的版本支持...输出详细信息 --skip-npm 在项目第一次创建时不执行任何npm命令 --name 指定创建项目的名称 ng serve ng new PROJECT_NAME cd PROJECT_NAME...ng serve 将会自动在浏览器中打开默认地址 http://localhost:4200/....# 这是生产构建 ng build --target=production --environment=prod ng build --prod --env=prod ng build --prod...# 这是开发构建 ng build --target=development --environment=dev ng build --dev --e=dev ng build --dev ng build

3K5 0

Angular2学习笔记

不过还好，经过这一段时间的倒腾，好歹把Angular2的东西稍微消化了一点，相比啥都不会，也算是有点收获吧。基础配置刚学习Angular2的时候，是照着他的中文文档上来的。...项目发布如果是测试环境，直接ng serve就可以用node服务器在本地的默认4200端口显示页面了。...但是他也有很多的缺点，Angular2文档中列举了下面几点：渲染得更快; 需要的异步请求更少; 需要下载的Angular框架体积更小; 提早检测模板错误; 更安全; 于是，Angular2又提出了一个新的编译方法叫...对于开发环境，可以使用ng serve --prod --aot来进行简单的优化。...不过对于真正的生产环境我们显然不能用node服务器，我这里用的是nginx来部署，具体步骤如下：使用命令ng build --prod --aot来生成dist/文件夹。

2K1 0

Angular 实现类似微服务的效果

/node_modules/@angular/cli/lib/config/schema.json", "cli": { "analytics": "e8a7327e-c859-44f3-ae0b-fa7963b5417f...": { "builder": "@angular-devkit/build-angular:browser", "options": {...} ], "styles": [ "node_modules/ng-zorro-antd/ng-zorro-antd.min.css...}, "test": { "builder": "@angular-devkit/build-angular:karma", "options":...": { "builder": "@angular-devkit/build-angular:browser", "options": {

911 0

Angular-Cli脚手架介绍、安装并搭建项目

开发调试# 一键启动调试，运行成功后显示欢迎页面。...$ ng serve --port 0 --open image.png 使用web工具打开项目我这里使用HBuilder来打开项目,其他工具也行 image.png ng serve 命令会启动开发服务器...,其他的游览器我没试过构建和部署# $ ng build --prod 文件会被打包到 dist 目录中。...手动安装# 如果想自己维护工作流，理论上你可以利用 Angular 生态圈中的各种脚手架进行开发，如果遇到问题可参考我们所使用的配置进行定制。...在 angular.json 中引入了 { "styles": [ "node_modules/ng-zorro-antd/ng-zorro-antd.min.css" ] } 在 style.css

2K3 0

Angular开发实践（六）：服务端渲染

这个项目与第一篇的示例项目一样，都是基于 Angular CLI进行开发构建的，因此它们的区别只在于服务端渲染所需的那些配置上。...在 package.json 的 scripts 区配置 build 和 serve 有关的命令： { "scripts": { "ng": "ng", "start...": "ng serve -o", "ssr": "npm run build:ssr && npm run serve:ssr", "prerender": "npm...run build:prerender && npm run serve:prerender", "build": "ng build", "build:client-and-server-bundles...": "ng build --prod && ng build --prod --app 1 --output-hashing=false", "build:prerender": "npm

4.8K10 0

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

集中回答一些常见的问题浏览器兼容性关于 Angular 的浏览器兼容性，请看下图：有一些国内的开发者会来争论兼容 IE8 的问题，我想给你两个事实：第一个事实是：截至2017年7月底，Chrome...如果你想让编译的包更小一些，可以使用 ng serve –prod，@angular/cli 会启用 TreeShaking 特性，加了参数之后编译的过程也会慢很多。...所以，在正常的开发过程里面请不要加 –prod 参数。 ng serve 是在内存里面生成项目，如果你想看到项目编译之后的产物，请运行 ng build。...构建最终产品版本可以加参数，ng build –prod。...构建项目：ng build，如果你想构建最终的产品版本，可以用 ng build –prod 更多的命令和参数请在终端里面敲 ng 仔细查看，尽快熟悉这些工具可以非常显著地提升你的编码效率。

3.3K2 0

docker学习系列19 容器化Angular项目

/usr/src/app # start app 根据实际情况修改配置 # CMD ng serve --host 0.0.0.0 CMD ng serve --port=4201 --proxy-config...docker-compose相关命令 # build镜像并后台启动 docker-compose up -d --build docker-compose run angular-demo ng test...打包镜像-f表示指定文件，docker build -f Dockerfile-prod -t angular-demo-prod ....运行 docker run -it -p 80:80 --rm angular-demo-prod 对应的docker-compose-prod.yml version: '3.5' services...: angular-demo-prod: container_name: something-clever-prod build: context: .

1.6K6 0

Angular-内存溢出的问题

本项目用的是angular6搭建，用动态组件的形式来显示页面，之前遇到过因为内存溢出而导致无法aot的问题， Angular4以上的该方法都适用解决方法：手动改写内存上限修改目录: my-project...": "ng", "start": "ng serve --host 0.0.0.0 ", "start-un-live": "ng serve --host 0.0.0.0 --port...4201 --live-reload false", "build": "ng build", "test": "ng test", "lint": "ng lint",..."e2e": "ng e2e", "build-prod": "node --max_old_space_size=8192 ..../node_modules/@angular/cli/bin/ng build --prod --build--optimizer --base-href /pms/" }, "private"

2.4K2 0

Angular CLI 升级 6.0 之后遇到的问题

Angular CLI 1.7.4 在使用 ng build --prod 会构建失败，而 ng build 是正常的。...比较好的解决办法是使用 ng build --prod --extract-license=false 或者 ng build --prod --no-extract-license。...最近将 Angular CLI 升级到 6.X 之后，直接 ng build 会报以下错误，ng serve 也是如此。...但是使用 ng build --prod 是正常的。同样地，使用 ng build --extract-license=false 也可以解决问题。...简单看一下，问题是由 license-webpack-plugin 插件引起的。这款插件用于输出第三方插件的许可协议。老外比较重视版权吧。但是不知道为什么总是在这个地方出问题。

1.4K2 0

angular打包报错内存溢出 nodejs 执行失败报错 “JavaScript heap out of memory” 的解决办法

nodejs V8 引擎在 64 位机器上默认限制使用内存最大不超过 1.7GB，超过这个限制官方建议尝试优化为多线程方式。...NODE_OPTIONS=--max_old_space_size=4096 # mac/linux export NODE_OPTIONS=--max_old_space_size=4096 方法二：在运行命令中增加.../node_modules/@angular/cli/bin/ng serve", "prod": "node --max_old_space_size=8000 ..../node_modules/@angular/cli/bin/ng build --prod", } } 解决办法二：项目构建流程关闭 sourcemap 生成以 Angular 为例，对于越来越庞大的...方法为在 angular.json中设置 build.options.sourceMap 的值为 false，同时在 tsconfig.json 中设置 compilerOptions.sourceMap

6.1K2 0

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

什么是angular-cli 简言之：就是NG团队自行维护的一个项目脚手架[内置单元测试及webpack打包工具等]，这货前身是ember-cli；官网 / Github 吐槽我最早是从Angular...-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

1531 0

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

---- 什么是Angular-cli 简言之：就是NG团队自行维护的一个｀脚手架｀[内置单元测试及webpack2打包工具等]　－－　这货前身是ember-cli；官网：cli.angular.io...ng lint 调用tslint跑整个项目，可以收获一堆警告和错误，--force --fix --format可以帮助格式和修复部分问题 ---- 启动 ng serve：启动脚手架服务，默认端口...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.8K1 0

Angular实战项目（1）

image.png npm i -g cnpm npm i -g @angular/cli ng --version ?...image.png 软件真正运行时的依赖是在dependencies 软件开发过程中devDependencies ng new 项目名新建angular项目建议使用这个命令，可以优化压缩等...ng build -prod 生成环境编译不建议使用ng build ng serve 启动开发服务器 Mock Rest API json-server:用于快速搭建REST API的利器安装...image.png 常见问题解决错误 npm uninstall -g @angular/cli npm cache clean npm install -g @angular/cli 如果安装出错以上重试...---- 若本号内容有做得不到位的地方（比如：涉及版权或其他问题），请及时联系我们进行整改即可，会在第一时间进行处理。

1.8K1 0

Angular中environments的神奇之处

前言在使用angular脚手架构建angular项目时，都会给我们生成一个名叫environments的文件夹。从字面意识理解像是环境变量的意思。 ?...例如：比如environment.prod.ts对应的就是prod环境，你有多少个环境这里就新建多少个文件。（当然没有的就是默认的运行环境）只有这些文件并起不了作用。...本地调试的时候 ng s -e=prod 简单解释下， ng：angular脚手架提供的命令操作 s: serve 的简写，运行程序 -e=prod： -env=prod的简写，大概意思就是启用prod...的运行环境配置，prod就是在上面json文件中配置的环境名。...简化了我们使用 npm run start就等于使用了ng serve --port 4001 --open这个命令。

1.9K2 0

Angular Library 快速入门

新建 Workspace $ ng new sf-lib-app $ cd sf-lib-app $ ng serve 在介绍如何创建 Angular Library 之前，让我们来看一下 Angular...": { "builder": "@angular-devkit/build-ng-packagr:build", "options": {..."configurations": { "production": { "project": "projects/sf-lib/ng-package.prod.json...库开发后，我们可以通过以下命令进行库的构建： $ ng build --prod sf-lib 小伙伴们，在构建 Library 时，记得始终添加 —prod 标志。...在完成新建 ButtonComponent 组件的导出工作后，我们需要使用下列命令，重新构建 sf-lib 库： $ ng build --prod sf-lib sf-lib 重新构建成功后，我们就可以在模板中使用刚创建的

2.4K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭