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

我需要为'ng build --prod‘更改什么配置才能在angular cli工作文件夹结构之外查找文件

在Angular CLI工作文件夹结构之外查找文件时,可以通过更改Angular项目的配置来实现。具体来说,你可以按照以下步骤进行配置:

  1. 打开项目根目录下的angular.json文件。
  2. architect节点下找到你想要更改配置的构建配置(例如buildserve)。
  3. 在该构建配置的options节点下找到assets数组。
  4. assets数组中添加一个新的对象,指定要查找的文件或文件夹的路径。可以使用相对路径或绝对路径。
  5. 保存angular.json文件。

例如,如果你想在Angular CLI工作文件夹结构之外的/external文件夹中查找文件,可以按照以下步骤进行配置:

  1. 打开项目根目录下的angular.json文件。
  2. 找到architect节点下的build配置。
  3. build配置的options节点下找到assets数组。
  4. assets数组中添加以下对象:
代码语言:txt
复制
{
  "glob": "**/*",
  "input": "external",
  "output": "/external"
}

这将使Angular CLI在构建时将/external文件夹及其内容复制到输出目录中。

完成以上配置后,你可以运行ng build --prod命令来构建项目,并且Angular CLI将会在工作文件夹结构之外查找并包含/external文件夹中的文件。

请注意,以上配置仅适用于Angular CLI构建过程中的文件查找,不涉及具体的文件访问或加载逻辑。具体的文件访问或加载逻辑可能需要在应用程序代码中进行相应的更改。

推荐的腾讯云相关产品:腾讯云对象存储(COS)。 腾讯云对象存储(COS)是一种安全、低成本、高可靠的云端存储服务,适用于存储大量非结构化数据,如图片、音视频、文档等。它提供了简单易用的 API 接口,方便开发者进行文件的上传、下载、管理和访问控制等操作。腾讯云对象存储(COS)具有高可靠性、高扩展性和高性能的特点,适用于各种场景,如网站托管、备份与归档、大数据分析等。

了解更多关于腾讯云对象存储(COS)的信息,请访问:腾讯云对象存储(COS)

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

相关·内容

Angular2学习笔记

(注意node的版本一定要是6以上的,否则会报奇奇怪怪的错); 安装angular-cli (npm install -g @angular/cli); 新建项目 (ng new PROJECTNAME...显然这很棒棒喽,但是文档中介绍的转换方法实在是麻烦,弄了半天报了一堆错也没弄成,最后还是用了angular-cli算搞定。...对于开发环境,可以使用ng serve --prod --aot来进行简单的优化。...不过对于真正的生产环境我们显然不能用node服务器,这里用的是nginx来部署,具体步骤如下: 使用命令ng build --prod --aot来生成dist/文件夹。...将上面的文件夹配置成nginx站点的根目录 配置gzip压缩,进一步减少文件传输量 使用try_files选项配置跳转的启动路径,否则直接输入二级路由是会报错的。

2K10

Angular Schematics 三部曲之 Add

前言 因工作繁忙,差不多有三个月没有写过技术文章了,自八月份第一次编写 schematics 以来,一直打算分享关于 schematics 的编写技巧,无奈还是拖到了年底。...在开发 Ng-Matero 的过程中,编写 schematics 就像闯关一样,从 ng add 到 ng generate 再到 ng update,每个部分都耗费了博主大量的精力,翻阅了无数源码得以实现...Add 的用途 在目前见过的项目中,ng add 主要有两个用途: 初始化组件库(比如 angular material,ng-zorro,ngx-bootstrap) 初始化项目模板(比如 ng-alain...注意:使用 Angular CLI 的默认目录对于 Generation 命令比较友好,Angular CLI 添加的默认路径为 src/app 或者 src/lib 等,如果我们修改了默认目录,则在使用...本文拖沓了很久,但是依然比较表浅,如果大家有什么问题,欢迎留言评论,或者加入 Ng-Matero 自主群。

1.3K10

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

执行以下命令,@angular/cli 会在当前目录下新建一个名称为 PROJECT-NAME 的文件夹,并自动安装好相应依赖。...表示你本地node 和Angular 不复核, 根据提示下载低版本 node 12.14.0 别下载高版本的14.15 image.png 初始化配置# 进入项目文件夹,执行以下命令后将自动完成 ng-zorro-antd...的初始化配置,包括引入国际化文件,导入模块,引入样式文件等工作。...,其他的游览器没试过 构建和部署# $ ng build --prod 文件会被打包到 dist 目录中。...手动安装# 如果想自己维护工作流,理论上你可以利用 Angular 生态圈中的 各种脚手架进行开发,如果遇到问题可参考我们所使用的 配置 进行定制。

1.9K30

Angular10配置webpack打包 「详细教程」

添加ngx-build-plus: ng add ngx-build-plus npm 包管理器 AngularAngular CLIAngular 应用都依赖于某些库所提供的特性和功能,它们都是...比如全局是否使用单引号,变量命名语法,每行最大字段数等等 应用项目文件 CLI 命令 ng new my-app 会默认创建名为 “my-app” 的工作空间文件夹,并在 src/ 文件夹下为工作空间顶层的根应用生成一个新的应用骨架...当工作空间文件结构到位时,可以在命令行中使用 ng generate 命令往该应用中添加功能和数据。这个初始的根应用是 CLI 命令的默认应用(除非你在创建其它应用之后更改了默认值)。...除了在命令行中使用 CLI 之外,你还可以使用像 Angular Console 这样的交互式开发环境,或直接在应用的源文件夹配置文件中操作这些文件。...需要注意的是,默认angular-cli打包生成的入口文件也被配置成了index.html,所以我们需要更改angular.jaon文件中的配置

4.8K20

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

它还监视项目源中的每个更改并重新编译所有更改,之后它会要求浏览器重新加载打开的页面。因此,通过使用Angular CLI,我们已经在开发环境中工作,无需编写配置或实际执行任何操作。...Angular如何完成这项工作,我们如何知道里面发生了什么? 让我们打开src/app目录,看看有什么。您可以在ng new此处查看输出表单,或者在您选择的IDE中打开它。...这是什么意思?这是命名Angular 结构指令的默认约定。结构指令控制着我们模板的结构。这里的星号实际上是“语法糖”,你可以进一步阅读以理解它是如何工作的。...只是为了让您对这些环境文件在这里有所了解,它们实际上包含在编译阶段的项目中,并且.prod.该部分由--environment交换机为ng serveor 定义ng build。...准备生产 因此,让我们构建我们的应用程序供生产使用 为此,我们运行build命令: ng build --aot -prod 65% building modules 465/466 modules

42.5K10

如何在 Windows 上安装 AngularAngular CLI、Node.js 和构建工具指南

什么Angular CLIAngular CLI 是用于初始化和使用 Angular 项目的官方工具。它使您免于复杂配置和构建工具(如 TypeScript、Webpack 等)的麻烦。...build (b): 将 Angular 应用程序编译到给定输出路径上名为 dist/ 的输出目录中。必须从工作空间目录中执行。 config: 检索或设置 Angular 配置值。...lint (l): 在给定项目文件夹中的 Angular 应用程序代码上运行 linting 工具。 new (n): 创建一个新的工作区和一个初始的 Angular 应用程序。...由于我们将创建一个全栈应用程序,因此使用 frontend 作为前端应用程序的名称。 如前所述,CLI 会询问您是否要添加 Angular 路由?...之后,您将使用目录结构和一堆配置和代码文件创建项目。它将主要采用 TypeScript 和 JSON 格式。

9100

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

ng new HelloAngular @angular/cli 将会自动帮你把目录结构创建好,并且会自动生成一些模板化的文件,就像这样: 请特别注意:@angular/cli 在自动生成好项目骨架之后...如果你想让编译的包更小一些,可以使用 ng serve –prod,@angular/cli 会启用 TreeShaking 特性,加了参数之后编译的过程也会慢很多。...所以,在正常的开发过程里面请不要加 –prod 参数。 ng serve 是在内存里面生成项目,如果你想看到项目编译之后的产物,请运行 ng build。...构建最终产品版本可以加参数,ng buildprod。...构建项目:ng build,如果你想构建最终的产品版本,可以用 ng buildprod 更多的命令和参数请在终端里面敲 ng 仔细查看,尽快熟悉这些工具可以非常显著地提升你的编码效率。

3.3K20

Angular v8 发布!来看看有什么新功能

在本文中,将介绍 Angular 8 和 Angular CLI 8 的最重要的新功能。在文中的例子可以在 GitHub 上找到。...由于 Angular 大量的底层部分已经为此进行了更改,因此 Angular 团队特别注意与以前的 Angular 版本的兼容性:在切换到 Ivy 之后,现有的程序应该能够像以前一样工作。...为了将类似这样的计算甩给后台,我们必须首先用 Angular CLI 创建 一个Web worker: 1ng generate worker n-queens 此语句不仅为 worker 创建文件,还为构建过程和现有文件中的条目创建配置文件...最后 CLI 负责将工作脚本正确的转换和捆绑。...因此,CLI 将下限确定为此版本。如果 CLI 收到构建( ng build)指令,则将对两个版本进行编译和 bundling 过程: 构建差异加载 这个过程的缺点显而易见:构建过程所需的时间加倍。

3K30

使用 Github Actions 自动部署 Angular 应用到 Github Pages

整个项目中所涉及的 npm 命令,我们可以通过查阅项目的 package.json 文件中的 scripts 节点进行查看 这里通过 Angular CLI 创建的项目可以通过 ng build 命令来完成项目的打包发布...当 build 命令执行完成后,项目根路径下 dist 文件夹中以项目名称命名的文件夹就是我们需要部署的文件。...代码仓库中即可,之后 github 会自动完成应用的部署工作 因为 git 默认是会忽略编译生成的 dist 文件夹的,此时,想要把编译生成的文件推送到远程仓库,你需要修改 .gitignore 文件...应用来说,我们完全可以使用社区提供的 angular-cli-ghpages 插件来简化这个操作 首先我们需要通过 npm 将插件安装到需要部署的程序中 ng add angular-cli-ghpages...,angular-cli-ghpages 没办法知道具体的执行人是谁,因此,我们需要在 ng deploy 命令中添加上 git 账户相关的配置参数 { "name": "ingos-admin",

1.4K10

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

在本文中,将与您分享在GitHub Pages上发布Angular应用程序时学到的东西。发现GitHub Pages是发布网站的非常有效且简单的一个平台。...因此,我们需要在angular.json文件中进行少量更改,并将outputpath值更改为“ docs /”。...ng build - -prod –base-href=” https://username.github.io/respository-name/” 请注意,用户名和存储库名称将是您的GitHub用户名和存储库名称...配置GitHub存储库以在GitHub Pages上发布 将docs文件夹推送到GitHub存储库后,您需要打开存储库设置,然后转到GitHub Pages部分,然后从source下拉列表中选择“ master...您可以使用另一种方法将Angular应用程序部署在GitHub Pages上—使用angular-cli-ghpages软件包。

1.7K20

AngularJS7那些不得不说的事故

那现在很多不挣钱的项目,做了也就做了,也没有什么好抱怨的。更需要的,是调整自己的心态,接受现状。 ---- 前端 ​  工作终于告一段落,今天念叨念叨最近一个项目的小体会。 ​  ...这个模块简便的安装方法是依赖npm, 而@angular/cli本身也依赖网络,因此当AngularJS有了新版本,所有使用客户端ng建立项目,也就自动使用了AngularJS的新版本。...这时候可以首先卸载当前的新版本@angular/cli, 然后使用npm 安装制定的老版本,比如1.4版本的客户端对应AngularJS4: npm install @angular/cli@1.4   ...这时候可以在编译的时候增加参数: ng build -prod --source-map   此时编译过程中,虽然信息仍然不够完整,但能够比较清楚的界定到时哪一个文件的哪一行出现了问题。.../some_angular_dir/jslib   这会编译jslib中的所有文件,文件夹结构也会保留,所以编译完成,直接用生成的jslib替换原来的文件夹

1.5K10

Angular学习(02)--Angular-CLI命令

因为这系列文章,更多的会带有个人的一些理解和解读,由于目前也才刚开始接触 Angular 不久,在该阶段的一些理解并不一定是正确的,担心会有所误导,所以还是以官网为主。...以下是概览,粗体字是较为常接触的: 命令 别名 说明 generate g 创建相应的文件,如组件、指令、管道、服务、模块、路由、实体类等 build b 编译项目,并输出最后的文件到指定目录,可以配置很多参数来达到各种效果...另外,为什么非得用 Angular-CLI 命令来创建文件,用 WebStrom 自己创建个 ts 文件不行吗?...那么,这种时候就不能用 ng server 命令了,只能使用 ng build 命令,但该命令,默认只是编译项目,那么岂不是每次代码发生修改,都得重新跑一次 ng build 命令?...spring boot,所以 Angular 项目使用 ng build 命令编译输出到后端项目的容器中,后端跑起来,就可以直接在本地调试了。

2.6K10

Angular实战之使用NG-ZORRO创建一个企业级中后台框架(进阶篇)

这一章主要介绍的是如何在创建好的后台管理页面框架的快速生成NG-ZORRO相关的组件,并且介绍Angular相关目录结构、生命周期函数,路由配置和使用相关知识点,以及如何使用Angular CLI使用一行代码快速添加...// app项目的TypeScript的配置文件 |-- tsconfig.json // 整个工作区的TypeScript配置文件 |-- tsconfig.spec.json // 用于测试的TypeScript...中的组件生命周期函数: 什么是生命周期函数?...: 注意:constructor 构造函数(依赖注入,起到对应局部变量值初始化作用): 除了使用简单的值对局部变量进行初始化之外什么都不应该做!!!...使用Angular CLI快速添加功能到现有的Angular应用程序: Angular CLI介绍: Angular CLI 是一个命令行接口(Command Line Interface),用于实现自动化开发工作流程

3.9K20

一、Vue 世界初探

至于为什么要使用vue ,虽然是一个前端小白,但是还是知道当前主流的三大框架,Angular、React以及Vue .优劣就不说了,就说说什么选择vue 吧。...自己花了一周的时间预研,勉强算自己入门了吧,所以开始写博客记录下来,这样也算是对自己学习的内容的整理,也可以记录下来方便大家。 学习地址 想要了解vue 是什么, 怎么学习?...不要急,我们前面这些工作做好后,我们接下来就开始啦。 项目结构 虽然我们项目稀里糊涂的启动起来了,但是相比到此的小伙伴还是一头雾水,在那写我们的代码呢?整个流程是怎么样的呢?...▸ build/ // 编译用到的脚本 ▸ config/ // 各种配置 ▸ dist/ // 打包后的文件夹...prod.env.js 生产模式下的配置文件,一般不用修改。test.env.js 测试模式下的配置文件,一般不用修改。

65110

玩转服务器---基本工具的使用

后台服务启动成功,下一步就是需要打包我们的前端项目部署到nginx的80端口,的项目前端使用了angular框架,所以需要在全局安装angular-cli脚手架,命令:npm install -g angular-cli...使用angularng命令进行打包,使用ng build命令会生成会将client项目打包生成blog文件夹 ? 出现如图的界面,就代表我们的client项目被打包到blog文件夹了 ?...可以看到,在我们的client项目下,生成了一个blog文件夹,我们只需要把这个文件夹部署到我们nginx的80端口,我们前端的部署工作就可以大功告成了。...可以看到我已经把我们的前端项目部署到nginx服务器了,现在我们需要去更改nginx的配置文件,一般配置文件在etc/nginx ?...更改配置文件保存退出,回到FileZilla确认我们刚才的更改操作,然后在XShell使用命令nginx -s reload重新加载配置文件。 ? 这样我们前端部署功能基本已经完成了。

3.1K10
领券