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

在运行ng build时,我们如何在根src文件夹中退出一些文件夹

在运行ng build时,我们可以通过在根src文件夹中使用.angular.json配置文件来排除一些文件夹。

首先,打开根目录下的.angular.json文件,找到architect -> build -> options -> assets字段。在这个字段中,我们可以配置需要包含在构建输出中的文件和文件夹。

默认情况下,.angular.json文件中的assets字段会包含src/assets文件夹,这意味着构建输出将包含该文件夹中的所有内容。如果我们想要排除一些文件夹,可以在assets数组中添加排除规则。

例如,如果我们想要排除src/assets/imagessrc/assets/fonts文件夹,可以将以下代码添加到assets数组中:

代码语言:json
复制
{
  "glob": "**/*",
  "input": "src/assets",
  "output": "assets",
  "ignore": ["**/images/**", "**/fonts/**"]
}

在上述代码中,glob字段指定了要匹配的文件和文件夹的模式,input字段指定了输入文件夹的路径,output字段指定了输出文件夹的路径,ignore字段指定了要排除的文件和文件夹的模式。

通过以上配置,运行ng build命令时,构建输出将不包含src/assets/imagessrc/assets/fonts文件夹中的内容。

请注意,以上配置仅适用于Angular项目的构建过程,对于其他前端框架或工具可能会有不同的配置方式。

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

相关·内容

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

新生成的应用包含一个模块的源文件,包括一个组件及其模板。 当工作空间文件结构到位,可以命令行中使用 ng generate 命令往该应用添加功能和数据。...对于多项目的工作空间,projects/ 文件夹的其它项目各自包含一个具有相同结构的 project-name/src/ 子目录。 应用源文件 顶层文件 src/ 为测试并运行你的应用提供支持。...用 JIT 编译器编译应用,然后引导应用的模块(AppModule)浏览器运行。... src/ 文件夹里面,app/ 文件夹包含此项目的逻辑和数据。Angular 组件、模板和样式也都在这里。...添加ngx-build-plus: ng add ngx-build-plus 注意:如果要将其添加到projects文件夹的特定子项目,请使用--project开关指向它:ng add ngx-build-plus

5K20

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

/karma.conf.js" } }, "defaults": { // 执行`ng generate`命令一些默认值 "styleExt": "scss", // 默认生成的样式文件后缀名..."component": { "flat": false, // 生成组件是否新建文件夹包装组件文件,默认为false(即新建文件夹) "spec": true, /...--hmr 注意开启之后,只是angular-cli里的webpack添加必要的扩展,等价于webpack-dev-server --hot,还需要在应用代码里处理hmr逻辑,可在main.ts里添加...--base-href 指定站点的起始路径,如果你希望你的站点路径为www.abc.com/mypath/,需要这样设置:ng build --base-href /mypath/ 6....下面两条等价: ng build --target=production ng build --prod 7.--environment 指定应用执行环境。

1.6K30
  • Angular Library 快速入门

    文件添加 sf-lib 项目; package.json 文件添加 ng-packagr 依赖; tsconfig.json 文件添加 sf-lib 库的引用; 项目中的 projects...: root —— 指向 library 库的文件夹; sourceRoot —— library 库实际的源码目录; projectType —— 指定项目的类型; prefix —— 指定组件使用的前缀...; architect —— 该对象用于配置 Angular CLI 构建流程, build、test 和 lint。...: $ ng build --prod sf-lib 小伙伴们,构建 Library ,记得始终添加 —prod 标志。...完成新建 ButtonComponent 组件的导出工作后,我们需要使用下列命令,重新构建 sf-lib 库: $ ng build --prod sf-lib sf-lib 重新构建成功后,我们就可以模板中使用刚创建的

    2.4K10

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

    Angular CLI, Node.js, and Build Tools,作者为Ahmed Bouchefra 本教程我们将学习如何在 Windows 安装 Angular CLI 并使用它来创建...我们看看各个文件的作用: /e2e/:包含网站的端到端(模拟用户行为)测试 /node_modules/:使用 npm install 将所有 3rd 方库安装到此文件夹 /src/:包含应用程序的源代码...首先导航到项目的文件夹运行以下命令: $ cd frontend $ ng serve 您现在可以导航到 http://localhost:4200/ 地址来开始使用您的前端应用程序。...Angular CLI 将自动 src/app.module.ts 文件添加对组件、指令和管道的引用。...结论 本教程我们了解了如何在 Windows 计算机上安装 Angular CLI,并使用它从头开始初始化一个新的 Angular 项目。

    47200

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

    ,比如实时更新等目的 server s 编译项目,并让它运行起来,且默认支持实时更新修改 new n 创建新项目,生成项目初始骨架,默认包括模块、视图,还有基本的各种配置文件 e2e e 编译并运行项目...还有,运行项目,会使用 build 或 server 命令。 所以,下面就只介绍这三个命令,其他命令,等到后续有接触,深入了解后再补充。...先介绍第一种方式,使用命令,加上一些选项配置: 选项配置 说明 --export=true|false 生成的组件在对应的模块文件,是否自动 exports 列表声明该组件好对外公开,默认值 false...以上,是使用 ng g component 命令,可以携带的一些选项配置,来修改默认的行为,其中,如果选项配置为 true,那么 value 值可以省略, --flat=true 可以简写成 --flat...ng server 使用该命令,可以编译我们的项目,并在本地某个端口上运行该项目,默认还可以做到实时更新修改,不用重新编译,是本地调试项目常用的命令。

    2.6K10

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

    前言 最近在学习 Angular,一些基础的语法也学习的差不多了,就在 github 上新建了一个代码仓库,准备用 ng-zorro 搭个后台应用的模板,方便自己以后写些小东西可以直接使用。...当 build 命令执行完成后,项目路径下 dist 文件夹以项目名称命名的文件夹就是我们需要部署的文件。...=/ingos-admin/ 之前学习 angular 中路由时有提到, angular 应用,框架会将 index.html 文件的 base 标签的 href 属性值配置为组件、模板、模块文件以及其它一些静态文件的基础路径地址...因为每次执行 ng deploy 命令都需要在命令添加 base-href 参数,所以这里我们可以 package.json 文件添加一个 script,这样当后面我们需要发布,直接执行自定义的...当我们添加了环境变量之后,还需要对我们的实际执行的 npm 命令脚本进行一个调整 本地执行发布命令,本地的 git 配置已经包含了相关的账户信息,而当在 workflow 执行时因为处于一个匿名的状态

    1.4K10

    Angular4记账webApp练手项目之一(利用angular-cli构建Angular4.X项目)

    这里写图片描述 创建项目 创建一个名为ng-account的项目 ng new ng-account 进入项目 cd ng-account 运行项目 ng server --open 生成打包(发布),...默认会在项目文件夹下生成一个名为dist的文件夹。...ng build 开发项目 用自己喜欢的开发工具打开项目文件夹。vs code、webStroem或者其他 ? 这里写图片描述 和vue-cli构建的vue2项目很类似。...我们主要修改src文件夹下的内容。其中我们新建的代码放在app。其中spec.ts 文件是测试文件,可以删除。...这里写图片描述 用官方提供的指令创建,会将组件自动添加到app.module我们就可以直接使用了。 ? 这里写图片描述 app.component.html使用组件 ? 这里写图片描述 ?

    1K30

    Ionic 2 应用剖析0 开始之前1 创建一个新的Ionic 2 应用2 目录结构3. Class 定义Root Components 模版App Module总结

    目录结构——src 通常在一个Ionic 1应用程序,人们所有的Javascript文件(控制器、服务等)一个文件夹,所有的模板另一个文件夹,然后所有的样式包含在一个app.scss文件。...任何这个文件夹下的东西都会在应用程序每次build编译覆盖拷贝到你的build目录。...注意我们没有包含src路径import,因为是当前文件的相对路径,而我们已经src目录。因为我们名为app的子文件夹,所以我们到上级目录使用../。...Root Components 模版 当我们创建组件是我们提供了一个模版给组件,就是被渲染到屏幕的内容。1).这里是我们浏览器运行组件的样子: ?...openPage方法(模块定义的)。

    4.4K50

    教程| Angular 4 中加载功能模块(上)

    本教程将介绍如何在 Angular 开发和加载功能模块。尽管对于较小的应用程序,模块就足够用了,但对于更大更复杂的应用程序,需要创建功能模块。还需要能够高效地加载模块,以获得最佳应用程序性能。...您可以引导模块来启动 Angular 应用程序。对于小型应用程序,只需要模块和一些组件。构建更复杂的到大型应用程序时,会向应用程序添加功能模块。...对模块始终采用贪婪加载,一些情况下,也会对其他功能使用贪婪加载。 惰性加载:随着应用程序的功能区域的构建,应用程序的大小会不断增加。...这会在 …/fm 文件夹创建 node_modules 目录,即 …/fm/node_modules。 4. 运行命令 ng serve。...您会看到应用程序默认端口 4200 成功运行,以及一条与此消息类似的消息: 图 1. 应用程序运行在端口 4200 ng 是一条 Angular CLI 命令,您将使用它构建和处理应用程序代码。

    2.2K10

    electron 将pc端(vue)页面打包为桌面端应用

    build/electron.js" }, electron_dev 就是用来启动electron的,在此之前我们一定要确保项目当中已经有构建好的静态资源文件,因此 在运行 electron build...经过这样的处理,命令行运行 npm run electron_dev之后,就会将之前electron-quick-start显示的桌面应用,再次显示出来。...npm run electron_build ? 运行打包exe的命令,还是一既往的顺利,项目中成功出现打包好的文件夹,但是去文件夹启动exe,状况发生了。 ?...npm run electron_build得到打包好的文件夹,找到其中的*.exe,双击运行,终于又出现了熟悉的画面。...在此过程,发现自己做东西还是有些武断,太想当然了,导致一些弯路里绕了很久。以后还是要多看文档,稳扎稳打!

    2.2K20

    Angular开发实践(六):服务端渲染

    /app/app.server.module'; 4、修改客户端应用的引导程序文件:src/main.ts 监听 DOMContentLoaded 事件,发生 DOMContentLoaded 事件时运行我们的代码...它是在这个服务器上运行时才需要的一些可选的 Angular 依赖注入提供商。当你的应用需要那些只有当运行在服务器实例才需要的信息,就要提供 extraProviders 参数。... package.json 的 scripts 区配置 build 和 serve 有关的命令: { "scripts": { "ng": "ng", "start...": "ng build --prod && ng build --prod --app 1 --output-hashing=false", "build:prerender": "npm...服务端的模块懒加载 在前面的介绍我们 app.server.module.ts 中导入了 ModuleMapLoaderModule, app.module.ts。

    4.8K100

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

    ,首先在XShell启动我们的server进程,项目依赖于serverbin文件夹的www文件,所以进入bin文件夹使用pm2 start ....使用angular的ng命令进行打包,使用ng build命令会生成会将client项目打包生成blog文件夹 ? 出现如图的界面,就代表我们的client项目被打包到blog文件夹了 ?...把80端口的路径更改为我们刚才放置blog文件夹的html目录,index就是访问路径会访问的html文件,我们选择blog文件夹下的index.html。...更改完配置文件保存退出,回到FileZilla确认我们刚才的更改操作,然后XShell使用命令nginx -s reload重新加载配置文件。 ? 这样我们前端部署功能基本已经完成了。...可以发现,我们后端的server服务是运行在4001端口,但是我们前端访问没有懈怠端口号,就是访问的80端口,因为端口不一致导致跨域请求,所以无法取到我们数据库的数据。

    3.2K10

    dotnet pack

    --include-source:该选项用于创建带有 src 文件夹的符号包,该文件夹包含源文件。 将被打包项目的 NuGet 依赖项添加到 .nuspec 文件,以便在安装包可以进行正确解析。...如果希望避免此行为,则传递 --no-build 选项。 此选项持续集成 (CI) 生成方案通常非常有用,你可以知道代码是之前生成的。 备注 某些情况下,无法执行隐式生成。...无需运行 dotnet restore,因为它由所有需要还原的命令隐式运行 dotnet new、dotnet build、dotnet run、dotnet test、dotnet publish...--include-source 除输出目录的常规 NuGet 包外,还包括调试符号 NuGet 包。 源文件包括符号包内的 src 文件夹。...--no-build 打包前不生成项目。 还将隐式设置 --no-restore 标记。 --no-dependencies 忽略项目间引用,仅还原项目。

    1.6K20

    使用Yarn workspace,TypeScript,esbuild,React和Express构建 K8S 云原生应用(一)

    文件 本教程,common 软件包将非常简单。首先,从添加新文件夹开始: src/ 文件夹,包含包的代码。...创建此文件夹后,将以下文件添加到其中: src/index.ts export const APP_TITLE = 'my-app'; 现在我们一些要导出的代码,我们想告诉 TypeScript 从其他包中导入它在哪里寻找它.../scripts/build.ts" // Add this line here } } 现在,您可以每次对项目进行更改时从项目的文件夹运行 yarn build 来启动构建过程(如何添加hot-reloading...我们的案例我们希望有一个可以运行 Node.js 应用程序的环境。 WORKDIR 设置容器的当前工作目录。 COPY 将文件或文件夹从当前本地目录(项目的根目录)复制到容器的工作目录。...因为我们要优化构建时间和带宽,所以我们只想在依赖项发生更改(通常比文件更改发生的频率小)重新安装它们。 RUN shell 执行命令。

    4.1K31

    手把手教你写 Roslyn 修改编译

    指定的 $(SolutionDir) 是空 新的项目格式,找了很久都没有找到 $(SolutionDir) 的定义和找到运行的 sln 文件的定义的方法 于是通过 Directory.Build.props...如我有一个项目 lindexi 这个项目的文件夹请看下图 | Directory.Build.props | lindexi.sln | README.md | \---src...只需要在项目文件夹,或者磁盘的文件夹 E:\ 放下本文提供的 Directory.Build.props 文件,整个文件夹内的控制台项目就会输出 林德熙是逗比 想要知道是怎么做的,请看下面 Roslyn...使用 Directory.Build.props 管理多个项目配置 一些大项目需要很多独立的仓库来做,每个仓库之间都会有很多相同的配置,本文告诉大家如何通过 Directory.Build.props...本文告诉大家如何在项目文件通过不同的条件使用不同的方法运行

    2.1K20
    领券