首页
学习
活动
专区
工具
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: 可以看到这部分代码并没有覆盖到.

    6.1K110

    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.4K40

    玩转 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.3K20

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

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

    49110

    如何在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服务器并触发新管道的运行。

    8K10

    使用 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只在服务端调用。

    68300

    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

    1K30

    超大规模 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.5K41

    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的提交信息。

    97840

    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.4K10

    几个简单步骤教你在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.8K20

    前端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.9K21

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

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

    94640
    领券