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

Angular构建在heroku上失败,无法找到模块,但在本地运行良好

Angular是一个流行的前端开发框架,而Heroku是一个云平台,用于部署和托管应用程序。当在Heroku上构建Angular应用程序时,可能会遇到找不到模块的问题。这可能是由于以下几个原因导致的:

  1. 依赖项问题:在Heroku上构建应用程序时,需要确保所有依赖项都已正确安装。可以通过检查项目的package.json文件来确认依赖项是否正确。确保所有依赖项的版本与本地开发环境中的版本一致。
  2. 缺少构建脚本:在部署到Heroku之前,需要确保项目中包含了正确的构建脚本。这些脚本通常在package.json文件的"scripts"部分定义。确保构建脚本正确地编译和打包Angular应用程序。
  3. 环境配置问题:Heroku可能需要一些特定的环境变量或配置文件来正确构建和运行应用程序。确保在Heroku上设置了正确的环境变量,并将其与本地开发环境保持一致。

解决这个问题的一种方法是通过以下步骤进行操作:

  1. 确保本地开发环境中的Angular应用程序可以正常运行。使用命令行工具进入项目目录,并运行以下命令来启动应用程序:
  2. 确保本地开发环境中的Angular应用程序可以正常运行。使用命令行工具进入项目目录,并运行以下命令来启动应用程序:
  3. 如果应用程序在本地运行良好,则可以继续下一步。
  4. 确保项目中的package.json文件包含了正确的依赖项,并且版本与本地开发环境中的版本一致。可以使用以下命令来安装依赖项:
  5. 确保项目中的package.json文件包含了正确的依赖项,并且版本与本地开发环境中的版本一致。可以使用以下命令来安装依赖项:
  6. 确保项目中包含了正确的构建脚本。在package.json文件的"scripts"部分,确保包含了正确的构建命令。例如,可以使用以下命令来构建应用程序:
  7. 确保项目中包含了正确的构建脚本。在package.json文件的"scripts"部分,确保包含了正确的构建命令。例如,可以使用以下命令来构建应用程序:
  8. 确保在Heroku上设置了正确的环境变量。可以通过Heroku的控制台或命令行工具来设置环境变量。确保将所有必要的环境变量设置为与本地开发环境相同的值。
  9. 将代码推送到Heroku并进行部署。使用Git将代码推送到Heroku的Git仓库,并触发自动部署过程。可以使用以下命令将代码推送到Heroku:
  10. 将代码推送到Heroku并进行部署。使用Git将代码推送到Heroku的Git仓库,并触发自动部署过程。可以使用以下命令将代码推送到Heroku:
  11. 确保在部署过程中没有出现任何错误,并且应用程序成功构建和启动。

如果以上步骤都正确执行,应该能够在Heroku上成功构建和运行Angular应用程序。如果问题仍然存在,可以查看Heroku的日志文件以获取更多详细信息,并尝试根据错误消息进行进一步的调试和解决。

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

相关·内容

写在Github被微软收购之际 - Github的那些另类用法

假设我开发了一个Angular应用,应用的入口页面是angular_controller.html,那么将本地文件推送到Github后,使用如下格式的url访问该应用: http://<your user...我把基于这些库文件开发的一共91个HTML应用都部署到了Github,可以通过点击下面的链接来运行。...在Heroku创建应用后,只需要点击Connect to Github按钮, 即可通过本地Git客户端向远端仓库的推送动作来触发Github向Heroku的自动部署。...也就是说,每次在本地做完修改,推送到Github远端仓库后,我们就可以直接访问Heroku最新版本的应用了。...详细步骤参考我的博客:Step by step to host your UI5 application in Heroku 我部署在Heroku的一个UI5应用: https://jerrylist.herokuapp.com

1.1K00

放弃“免费套餐”,Heroku的遗产又少了一个

如果没有 Heroku,我永远无法达到今天的水平,以至于现在我真的无法说清它对我的职业生涯曾经有多么重要!” 像他这样通过 Heroku 学习编程的,不是少数。...实际,这个革命性的产品,从技术讲已经停滞不前,其产品也名存实亡,一位 Heroku 前员工在 HN 写道:“你必须追溯到 Heroku Changelog 才能找到任何不是语言版本升级或特性删除的内容...Heroku 使这一问题得到了极大的简化,它使开发者集中精力在构建软件,而非在配置和运行基础设施。在当今世界,这显然是一种有利条件,但在那时并非如此。...即使是最大的数据处理应用也可以部署在 10GB 或 100GB 内存的容器,一直到最小的一次性云 grep 运行只需要几兆字节。如此快速和简单,以至于不在 Heroku 运行简直就是疯了。...检查失败 那么,到底发生了什么呢?一切成功的基石都已经就位,因此无法实现其雄心勃勃的愿景并非必然。

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

    安装 Angular CLI 后,您需要运行一个命令来生成一个项目,并运行另一个命令来使用本地开发服务器来运行您的应用程序。...与当今大多数现代前端工具一样,Angular CLI 构建在 Node.js 之上。 Node.js 是一种服务器技术,允许您在服务器运行 JavaScript 并构建服务器端 Web 应用程序。...您可以通过在命令提示符中运行以下命令来确保系统安装了 Node,该命令应显示已安装的 Node 版本: $ node -v 接下来,运行以下命令来安装 Angular CLI: $ npm install...lint (l): 在给定项目文件夹中的 Angular 应用程序代码运行 linting 工具。 new (n): 创建一个新的工作区和一个初始的 Angular 应用程序。...运行结果如下图所示: 生成Angular构件 Angular CLI 提供了 ng generate 命令,可帮助开发人员生成基本的 Angular 构件,例如模块、组件、指令、管道和服务: $ ng

    46600

    node-sass 埋坑记录

    以上是涉及到的工具的版本,可正常使用,项目运行良好。...后来,接手的新项目中: Angular-CLI:v8.x 由于升级了 Angular 版本,同样也升级了 Angular-CLI 版本,导致 v8.x 版本的 node 已经无法编译 angular 项目...无奈,升级了 node 版本,随之而来的就是 node-sass v4.8.0 版本无法使用,又导致构建失败,所以又得安装新版本 node-sass。...好不容易在本地安装了 Python 环境,又报了个 MSB4132:无法识别工具版本 2.0 的错误。...下载失败 请先确认是否是镜像问题,可以手动在浏览器地址栏输入 node-sass 下载的地址(可在 package.json.lock 中查看),看是否能够找到对应版本的 node-sass 出现文章开头说过的几种

    4.3K10

    JavaScript框架比较:AngularJS vs ReactJS vs EmberJS

    最后,你对基于JavaScript的app或网站找到了一条奇妙的思路。选择正确的框架可能对你项目的成功有着相当大的影响。它可以影响你按时完成项目并在将来维护代码的能力。...Angular.js通过使用指令扩展HTML的功能来解决开发SPA(单页应用程序)的问题。此框架强调让你的app快速完成和运行。...Angular的模板引擎对DOM有着深入的理解,且其结构良好的模板减少了创建结果页面所需的代码总量。 数据建模限于小数据模型的使用,以使代码简单易于测试。 在渲染静态列表时速度快。...良好的代码重用。 非常适合JavaScript调试。 完全有可能用React增强Angular以增强麻烦的组件的性能。 完全基于组件的架构。...强数据层与Java集成良好。 完全成型的模板机制(Handlebars模板引擎构建在流行的Mustache 模板引擎)减少了编写的代码总量。

    12.7K60

    7 个原则和 10 种策略让你成为 10x 开发者

    设置通知 确保你为以下内容设置了通知: 构建失败 部署失败 服务停机时间 不健康的服务器 意外错误 不寻常的流量 第三方服务状态 许多第三方服务有可以在 Slack 订阅状态页面。...Docker 在本地默认会缓存,而且很快,但在 CI 中你没有永久的机器。所以你需要自己设置缓存。参考 Docker 文档。 e....或者,如果你团队中的其他人已经构建了一个提交,然后你在本地运行构建,它同样会下载缓存,在几秒内完成,而不是从头再构建一次。 5. 用预览环境替代暂存环境 预览环境是与拉取请求生命周期相关的临时环境。...这导致了 Heroku 的诞生,全世界的开发者都为此欢呼雀跃。但这种兴奋并不持久,因为运维人员并不高兴。事实证明, Heroku 这样的抽象在大公司是无法扩展的。...通过这种方式,业界找到了一种同时让运维和开发双方满意的方法。这就是所谓的平台工程。 现在许多公司都在构建某种内部开发者平台,它可以更像是一个内部 Heroku,也可以只是 Terraform。

    9410

    ngrok 是什么,我们为什么要使用它?

    在 AWS、Azure、Heroku、阿里云、腾讯云本地 Kubernetes 集群、树莓派甚至笔记本电脑运行您的应用程序。有了ngrok,一切工作都是一样的。...本地预览:在没有服务器的时候向客户演示在本地机器运行的网站,而无需部署到远程服务站点。 移动后端测试:针对正在本地机器开发的后端测试您的移动应用程序,尤其适合小程序开发的需求场景。...设备的API:在您的设备作为服务运行ngrok,为其本地API创建安全URL,使您的云服务能够控制和管理它们。...Kubernetes Ingress:运行ngrok的入口控制器,以创建在任何Kubernetes集群中运行的k8s服务的入口。...首先: 这意味着您可以在任何地方运行服务——任何云,如AWS或Azure,任何应用程序平台,如Heroku本地数据中心,家中的树莓派,甚至在笔记本电脑

    1.3K10

    「前端架构」React,Angular还是Vue,太难选了?看完秒懂。

    Angular应用程序总是有一个支持引导的根模块,通常有一堆特性模块。NgModules是将相关代码收集到功能组件中的基本构建块。 组件为屏幕元素定义视图,并使用与视图不直接相关的特定功能的服务。...与其他框架中的组件类似,模块允许代码重用和由不同的人甚至团队进行并行开发。Angular社区还提供了带有可重用组件的预制模块。 Vue灵活性 轻量级和简单是Vue设计的核心原则之一。...您可以检查每个框架测试的源代码,甚至可以在本地计算机上运行这些基准测试。所有的说明以及每个测试的详细解释都在存储库中。 Dom操作 ? DOM操作测试在应用程序完全加载和预热后测量UI性能。...虽然TypeScript构建在JavaScript之上,而且非常容易学习,但RxJS确实需要一些努力才能掌握。...今天,我们不能向我们的客户推荐好的老Angular,因为它继续失去人气,我们担心很难很快找到好的Angular开发人员。

    6.3K40

    机器学习也能套模版:在线选择模型和参数,一键生成demo

    目前,该项目已经在网站上线,可以直接在网页(网页地址可在文末获取)操作上述内容,并直接生成demo。 运行方法 另外,如果你想要在本地运行或者部署,开发者还贴心地提供了使用指南。...设置repo后,创建一个.env文件其中包含: GITHUB_TOKEN= REPO_NAME= 本地运行...streamlit run app/main.py 确保总是从traingenerator目录(而不是从应用程序目录)运行,否则应用程序将无法找到模板。...要创建新部署的话,便在traingenerator内部运行: heroku create git push heroku main heroku open 之后,更新已部署的应用程序,提交更改并运行:...git push heroku main 如果你设置了一个Github repo来启用「在Colab中打开」按钮,你还需要运行: heroku config:set GITHUB_TOKEN=<your-github-access-token

    1.2K20

    写在 2021: 值得关注学习的前端框架和工具库

    整体的感受非常舒服: 模块划分,我本人非常喜欢模块化的思想(个人认为React的是组件化而不是模块化),各个模块完全自己干自己的,不管是多级路由还是复杂数据流都显得结构清晰。...但在Angular中模板被单独放一个html文件,组件用Class的语法写,我就莫名觉得爽快。...Remax[19],小程序跨端框架,基于React,亮点是运行时方案(大部分跨端方案都是编译时,还有Rax这种两套方案都支持的)。...Ionic[20],出现比较早的一个跨端方案,最开始只支持Angular,现在还支持了React和Vue,暂时没有使用过。目前的了解是性能与Vue支持存在一些问题(所以Angular YES)。...NodeJS NestJS[24],一个大而全的Node框架,就像NodeJS里的Angular,实际作者也是受到了Angular的影响,很多装饰器都和Ng中的同名。

    4.2K10

    微服务平台改造落地解决方案设计

    添加数据时,在缓存到远程redis的同时,缓存一份到本地进程ehcache(此处的ehcache不用做集群,避免组播带来的开销),取缓存的时候会先取本地,没有会向redis请求,这样会减少应用服务器<–...(见下图,为了减少get这几条网络传输,我们会在每个应用服务器增加本地的ehcache缓存作为二级缓存,即第一次get到的数据存入ehcache,后面output输出即可从本地ehcache中获取,不用再访问...appModule:系统的根模块Angular 应用是模块化的,每个应用至少有一个跟模块。 homeModule:系统界面框架模块,包括左侧菜单栏、顶部导航栏以及中间内容区。...模块化开发 利用Angular的module功能对不同的应用模块采用模块化开发。 组件化开发 Angular原生支持组件化开发,降低代码的耦合性,提高代码可复用性。...成果展示 服务源代码构建任务清单: app-cloud-cloudware-authserver(认证服务源代码构建任务) app-cloud-cloudware-configserver(配置中心服务源代码建任务

    1.2K10

    Kubernetes开发应用程序的工具

    其他工具可以像高级编程语言一样,构建在此 API 提供更简单的体验。 新的开源项目正在开发中,它们构建在较低层的云原生项目,以简化流程。...这意味着他们需要在本地运行 Kubernetes,并且希望它与在他们的生产环境中运行的版本相同。这些人中的许多人希望像运行桌面应用程序并选择他们需要的 Kubernetes 版本那样简单。 ?...许多开发人员想要一个简单的按钮,这样他们就可以运行他们的代码。我们有时称它为"Heroku in a box"。Kubernetes 需要简化的应用开发者体验,这使得许多组织都建立了自己的平台。 ?...例如,你可以在 Rancher Desktop 中运行 Epinio 来简化本地应用程序开发。然后,你可以在另一个环境中运行 Epinio,并在应用程序就绪时将其推到那里。...在Twitter[9]或GitHub[10]找到他。

    1.2K30

    最值得推荐的免费Linux防火墙 转

    该GUI具有简单的搜索栏以及新的系统运行状况模块,该模块是交互式的,并且可以在你分析网络时提供可视化反馈。你还可以以CSV格式导出数据以便进行进一步分析。...IPFire通过使用构建在netfilter的SPI(状态数据包检测)防火墙为用户提供严格的安全措施。 IPFire专门针对防火墙和网络新手而设计,且可以在几分钟内完成设置。...这个防火墙发行版可运行在各种硬件中,但目前仅支持x86架。其网站提供一个方便的硬件指南让你可选择兼容的设备。安装过程从命令行完成,但非常简单,你可选择从CD或者USB驱动器启动。...IPFire具有最简单的安装过程;Smoothwall Express可以为你提供最专业的商业级解决方案;pfSense具有最小的空间占用量,尽管它只能在x86架运行;其他各款的优点上面都有所提及,...最终胜出者  对于我们而言,如果技术无法完全发挥功效就是一种浪费。这就是我们为什么更喜欢虚拟化的原因,防火墙可作为虚拟服务器运行在用于网页浏览的同一硬件

    4.9K31

    别了,JavaScript;你好,Blazor

    我们在浏览器里运行JavaScript构建的完整应用程序,见过大量的.NET程序员转战前端战场。 我们拆分业务逻辑,做到前后端分离架构,以便某些逻辑在浏览器运行,有些在服务器运行。...它甚至可以脱机运行运行时使得blazor 和 WebAssembly 运行的其他语言与众不同,MonoCLR 编译为WebAssembly。...为什么这是很酷的: 您可以在任何静态文件服务器运行它(Nginx、ISS、Apache、S3、Heroku 等) 它以WebAssembly 运行 JS,以接近本机的速度运行 C#。...一些缺点: 首次需要下载 .NET 框架和其他运行时文件(一次) 您仅限于浏览器的功能 在本地下载的所有机密(凭据、API 密钥等) 并非兼容所有 .NET 框架组件 有这些缺点也正是Blazor...WebAssembly自身无法访问任何平台API,而要访问这些API,JavaScript也是必要的。

    3.1K30

    移除 View Engine 转用 Ivy,盘点Angular 12的重要更新

    为了确保 Angular 能够提供良好的类型检查、快速侦测变更,Angular 官方团队一直在调整静态检查和动态构建的平台。...事实,从 Angular 9 开始,新的 Angular 应用程序就默认启用 lvy。...由于 View Engine 函数库的存在,Angular 暂时还无法移除旧的实例化,这导致维护成本不断增加,Angular 整体发展速度也被拖慢。...在更新至 Angular 12 之后,应用会通过 ng update 进行更新并自动切换为新的 API。 提供相关工具,可使用最新算法将旧版本地化 ID 迁移为新 ID。...Webpack 5 模块捆绑器现已实现生产就绪。 不再支持 IE11 浏览器。 对于编译器,新版本提供转换组件样式资源的支持能力。 对于语言服务,新版本仅在模板中提供 Angular 属性补全功能。

    4.4K10

    AngularJS7那些不得不说的事故

    AngularJS版本   通常AngularJS项目的构建、编译、管理等都是由@angular/cli模块完成的。...这个模块简便的安装方法是依赖npm, 而@angular/cli本身也依赖网络,因此当AngularJS有了新版本,所有使用客户端ng建立项目,也就自动使用了AngularJS的新版本。...但在中、小型公司,这是个很烦心的问题。我建议对于一些复杂的项目,尽可能的保留下来原有的node_modules 文件夹,毕竟跟硬盘容量比起来,这一点空间不算啥了,能让你将来项目的维护轻松许多。   ...文件,在projects一节,找到你的项目名称,随后在其options中,scripts参数后面的数组中添加所有需要引用的js库: "scripts": [ "node_modules/jquery...编译结果,在老版本ios设备无法使用的问题   为了支持更多的设备,兼容早期的ios浏览器是很有必要的。但原本运行良好的项目,移植到AngularJS后就无法 在早期ios浏览器中使用了。

    1.5K10
    领券