首页
学习
活动
专区
工具
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.tsAngular CLI负责提供来自相应项目的内容时将其包含在内environment.your-environment.ts。...正如我们从它实现中可以看到那样,它也将我ServerFailure动作映射到它有效负载,然后显示这个有效负载(我们服务器错误)console.log。

42.6K10

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.4K10

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

后台服务启动成功,下一步就是需要打包我们前端项目部署nginx80端口,我项目前端使用了angular框架,所以需要在全局安装angular-cli脚手架,命令:npm install -g angular-cli...使用angularng命令进行打包,使用ng build命令会生成会将client项目打包生成blog文件夹 ? 出现如图界面,就代表我们client项目被打包blog文件夹了 ?...可以看到,我们client项目下,生成了一个blog文件夹,我们只需要把这个文件夹部署到我们nginx80端口,我们前端部署工作就可以大功告成了。...可以看到我已经把我们前端项目部署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", // 指定站点部署地址,该值最终会赋给webpackoutput.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代码仓库地址,我们只需要将代码提交到这个地址就可以了。

94561

angularjs directive学习心得

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

99610

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

82240

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.7K30

写在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

【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目录并且运行.

52480

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 中,我们宣布“应用程序构建器”是稳定,并默认为新项目启用它。

18710
领券