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

为什么Angular build没有打包app文件夹?

Angular build没有打包app文件夹的原因是因为在Angular项目中,打包后的文件会被放置在dist文件夹中,而不是app文件夹中。

Angular的打包过程中,会将项目中的所有源代码、样式表、模板文件等进行编译和压缩,生成最终的可部署文件。这些文件会被打包到dist文件夹中,以便于部署到服务器或者云平台上。

dist文件夹中的文件结构通常包括index.html文件作为入口文件,以及一些打包后的JavaScript、CSS、图片等静态资源文件。这些文件可以直接被浏览器加载和解析,从而运行Angular应用。

在Angular项目中,app文件夹通常用于存放项目的源代码,包括组件、服务、模块等。在开发过程中,我们可以通过编辑和调试app文件夹中的代码来实现功能的开发和调试。但是在打包过程中,Angular会将这些源代码进行编译和压缩,并将生成的最终文件放置在dist文件夹中,以便于部署和运行。

因此,当我们执行Angular build命令时,生成的打包文件会被放置在dist文件夹中,而不是app文件夹中。这样做的好处是可以将源代码和打包后的文件进行分离,使得部署和维护更加方便和灵活。

推荐的腾讯云相关产品:腾讯云对象存储(COS) 腾讯云对象存储(COS)是一种安全、高可用、低成本的云端存储服务,适用于存储和处理各类非结构化数据,如图片、音视频、文档等。它提供了简单易用的API接口和丰富的功能,可以方便地进行文件的上传、下载、管理和分享。

产品介绍链接地址:https://cloud.tencent.com/product/cos

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

相关·内容

Angular企业级开发(6)-使用Gulp构建和打包前端项目

/build/')) }) 上面gulp配置完成的内容是: 1.将目录下所有的以.js结尾的文件 2.执行jshint代码检查 3.然后concat合并为一个文件, 4.再使用uglify...对文件进行压缩, 5.最后输出到当前目录下,build文件夹中。...因为项目中使用bower进行类库的管理,所以在项目打包的过程,需要从bower_components文件夹中就项目实际使用的js和css文件复制发布文件夹中。...在gulpfile.js中有一个task名为vendor,主要任务就是将项目中实际使用的js和css复制到发布文件夹中。我们项目发布文件夹名字为dist。...dist")); }); 开发的源代码 vs 发布的代码文件文件大小对比 4.参考内容 http://www.gulpjs.com.cn/ 前端构建工具gulp使用 前端构建大法 Gulp 系列 (一):为什么需要前端构建

2.1K50

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

添加ngx-build-plus: ng add ngx-build-plus npm 包管理器 AngularAngular CLI 和 Angular 应用都依赖于某些库所提供的特性和功能,它们都是...在 src/ 文件夹里面,app/ 文件夹中包含此项目的逻辑和数据。Angular 组件、模板和样式也都在这里。...app/package.json 此文件只会出现在使用 --strict 模式创建的应用中。此文件不是供包管理器使用的。它用来告诉各种工具和打包器,这个目录下的代码是否没有非局部化的副作用。...添加ngx-build-plus: ng add ngx-build-plus 注意:如果要将其添加到projects文件夹中的特定子项目,请使用--project开关指向它:ng add ngx-build-plus...4.第三方库合并打包并重命名 有的时候,我们希望将所有来自 node_modules 的第三方库都打包到同一个文件中。显然,上面的打包配置并没有满足这个条件。

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

    打包桌面端,跟前端框架无关,只是想夸一下vue在构建项目上的体验真的好,简单方便,会以yes or no的形式让你完成一个主流的前端框架(回想以前构建angular应用,还要打开help,看一大堆api...npm run electron_build ? 运行打包exe的命令,还是一如既往的顺利,项目中成功出现打包好的文件夹,但是去文件夹中启动exe时,状况发生了。 ?...其中我看到报错指向了asar,可我明明没有设置二进制打包啊,于是跟这个asar斗争了很久。 最后发现跟这个asar屁关系没有!...在看到有相关问题出现的谈论下,看到解决方案是没有把package.json放入文件夹,开始还搞不明白为什么还要一个package.json ,后来翻回头来才发现自己太想当然了,以为dist/下是去拿index.html...得到打包好的文件夹,找到其中的*.exe,双击运行,终于又出现了熟悉的画面。

    2.2K20

    React-day1

    的缩写),意思是:可安装的应用程序; App的分类: App和Web的区别: 为什么要学混合App开发 从程序员的角度分析: 挣钱多(别人不会的你会,别人会的,你精通) 对于找工作来说...tools文件夹不解压覆盖也行;解压tools,放到安装根目录中 解压build-tools_r23.0.1-windows.zip(react-native必须依赖这个)、build-tools_r23.0.2...build-tools,并将改名为版本号之后的文件夹,放到新创建出来的build-tools文件夹下 在安装目录中,新建extras文件夹,在extras文件夹下新建android文件夹;解压m2responsitory...,并部署到模拟器或开发机中 运行上一条命令之前,要确保有设备连接到了电脑上,可以运行adb devices查看当前接入的设备列表,打包好的文件,放到了android\app\build\outputs\...src/main/目录下有assets文件夹,如果没有,手动创建之~,再运行上面的命令; 问题3:could not connect to development server 解决方案:晃动手机

    2.2K20

    Angular 工具篇之分析包的大小

    下面我们将使用 Github 上的 angular6-example-app 这个项目来演示上述两个工具的使用案例,首先我们先来初始化 angular6-example-app 这个项目。...初始化 angular6-example-app 克隆 angular6-example-app $ git clone https://github.com/Ismaestro/angular6-example-app.git...安装 angular6-example-app 依赖 $ npm install 启动开发服务器 $ npm start 完成 angular6-example-app 项目初始化之后,我们先来介绍...--prod --stats-json 当项目构建完成后,在根目录下的 dist 文件夹下会生成一个 stats.json 文件,然后我们可以通过以下的命令来查看 webpack 打包文件大小信息:...在 angular6-example-app 项目中,也为我们提供了相应的 npm script,具体如下: "bundle-report": "ng build --prod --stats-json

    2.4K40

    pycharm创建flask项目没有文件夹app文件_python flask框架

    app.route(rule, options) - rule 参数表示与该函数的URL绑定。 - options 是要转发给基础Rule对象的参数列表。...run():Flask类的run()方法在服务器上运行应用程序 app.run(host, port, debug, options) #所有参数都是可选的,hots默认127.0.0.1(localhost..._init__.py文件 3、按同样的方式在根目录下新建templates 的Python Package,新建完成后删除其下自动生成的__init__.py文件 备注:有__init__.py文件的文件夹为...python包,没有__init__.py文件的为目录 这样就完成了创建Flask项目。...六、新建项目常见问题 1、没有flask模块,报错提示:ModuleNotFoundError: No module named ‘flask’ 解决方案:File–Settings—-Project–Project

    1.8K20

    vue项目打包后提交到git上为什么没有dist这个文件?

    vue项目中使用npm run build打包后会生成一个dist文件,使用git推送项目后,发现git上少了一个dist文件,为什么明明本地项目中有这个文件而推上去就没有了呢?...src/ 不过滤该文件夹 !*.zip 不过滤所有.zip文件 !/mtk/do.c 不过滤该文件 1、配置语法: 以斜杠/开头表示目录; 以星号*通配多个字符; 以问号?...(2) 用Git Bash 根目录下右键选择“Git Bash Here”进入bash命令窗口; 输入vim .gitignore或touch .gitignore命令,打开文件(没有文件会自动创建);...如图: # dependencies npm包文件 /node_modules # production 打包文件 /build # misc .DS_Store npm-debug.log...默认情况下,Mac OS X下的每个文件夹下应该都会生成一个,包括网络介质存储盘和U盘这样的外部设备。

    1.2K10

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

    应用,你可以通过 Angular CLI 直接生成,如有需要,可以点击此链接进行跳转查看(电梯直达),这里就不演示创建的过程了 按照正常的前端项目发布流程,当我们需要发布时,需要使用 npm 命令来完成项目的打包...整个项目中所涉及的 npm 命令,我们可以通过查阅项目的 package.json 文件中的 scripts 节点进行查看 这里通过 Angular CLI 创建的项目可以通过 ng build 命令来完成项目的打包发布...当 build 命令执行完成后,项目根路径下 dist 文件夹中以项目名称命名的文件夹就是我们需要部署的文件。...dependencies to build app - name: Install dependencies run: npm ci 当还原完成之后,就可以执行 package.json...angular-cli-ghpages to deploy app - name: Deploy to github pages env: GITHUB_TOKEN

    1.4K10

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

    一. angular-cli.json常见配置 { "project": { "name": "ng-admin", //项目名称 "ejected": false // 标记该应用是否已经执行过...", // 指定站点的部署地址,该值最终会赋给webpack的output.publicPath,常用于CDN部署 "styles": [ // 引入全局样式,构建时会打包进来,常用于第三方库引入的样式..."styles.css" ], "scripts": [ // 引入全局脚本,构建时会打包进来,常用语第三方库引入的脚本 ], "environmentSource...下面两条等价: ng build --target=production ng build --prod 7.--environment 指定应用执行环境。...下面两句等价: ng build --environment=prod ng build --env=prod 构建时会加载angular-cli.json指定的环境配置文件: "environments

    1.6K30

    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

    混合手机app开发之Ionic篇

    混合手机app开发之Ionic篇第一章 第一节:环境搭建 本次使用的是Ionic3,之前本想用最新的ionic5 使用ionic build后发现,我使用的X5内核不能正常浏览,使用ionic3没有任何问题...本次我不使用cordova来打包,这次我将要完成的任务是: 1、集成腾讯X5内核。 2、集成百度语音合成和百度语音识别。 3、集成腾讯闲聊能够语音与计算聊天。...第二节:创建项目 1、创建项目 我想在E盘的ionic文件夹下创建一个项目使用命令执行:e:,然后:cdionic,进入执行:ionic start 项目名称 --type=ionic-angular...新建项目:ionic start 项目名称 --type=ionic-angular 运行项目:ionic serve 发布:ionic build Android打包 ionic cordova platform...add android cordova build android 常用插件: npm install ts-md5 --save npm install @angular/http 1.npm安装

    84420

    用Angule Cli创建Angular项目

    Angular4.0来了,更小,更快,改动少 接下来为Angular4.0准备环境和学会使用Angular cli项目 1.环境准备: 1)在开始工作之前我们必须设置好开发环境 如果你的机器上还没有安装...new my-app 项目会很快创建完成,接下来你会看到 Installing packages for tooling via npm 这里如果你选这了淘宝的cnmp镜像,应该最好在安装完全局Angular...(这个文件夹放的是第三方库); 然后我们需要操作.angular-cli.json文件,把bootstrap和jQuery添加进去: 这里需要注意的是:因为angular用的是微软开发的typescript...ng serve 或者是 npm start 这两个的默认端口都是4200: http://localhost:4200  这里你也可以修改默认的端口: ng serve -p 3000 5)最后项目的打包...   用angular cli创建的项目会有很多文件,我们就需要打包后再发行: ng build

    1.5K60

    指尖前端重构(React)技术分析报告

    一、为什么选择React React是当前前端应用最广泛的框架。三大SPA框架 Angular、React、Vue比较。...Angular出现最早,但其在原理上并没有React创新的性能优化,且自身相对来说显得笨重。...比如cordova中某些插件安装后export函数或者变量供引入使用,因为一开始是分离的,在create-react-app中并找不到这些变量,就造成在build的时候产生变量undefined的错误,...在github上有一些react cordova 库,但实质上它们都需要通过npm run build打包,所以并没有解决引入插件变量的问题,且会与create-react-app 有相斥的地方。...Build时控制台报错仅针对src文件夹下的代码,而在public文件夹下还有个index.html这个文件会最终被打包放到www目录下,因此可以在这个文件中deviceready时添加全局的插件变量(

    5.4K30
    领券