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

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

打开main.bundle.js可以看到我写代码: ? 下面运行程序: ng serve -o: ? 可以看到ng serve时候, 加载了上述文件....因为ng build是开发时build, 所以没有任何优化, 文件挺大. 这时看一下文件目录, 并没有dist目录: ? 那么这些文件是怎么被serve呢?...先使用--aot: ng build --aot ? 使用aot之后可以看到 vendor.bundle大小降了很多, 只有1.5m左右了....可以看到所有的文件都非常小了, 并且没有vendor了(因为prod下--build-optimizer起作用所以vendor没有了, 但可以使用--vendor-chunk true给弄出来)....为什么这么做呢? 可以对项目更深入配置.... 这时运行程序就是 npm start了. 我还是把reject恢复回去吧, 使用git来恢复吧.

2.3K70
您找到你想要的搜索结果了吗?
是的
没有找到

Angular CLI 简介

ng new也有这个参数--skip-tests: ng new my-app2 --skip-tests 可以看到, 并没有生成任何spec文件. ng new参数一共有这些: 有几个介绍过,...因为ng build是开发时build, 所以没有任何优化, 文件挺大. 这时看一下文件目录, 并没有dist目录: 那么这些文件是怎么被serve呢?...=dev 下面则是生产build: ng build --prod ng build --prod -e=prod ng build --target=production --environment=...试试生产环境: ng build --prod 可以看到所有的文件都非常小了, 并且没有vendor了(因为prod下--build-optimizer起作用所以vendor没有了, 但可以使用--vendor-chunk...然后我user component里面添加一些代码: 再运行一次 ng test --sr -cc: 可以看到这部分代码并没有覆盖到.

6K110

Angular 工具篇之分析包大小

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

2.3K40

玩转 Angular 环境变量

通过上面的注释,我们知道执行 ng build ---prod 命令,进行项目构建时候,会执行文件替换操作。...,我们通过以下命令进行项目构建: $ ng build --prod 那么有的同学,可能想到对于构建测试环境包,是不是只要运行: $ ng build --test 想象中很完美,但实际上并不是这样,...ng build 命令并不支持 --test 参数,感兴趣同学可以运行 ng build --help 命令查看 ng build 命令所支持参数: usage: ng build <project...: $ ng build --configuration=test 上述命令成功运行之后,就会在根目录下生成 dist 目录,并且该目录下也会创建一个 PROJECT-NAME 目录。...}, 之后,我们就可以命令行运行以下命令,来启用测试环境: $ ng serve --configuration=test 总结 本文简单介绍了 Angular 项目中,environment.ts

3.2K20

提升 Web 应用代码质量【干货持续输出】

最近这个项目里,我们面临着类似的问题——需要提升项目的代码质量。于是,便想写一篇文章介绍一个相关内容。...使用测试提高质量 用于保证这个项目的质量,代码提交之后,会经过一系列测试: 单元测试 自动化 UI 测试 开发人员手动进行集成测试 测试人员进行 3~4 轮测试 如果只是宏观来看一个项目的测试的话...通常会在该提交之前,运行一些测试。 于是,我们这个前端项目里,我们就又写了这两个 scripts。...对应实现如下: {  "precommit": "lint-staged",  "prepush": "ng test && ng build --prod" } precommit时,我们配合lint-staged...常见有要去吃饭了、下班了、开会了等等,临走前提交了一下代码。功能可能本身没有问题,但是它 block 后续一系列行为。 当然了出现不可坑因素,如地震、火灾等时候,就不需要考虑这些事情了。

45210

如何在Ubuntu 16.04上使用Distillery和edeliver自动化Elixir-Phoenix部署

本教程结束时,您将拥有一个可以执行以下操作命令: 构建与您生产环境兼容Phoenix版本 将发布部署到您生产环境 在生产环境中启动您应用程序 通过没有任何停机时间情况下部署新版本来热交换当前生产版本...文件中已包含某些内容,请添加一个空行,将此新配置与任何现有配置分开。...由于myproject项目需要生产服务器上prod.secret.exs正常运行而我们无法使用Git将其移动到那里,我们必须手动将其传输到服务器。...该块告诉Distillery我们希望它如何构建自包含生产发布包。include_erts表示我们是否捆绑Erlang运行时系统,这在目标系统没有安装Erlang或Elixir时很有用。...第8步 - 没有生产停机情况下升级项目 我们构建和部署过程一个特性是能够热交换代码,在生产服务器上更新项目而不会出现任何停机。让我们对项目进行一些更改来试试这个。

4.3K00

如何在Ubuntu上使用Jenkins自动构建

手动运行应用程序 开始真正自动化过程之前,首先需要了解自动化内容。...根据自动测试结果通知相应部门:成功,不稳定(任何自动测试失败)或阶段完全失败。 部署阶段 仅当在master分支上执行提交并且测试阶段成功完成时才会运行。 发布前更改图像标记。...Post意味着定义适用于整个BUILD阶段。在这种情况下,只设置failure条件,因此只有BUILD阶段任何部分失败时才会运行。配置Jenkins为通信提供不同工具超出了本指南范围。...在此示例情况下,仅在检测到对主分支更改时才运行代码。提交给其他分支机构不会触发此管道这一步骤。 步骤中,您可以选择配置retry和timeout参数。...如果需要,您可以Jenkins常规设置中配置自定义位置。 与分支机构合作 是时候将完整Jenkins文件提交到Jenkins服务器并触发新管道运行

7.9K10

使用 Angular Transfer State 一个具体例子

使用下列命令将这个例子 clone 到本地: $ git clone https://github.com/feloy/ng-demo-transfer-state $ cd ng-demo-transfer-state...$ git checkout initial 复制代码 构建程序: $ npm install $ ng build -prod $ ng build -prod -app server --output-hashing...现在,如果您直接访问页面 http://your-domain/Paris(这是访问者来自搜索引擎典型情况),您可以观察到页面闪烁 - 这是因为内容已经存在并且已经下载到本地了,然后浏览器应用程序会重新加载并再次显示...它可以将数据从应用程序服务器端传输到浏览器应用程序。 为此,服务器应用程序将在它生成 HTML 页面中添加我们传输数据。 包含在此生成 HTML 页面中浏览器应用程序将能够读取此数据。...,所以浏览器显示以下页面会调用onSerialize方法,但是这个方法没有效果,因为toJson只服务端调用。

66400

Angular 结合 Git Commit 版本处理

上图是页面上展示测试环境/开发环境版本信息。 后面有介绍 上图表示是每次提交Git Commit信息,当然,这里我是每次提交都记录,你可以每次构建时候记录。...记录每次提交信息 根目录创建一个文件version.txt,用于存储提交信息;根目录创建一个文件commit.js,用于操作提交信息。...,自动将版本信息提交到当前分支git上 if(autoPush) { // 这一步可以按照实际需求来编写 execSync(`git add ${ versionPath }`);...const commit = execSync('git show -s --format=%h').toString().trim(); //当前提交版本号,hash 值前7位 let date...": "node commit.js", "build": "ng build", "build:production": "npm run copyConfigProduction && npm

98930

超大规模 Spark 集群灰度发布 CI CD

指向文件夹(如图中 spark-71 ) spark-dev 指向 spark-${ build # }(如图中 spark-72) 自动将 spark-bin.git 最新内容上线到 Staging...bug fix Staging 环境中发现了 dev 版本 bug 时,修复及集成和交付方案如下 spark-src.git/dev上提交一个 commit (如图中黑色 commit 9)...hot fix 在生产环境中发现了 prod 版本 bug 时,修复及集成和交付方案如下 spark-src.git/dev 上提交一个 commit(如图中红色 commit 9),且 commit.../prod 打包生成 release 并提交到 spark-bin.git/prod spark-${ build \# }(如下图中第 2 周 spark-2) 文件夹内。...hot fix 在生产环境中发现了 prod 版本 bug 时,修复及集成和交付方案如下 spark-src.git/prod提交一个 commit,且其 commit message 中包含

1.4K41

DevOps: 项目多环境配置和健康检查

( 而实际上测试小妹妹头发没有烫过,她也没听懂你暗示,她更不喜欢看漫威电影,最最关键是,你根本没有时间请别人看电影——这个问题问一下你家里洗衣机里静静趟了两星期袜子就知道了。)...第二天上午,你一阵急促电话铃声中被吵醒,电话那头声音顿时让你困意全无:老板没有收到任何邮件,邮件里资料要在2h以后一个重要会议中使用! .........git.build.host=DESKTOP-12GT5DQ git.build.time=2019.04.20 13\:08\:01 git.build.user.email=ijiangtao@foxmail.com...需要特别注意是,使用这个插件保证你编译项目是有.git目录,因为这个插件获取git提交信息,如果不使用git进行版本管理项目,编译会报错。...版本检查地址 下面提供一个Controller来展示git提交信息。

93940

Angular Library 快速入门

早期版本 angular-cli.json 文件已经被替换为 angular.json 文件,文件内容也发生了改变。...创建 sf-lib 库 $ ng generate library sf-lib --prefix=sf 这里我们快速总结一下 ng generate library 命令执行操作: angular.json...文件中添加 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 重新构建成功后,我们就可以模板中使用刚创建

2.3K10

几个简单步骤教你GitHub Pages上部署Angular应用!

首先,您需要将代码放在本地存储库中,位于github.com远程存储库中,因此,如果您没有GitHub帐户,则需要立即创建它。 然后,登录到GitHub帐户并创建一个存储库,您将在其中上传本地代码。...假设您已经机器上安装了git,并且已经本地存储库master分支中提交了代码,请在app文件夹中打开git bash,然后使用GitHub存储库URL运行以下命令以将代码上传到github. com...因此,使用git bash窗口中base-href选项中网站URL运行以下命令,以docs文件夹中生成可分发文件。...ng build - -prod –base-href=” https://username.github.io/respository-name/” 请注意,用户名和存储库名称将是您GitHub用户名和存储库名称...转到您app文件夹,并检查docs文件夹是否已创建并包含所有可分发文件。 ? 现在,通过git bash窗口中运行以下命令,将该文件夹提交到本地存储库中,并将其推入GitHub存储库中。

1.7K20

前端next工程自动化部署到你宝塔

id_rsa.pub 这个文件,使用 cat 命令,拿到文件对应内容之后,将其粘贴到 github 对应位置 然后保存,去服务器将你前端工程项目 clone 下来,没有任何阻碍 宝塔面板部署...node 版本,根据提示安装就行,完成之后你能看到以下内容 然后点击添加 node 项目,选中我们刚才 clone 下来前端工程,由于 next 项目需要先 build 然后再 start,我们需要将这两个命令进行合并...,取名 prod 重新 pull 项目,可以项目配置中发现 prod 命令 提交之后,会安装对应模块,也就是 npm install ,等完成之后,项目就会跑起来了 输入机器 IP + 3000...pull ,然后执行 npm run prod 操作,有没有什么好办法呢?...2}') 其中HomePage是你自己项目名称,自此,终于没问题了,测试了几遍发现都更新了 总结 之后更新这个项目只需要推送对应代码,就能够自动部署重启,当然这里只是一段对应思想,大家自己项目中按照这个思路

1.6K20

如何将你Python项目全面自动化?

所有这些都是本文讨论内容,我们将看看如何将它们添加到 Python 项目中! 本文最初发布于 Martin Heinz 个人博客,由 InfoQ 中文站翻译并分享。...它是由谷歌生成一组镜像,其中包含应用程序所需最低条件,这意味着没有 shell、包管理器或任何其他工具,这些工具会使镜像膨胀,干扰安全扫描器(如 CVE),增加建立遵从性难度。...它首先会用镜像名和 Tag(运行git describe创建)替换dev.Dockerfile底部标签,然后运行docker build。...在此之后,我们运行另一个已发布操作setup-python@v1,设置 python 环境。...最后,最后一行,它运行目标push,构建生产镜像并将其推送到注册中心,以之前推送git标签作为镜像标签。

91340
领券