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

为什么在将我的Angular项目部署到Heroku时会出现ng not found错误?

在将Angular项目部署到Heroku时出现"ng not found"错误的原因是Heroku默认不支持Angular CLI命令。Heroku是一个云平台,用于部署和托管应用程序,但它并不直接支持Angular CLI命令,因此在部署过程中会出现该错误。

要解决这个问题,可以采取以下步骤:

  1. 确保在项目的根目录下已经安装了Angular CLI。可以通过在命令行中运行npm install -g @angular/cli来全局安装Angular CLI。
  2. 确保在项目的根目录下已经安装了所有的依赖项。可以通过在命令行中运行npm install来安装项目所需的所有依赖项。
  3. 在项目的根目录下创建一个名为postinstall的脚本。在该脚本中,添加以下内容:
代码语言:txt
复制
"scripts": {
  "postinstall": "ng build --aot --prod"
}

这将在部署过程中自动构建项目,并生成用于生产环境的文件。

  1. 确保在项目的根目录下有一个名为Procfile的文件。在该文件中,添加以下内容:
代码语言:txt
复制
web: npm run start

这将告诉Heroku在部署时运行npm run start命令。

  1. 确保在项目的根目录下有一个名为package.json的文件。在该文件中,添加以下内容:
代码语言:txt
复制
"engines": {
  "node": "版本号",
  "npm": "版本号"
}

将"版本号"替换为您项目中使用的Node.js和npm的版本号。

  1. 最后,将项目部署到Heroku。可以通过在命令行中运行以下命令来完成部署:
代码语言:txt
复制
heroku login
heroku create
git add .
git commit -m "Initial commit"
git push heroku master

这将创建一个新的Heroku应用程序,并将您的项目推送到该应用程序。

通过以上步骤,您的Angular项目应该能够成功部署到Heroku,并且不再出现"ng not found"错误。

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

相关·内容

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

一旦安装了它们,我们将通过运行以下命令来安装Angular CLI: npm install -g @angular/cli 安装成功后,我们可以通过运行以下ng new命令来生成一个新项目: ng new...Angular CLI运行webpack dev服务器,该服务器将我们的应用呈现在下一个空闲端口上(以便您可以在同一台机器上运行多个应用),并进行实时重新加载。...如果您对我们为什么这么做感到好奇,可以在Angular的文档中阅读它。...您可以在项目的所有部分使用该文件中的值,并environment.ts在Angular CLI负责提供来自相应项目的内容时将其包含在内environment.your-environment.ts。...正如我们从它的实现中可以看到的那样,它也将我们的ServerFailure动作映射到它的有效负载,然后显示这个有效负载(我们的服务器错误)console.log。

42.7K10

Angular 6的新特性介绍

如果您的某个依赖项提供了一个ng update原理图,那么他们可以在需要进行重大更改时自动更新代码! ng add ng add 也是新增的一个cli命令。...通过ng add可以更加容易向项目中添加新功能(类似npm install ) Angular Material+CDK组件 angular6最大的补充是用于显示分层数据的新树组件。...ng generate library 这个命令将在你的CKI工作空间创建一个库项目,并且自动添加配置信息到angular.json文件和tsconfig.json中。...RxJS作为一个独立的工程已经在几周前完成了V6的发布 长期支持 (LTS) 我们正在将我们的长期支持扩展到所有主要版本。...每个主要版本将支持18个月,大约6个月的积极开发,接下来是12个月的关键错误修正和安全补丁。 如何升级到6.0.0 按照引导对应用进行升级 ?

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

    前端项目,最主要的还是能够实际看到,因此考虑找个地方部署,因为自己的博客是部署到 github page 上的,并且这个项目也只是一个静态网站,所以这里同样选择使用 github page 同时,考虑到发布项目时...整个项目中所涉及的 npm 命令,我们可以通过查阅项目的 package.json 文件中的 scripts 节点进行查看 这里通过 Angular CLI 创建的项目可以通过 ng build 命令来完成项目的打包发布...此时,如果是部署到自己的服务器上,只需要把这个文件夹拷贝到服务器上,通过 nginx 之类的服务器指向文件所在路径即可 同样的,当我们想要部署到 github page 时,我们也只需要将文件提交到 github...应用来说,我们完全可以使用社区提供的 angular-cli-ghpages 插件来简化这个操作 首先我们需要通过 npm 将插件安装到需要部署的程序中 ng add angular-cli-ghpages...安装完成之后,我们就可以通过 ng deploy 命令来完成部署,插件会自动把打包生成的文件发布到 github 上,并创建一个 gh-pages 分支作为 github page 显示的站点 ng

    1.5K10

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

    后台服务启动成功,下一步就是需要打包我们的前端项目部署到nginx的80端口,我的项目前端使用了angular框架,所以需要在全局安装angular-cli脚手架,命令:npm install -g angular-cli...使用angular的ng命令进行打包,使用ng build命令会生成会将client项目打包生成blog文件夹 ? 出现如图的界面,就代表我们的client项目被打包到blog文件夹了 ?...可以看到,在我们的client项目下,生成了一个blog文件夹,我们只需要把这个文件夹部署到我们nginx的80端口,我们前端的部署工作就可以大功告成了。...可以看到我已经把我们的前端项目部署到nginx服务器了,现在我们需要去更改nginx的配置文件,一般配置文件在etc/nginx ?...我们需要将blog项目部署在80端口,所以找到我们80端口的配置 ?

    3.2K10

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

    一. angular-cli.json常见配置 { "project": { "name": "ng-admin", //项目名称 "ejected": false // 标记该应用是否已经执行过...,默认是dist/ "assets": [ // 记录资源文件夹,构建时复制到`outDir`指定的目录 "assets", "favicon.ico"..."deployUrl": "//cdn.com.cn", // 指定站点的部署地址,该值最终会赋给webpack的output.publicPath,常用于CDN部署 "styles...--hmr 注意开启之后,只是在angular-cli里的webpack添加必要的扩展,等价于webpack-dev-server --hot,还需要在应用代码里处理hmr逻辑,如可在main.ts里添加...下面两句等价: ng build --environment=prod ng build --env=prod 构建时会加载angular-cli.json指定的环境配置文件: "environments

    1.6K30

    初学Node.js并部署到好雨云

    网站的错误不经常发生,但当我们遇到的时候非常令人懊恼,比如当我们想要在线挂号的时候,遇到了这个: 为什么会出现这种情况,背后的服务器发生了什么?...部署到网上 我的服务器已经正常运行了,可是它只是跑在我的本地,如果想要让更多的人访问我的网站,我需要将它放到互联网上我们需要选择一个云平台来部署我们的网站。...写个博客 好,在部署之前,我们需要进行一些开发的工作,让我们写个简单网站,新建项目目录名为myblog,并创建server.js(上面说过的,还记得吗?)...为了解决依赖问题我们需要写一个package.json文件将我们项目需要的依赖放进去。...部署到好雨云 OK,到这里我们的网站写好了,需要将代码提交到好雨云来部署,点新建应用后,好雨平台会给我们一个git代码仓库的地址,我们只需要将代码提交到这个地址就可以了。

    95461

    angularjs directive学习心得

    一些常见的错误 在angularjs里,创建directive时,directive的名称应该要使用驼峰式,例如myDirective,而在html里要调用它的时候,就不能用驼峰式了,可以用my-directive...在这里,我们在html里增加了一些标签,然后在transclude里,给一些标签设置了一些名字,然后我们就可以在template里,让ng-transclude="你设置的名字"来将你某些特定的内容放在特定的位置...这个时候就涉及到html的一个渲染过程了: 浏览器先加载所有的html标识,将其转化为DOM,当浏览器遇到angularjs的时候,就会停止解析过程,去执行angularjs angularjs在DOM...中搜索ng-app执行,若搜索到,则初始化一些必要的组件(即$injector、$compile服务以及$rootScope),然后从该元素开始执行angular的编译 angularjs查看整一棵树,...如果发现有directive,则将directive以及它的compile函数一起加入到待编译组里,等全部搜索完毕后,在根据他们的优先级对他们进行依赖注入和编译 编译运行完后,就会执行它们的链接函数,注册一些监听事件

    1K10

    Angular2学习笔记

    (注意node的版本一定要是6以上的,否则会报奇奇怪怪的错); 安装angular-cli (npm install -g @angular/cli); 新建项目 (ng new PROJECTNAME...项目发布 如果是测试环境,直接ng serve就可以用node服务器在本地的默认4200端口显示页面了。...但是,用测试环境你会发现项目非常的巨大,一个啥依赖都没有的'Hello world'就足足有3MB的大小,这显然是用户无法接受的。 那么为什么他会有这么大呢?...但是他也有很多的缺点,Angular2文档中列举了下面几点: 渲染得更快; 需要的异步请求更少; 需要下载的Angular框架体积更小; 提早检测模板错误; 更安全; 于是,Angular2又提出了一个新的编译方法叫...不过对于真正的生产环境我们显然不能用node服务器,我这里用的是nginx来部署,具体步骤如下: 使用命令ng build --prod --aot来生成dist/文件夹。

    2K10

    使用CircleCI2.0持续集成Angular项目

    对于Angular项目,之前处理一个ticket的流程我们的做法: 启动项目本地开发 npm start 开发完成,跑代码语法及规范检测 npm run lint 跑单元测试 npm run test...CircleCI的好处(截止当前的政策2019.2): 不用自己买服务器,比Jenkins简单。省去了维护和部署。...具体实现 Angular项目根目录新建.circleci目录(注意以点开头),然后在这个目录里面再新建config.yml文件 下面是我正在使用的配置,具体语法可以见官方介绍 # Check https...这个镜像包含了node10, Chrome(为了跑单元测试), Python2.7(为了安装AWS CLI), AWS CLI(为了上传打包后的静态资源) 大致流程就是开头说的,只不过为了统一环境我们的项目是在...当然,你可以直接通过SSH将项目传到站点服务器部署。也需要在后台配置下访问服务器的Key。 效果: image.png

    83140

    Angular 从入坑到挖坑 - 路由守卫连连看

    从入坑到挖坑 - 组件食用指南 Angular 从入坑到挖坑 - 表单控件概览 Angular 从入坑到挖坑 - HTTP 请求概览 Angular 从入坑到挖坑 - Router 路由使用入门指北...-- 404 页面 ng g component page-not-found 在 app-routing.module.ts 文件中完成对于项目路由的定义,这里包含了对于路由的重定向、通配路由,...UrlTree:取消当前的导航,并导航到路由守卫返回的这个 UrlTree 上(一个新的路由信息) 4.2.1、CanActivate:认证授权 在实现路由守卫之前,可以通过 Angular CLI...Angular CLI 创建一个危机中心模块(crisis 模块) -- 查看创建模块的相关参数 ng g module --help -- 创建危机中心模块(自动在 app.moudule.ts...,如果你在创建模块的命令中设置了自动引入当前模块到 app.module.ts 文件中,大概率会遇到下面的问题 ?

    3.8K30

    【Hybrid开发高级系列】AngularJS(一)——基础专题

    /configure的时候,有几个东西没有: openssl -> not found, library -> not found, fdatasync(2) with c++ -> no。         ...ng-init -该指令初始化应用程序数据。 ng-model -此指令定义的模型,该模型是变量在AngularJS使用。 ng-repeat -该指令将重复集合中的每个项目的HTML元素。...现在我们的过滤器准备好了,我们需要将我们的phonecatFilters模块作为一个依赖注册到我们的主模块phonecat上。...注意到参数名字非常重要,因为注入器会用他们去寻找相应的依赖。 2.1.8 '$'前缀命名习惯         你可以创建自己的服务,实际上我们在步骤11就会学习到它。...你可以像下面这样运行测试:     1、在一个单独的终端上,进入到angular-phonechat目录并且运行.

    55080

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

    新建一个Github仓库,再新建一个gh-pages分支,将您的HTML项目文件保存并推送到该分支下。...在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...克隆完成后,一旦在ABAP包里创建ABAP的报表或者类等开发对象,这些对象会自动出现在ABAP Git客户端。

    1.1K00

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

    NG-ZORRO StackBlitz 第一个本地实例# 实际项目开发中,你会需要对 TypeScript 代码的构建、调试、代理、打包部署等一系列工程化的需求。...$ npm install -g @angular/cli 创建一个项目# 在创建项目之前,请确保 @angular/cli 已被成功安装。...注意: 如果启动后出现 Error: spawn xxxx ENOENT 那么可能就是你环境变量没配好,或者是你刚下载了node配置了环境而没重启电脑 360游览器好像不支持使用Angular 谷歌我试了是支持的...,其他的游览器我没试过 构建和部署# $ ng build --prod 文件会被打包到 dist 目录中。...在 angular.json 中引入了 { "styles": [ "node_modules/ng-zorro-antd/ng-zorro-antd.min.css" ] } 在 style.css

    2K30

    Angular v18 现已推出!

    此行为仅对新应用程序启用,因为它可能会导致依赖于以前的更改检测行为的应用中出现 bug。合并减少了不必要的更改检测周期,并显著提高了某些应用程序的性能。...Angular.dev 主页现在,所有对 angular.io 的请求都会自动重定向到 angular.dev。为确保所有现有链接继续有效,我们将开发人员转发给 v17.angular.io。...从 v18 开始,事件调度在使用混合渲染时为事件回放提供支持。大多数开发人员不会直接与事件调度进行交互,因此让我们研究一下为什么事件回放很有用。您可以在下面找到一个简单的电子商务网站的模拟。...如果你的应用有任何冻结错误,Angular DevTools 将在组件资源管理器中可视化它们。...感谢我们的社区贡献者 Matthieu Riegler,他让每个人都可以使用它!自动迁移到应用程序开发器在 Angular v17 中,我们宣布“应用程序构建器”是稳定的,并默认为新项目启用它。

    28110
    领券