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

已部署在heroku angular 4应用程序中,包含webpack,但站点未启动

已部署在Heroku上的Angular 4应用程序包含Webpack,但站点未启动。在这种情况下,您可以按照以下步骤进行故障排除和解决:

  1. 确认Heroku部署:确保您的应用程序已成功部署到Heroku平台。您可以通过Heroku的控制台或命令行工具来验证部署状态。
  2. 检查日志:查看Heroku应用程序的日志,以了解任何错误或警告信息。您可以使用Heroku命令行工具或Heroku控制台来访问日志。
  3. 检查依赖项:确保您的应用程序的依赖项已正确安装。您可以检查应用程序的package.json文件,并确保所有依赖项都已正确声明。
  4. 检查Webpack配置:确保您的Webpack配置文件正确配置,并且与您的应用程序的目录结构和需求相匹配。您可以检查Webpack配置文件中的入口点、输出路径等设置。
  5. 检查端口设置:确认您的应用程序在Heroku上使用的端口与您的Angular应用程序中的端口设置一致。您可以检查应用程序的启动文件(通常是server.js或app.js)中的端口设置。
  6. 检查启动脚本:确保您的应用程序的启动脚本正确配置,并且能够启动Angular应用程序。您可以检查启动脚本中的命令和参数,以确保它们正确。
  7. 检查网络连接:确保您的应用程序可以访问所需的网络资源。您可以尝试从Heroku应用程序中访问其他网站或API,以验证网络连接是否正常。
  8. 重新部署应用程序:如果您已经检查了以上步骤并且问题仍然存在,您可以尝试重新部署应用程序。有时重新部署可以解决由于配置错误或其他问题导致的启动问题。

对于Angular 4应用程序部署在Heroku上的具体步骤和最佳实践,您可以参考腾讯云的云开发文档中的相关章节:腾讯云云开发文档

请注意,以上答案仅供参考,并且可能需要根据您的具体情况进行调整和修改。

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

相关·内容

JHipster技术简介

WHAT - 技术栈 JHipster是什么 JHipster是一个开发平台,用于生成,开发,部署Spring Boot + Angular/React Web Application和Spring microservices...OSS,ELK堆栈和Docker的强大的微服务架构; 使用Yeoman,Webpack和Maven/Gradle构建应用程序的强大工作流程。...JHipster开发效率 以10个微服务,每个微服务包含1个数据表和4个UI界面(基本CURD界面)的开发规模为例: 工作项 人工开发(人天) JHipster开发(人天) 数据库建表 1 0 项目创建及配置文件编写...2 0 开发CURD代码 5 1 开发前端UI 10 1 合计: 18 2 实际项目中因为定制化工作的需要,开发效率的差距会比这个小,正常情况下减少一半以上的工作量是可以达到的。...前端技术栈 Angular 5和React Bootstrap响应式网页设计 HTML5 国际化 CSS的Sass WebSocket 使用Yarn安装新的JavaScript库 使用Webpack构建

12.7K90
  • 2019-Web开发技术指南和趋势

    构建静态站点 构建UI布局(拿到设计图能够使用HTML/CSS还原) 添加一些交互功能 部署和维护网站 现在能找到最低水平的Web开发工作, 但是这是远远不够的.... 2....学习语言和框架是一回事, 但是安装环境, 测试和部署有事另外一回事 部署 (Linux, SSH, Git, Nginx, Apache) 平台 (Digital Ocean, AWS, Heroku,...设置全栈的开发环境和工作流 构建后端服务API和微服务 数据库操作 能够独立开发应用(前端和服务端) 部署到云端(SSH, Git, Servers等等) 4. 2019技术趋势和其他 4.1原生应用开发...变量, 函数等类型 类 其他ES6的特性 Angular中被使用到, 同时也可以React和Vue中被使用 4.5 无服务架构 ?...机器学习可以允许Web应用程序随时间进行调整 虽然AI还有很长的路要走, 但是我们会看到它会更多的用在web 虽然目前绝大多数都是Python写的, 但也有Tensorflow.js和Brain.js

    3.4K20

    2019-Web开发技术指南和趋势

    构建静态站点 构建UI布局(拿到设计图能够使用HTML/CSS还原) 添加一些交互功能 部署和维护网站 现在能找到最低水平的Web开发工作, 但是这是远远不够的.... 2....学习语言和框架是一回事, 但是安装环境, 测试和部署有事另外一回事 部署 (Linux, SSH, Git, Nginx, Apache) 平台 (Digital Ocean, AWS, Heroku,...设置全栈的开发环境和工作流 构建后端服务API和微服务 数据库操作 能够独立开发应用(前端和服务端) 部署到云端(SSH, Git, Servers等等) 4. 2019技术趋势和其他 4.1原生应用开发...变量, 函数等类型 类 其他ES6的特性 Angular中被使用到, 同时也可以React和Vue中被使用 4.5 无服务架构 ?...机器学习可以允许Web应用程序随时间进行调整 虽然AI还有很长的路要走, 但是我们会看到它会更多的用在web 虽然目前绝大多数都是Python写的, 但也有Tensorflow.js和Brain.js

    3.3K20

    关于“Python”的核心知识点整理大全65

    注意 删除Heroku上的项目对本地项目没有任何影响。如果没有人使用你部署的项目,就尽管 去练习部署过程好了,Heroku删除项目再重新部署完全合情合理。...20.3 小结 本章,你学习了如何使用Bootstrap库和应用程序django-bootstrap3赋予应用程序简单而专 业的外观。...A.2 OS X 系统安装 Python 大多数OS X系统都安装了Python,你可能想使用非默认版本。如果是这样,请首先确定 安装了哪个版本的Python。...A.3 Windows 系统安装 Python Windows系统默认安装Python,但有必要检查系统是否安装了它。...A.4 Python 关键字和内置函数 Python包含一系列关键字和内置函数,给变量命名时,知道这些关键字和内置函数很重要。

    11810

    2020前端性能优化清单(三)

    tree-shaking[9] 是一种清理构建产物的方法,它让构建结果只包含在生产中实际使用的代码,并消除 Webpack 使用的引入。...处理单页面应用程序时,我们需要一些时间来初始化应用程序,然后才能渲染页面。这些设置需要你自己的解决方案,你可以注意模块选择和使用一些技术以加快初始呈现时间。...例如,如何调试 React 性能[23]和消除常见 React 性能问题的方法[24],还有改善 Angular 性能的方法[25]。通常,大多数性能问题来自启动应用程序的初始化时间。...31 识别并删除使用的 CSS / JS。 Chrome 的 CSS 和 JavaScript 代码覆盖率工具[62]可以使你了解哪些代码执行或应用,哪些执行。...你可以将该技术集成到你的 Next.js 应用程序[93],Angular 和 React [94],并且有一个Webpack 插件[95]可以自动执行设置过程。

    2.2K20

    2020前端性能优化清单(三)

    tree-shaking[9] 是一种清理构建产物的方法,它让构建结果只包含在生产中实际使用的代码,并消除 Webpack 使用的引入。...处理单页面应用程序时,我们需要一些时间来初始化应用程序,然后才能渲染页面。这些设置需要你自己的解决方案,你可以注意模块选择和使用一些技术以加快初始呈现时间。...例如,如何调试 React 性能[23]和消除常见 React 性能问题的方法[24],还有改善 Angular 性能的方法[25]。通常,大多数性能问题来自启动应用程序的初始化时间。...31 识别并删除使用的 CSS / JS。 Chrome 的 CSS 和 JavaScript 代码覆盖率工具[62]可以使你了解哪些代码执行或应用,哪些执行。...你可以将该技术集成到你的 Next.js 应用程序[93],Angular 和 React [94],并且有一个Webpack 插件[95]可以自动执行设置过程。

    2.1K10

    【腾讯云的1001种玩法】centos 7 部署 dotnetcore + Angular2 实践

    服务器: 腾讯云主机(Centos 7.1) 项目:aspnetcore+angular2 开源项目模版 该项目使用webpack 打包Angular2, 内网涉及到npm请使用tnpm 环境安装 1....选择高级模版 取消npm 安装 使用 tnpm 3.编译项目 编译dotnet ,编译angular2 dotnet 程序集restore,webpack 打包Angular2 ,本地运行项目 有兴趣的同学可以多了解快命令具体做了啥...4.本地访问 http://localhost:3000/ 部署项目 1.执行发布脚本 dotnet publish 该命令会执行project.json 的构建命令 "scripts": {...3.上传项目 使用ftp工具上传只centos (我使用的xshell+xftp) 解压文件: unzip test.zip 4.启动项目 set ASPNETCORE_ENVIRONMENT=Development..., 直接访问80端口就好了 其他 该项目目前只是用于学习dotnetcore ,Angular2 , 顺便熟悉一下 npm,webpack,linux。

    5.9K10

    10 分钟内实现安全的 React + Docker

    假如你已经构建了一个 React 应用,但是现在需要部署它。应该怎么做?首先,最好选择一个云提供商,因为它们一般成本低而且部署容易。 大多数云提供商都提供了一种部署静态站点的方法。...你可以使用它打包你的应用程序,并包含多种开源 Web 服务器来为你的应用程序提供服务。另外,你还可以通过配置网络服务器来发送安全标头,这样使你的程序更安全。...将客户端 ID 复制并粘贴到应用程序的 src/App.js 。 的值可以 Okta 仪表板的 API > Authorization Servers 下找到。...使用以下方法浏览器打开你的应用程序heroku open 你将会被重定向到 Okta,可能会看到以下错误: The 'redirect_uri' parameter must be an absolute...在下面的示例,我正在使用 react-docker,你也可以使用 react-pack 来部署 buildpacks 版本。

    20K30

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

    renderModuleFactory 函数接受一个模板 HTML 页面(通常是 index.html)、一个包含组件的 Angular 模块和一个用于决定该显示哪些组件的路由作为输入。...如果页面加载超过了三秒,那么 53% 的移动网站会被放弃。 你的应用需要启动的更快一点,以便在用户决定做别的事情之前吸引他们的注意力。...)添加到服务端渲染页面的样式名,以便它们客户端应用启动时可以被找到并移除。...,并启动一个Node Express来为应用程序提供服务 http://localhost:4000 dist目录: ?...执行npm run prerender - 编译应用程序并预渲染应用程序文件,启动一个演示http服务器,以便您可以查看它 http://localhost:8080 注意: 要将静态网站部署到静态托管平台

    4.8K100

    Vue学习路线图

    响应式编程在前端开发得到了大量的应用,大多数前端MVX框架都可以看到它的影子。相比较于Angular.js和React.js而言,Vue.js并没有引入太多的新概念,只是对已有的概念进行了精简。...并且,Vue的渲染层基于轻量级的virtual-DOM实现,大多数的场景下初始化速度和内存消耗都提高2-4倍。...Vue 团队维护了一个叫作 Vue CLI 的工具,让你可以几分钟内启动一个强大的 Vue 开发环境。 全栈应用程序 实际开发,真实的 Vue 应用程序通常是由数据来驱动用户界面渲染的。...优化 当你将应用程序部署到远程服务器并且用户通过慢连接访问它时,它与你开发环境测试的速度和效率是不一样的。...很多开发人员觉得 Webpack 难以掌握,配置起来也很麻烦,如果没有它,将无法使用 Vue 的一些有用的功能(如单文件组件)。

    5.7K20

    部署一个Sinatra应用程序Heroku

    Heroku是一个云应用程序平台,专门用于解决服务器管理问题。您只需构建您的应用程序,通过Git将其推送到Heroku,然后放松一下。那么当提到部署一个Sinatra应用程序呢?...如果你学过来自PHP的Sinatra,我写了一篇 Rubysource 的文章,向你展示如何用Sinatra创建一个博客应用程序。 您需要在Heroku有一个(免费)帐户。...假设您对本地应用程序感到满意,接下来要做的是确保您有一些文件: Gemfile config.ru 我在上面的帖子描述的Gemfile包含应用程序中使用的所有Ruby gems的引用: gem 'sinatra...我将在稍后的帖子讨论这些。记下生产和发展群组。Heroku并不支持Sqlite。 Sinatra是一个Rack应用程序Heroku与这些没有任何障碍。...我们只需要一个文件来解释我们如何让我们的应用程序运行: config.ru你需要以下内容: require '.

    2.7K60

    Vue.js 首次屈居第二,JavaScript 2020 年度“新起之秀”都有谁?谁是第一呢?

    由此,Best Of JS 通过比对 12 个月来 GitHub 上新增的 Star 数,来查看当年哪些项目受到更多关注。目前,最新 2020 年的榜单出炉,看看都有哪些“新起之秀”吧! ?...通过减少客户端包大小和缩短启动时间,React Server Components 将改变构建 React 应用程序的方式。此外,它们将简化数据获取和对数据源(如数据库和文件系统)的访问。...Scully 是一个静态站点生成器,该项目于 2019 年 12 月启动,它将 Angular 带入 Jamstack。...Angular 2020 年发布了三个主要版本:Angular 9、Angular 10 和 Angular 11。...Webpack 通常被描述得过于复杂,而诸如 Parcel 和 Rollup 之类的简单替代品已经成熟。 Webpack 仍是实用的构建工具,其新缓存层可显著提高构建性能。

    2.2K20

    关于“Python”的核心知识点整理大全64

    20.2.15 确保项目的安全 当前,我们部署的项目存在一个严重的安全问题:settings.py包含设置DEBUG=True,它在发生错误时显示调试信息。...下面来修改settings.py,以让我们能够本地看到错误消息,部署到服务器后不显示任何 错误消息: settings.py --snip-- # Heroku设置 if os.getcwd...2处显示的状态表明我们仓库的分支master上工作,当前没有任何提交的修改。推送到Heroku之前,必须检查状态并看到刚才所说的消息。...(settings.py 中用于Heroku部署的部分,确保DEBUG依然被设置为False)。...然后访问在线项目,确认 你期望看到的修改生效。 在这个过程很容易犯错,因此看到错误时不要大惊小怪。如果代码不能正确地工作,请重 新审视所做的工作,尝试找出其中的错误。

    9810

    关于“Python”的核心知识点整理大全62

    注意 Windows系统,有些必不可少的包可能无法安装,因此如果在你尝试安装有些这样 的包时出现错误消息,也不用担心。重要的是让Heroku部署安装这些包,下一节就 将这样做。...我们部署 “学习笔记”时,Heroku将安装requirements.txt列出的所有包,从而创建一个环境,其中包含我们 本地使用的所有包。...Heroku部署,这个目录总是/app。本地部署,这个目录通常是项目文件夹的名称(就我 们的项目而言,为learning_log)。...为此, 活动的虚拟环境,执行命令heroku local以启动Procfile指定的进程: (ll_env)learning_log$ heroku local Installing Heroku...这不会影响你将项目部署Heroku。.

    15710

    「微前端架构」微前端-Angular风格-第2部分

    从功能模块转移到迷你应用程序 角功能模块以及Webpack捆绑销售给我们我们需要的代码分离,这是不够的,因为Webpack只允许我们创建包作为一个构建过程的一部分,我们希望能够产生一个单独的JS包,这是建立不同的时间...: 'umd' }, 在这个例子,我们告诉Webpackangular和lodash捆绑到应用程序A,并在“容器-应用程序”命名空间下公开它。...应用程序B,我们定义angular和lodash不会绑定在一起,而是由命名空间“container-app”指向它们。...部署和服务 为了为每个应用程序提供自己的部署,我们为每个应用程序创建了一个节点服务,每当一个团队创建一个新的应用程序部署时,都会创建一个封装应用程序的js包,每个服务都会公开一个端点,该端点返回到包的路径...在运行时,当一个小型应用程序加载到容器应用程序时,将调用端点并将js文件加载到应用程序并引导到主应用程序。这样,每个应用程序都可以单独构建部署

    4.9K20

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

    完整命令:ng new my-app --style less 第三步:启动开发服务器 Angular 包含一个开发服务器,以便你能轻易地本地构建应用和启动开发服务器。... src/ 文件夹里面,app/ 文件夹包含此项目的逻辑和数据。Angular 组件、模板和样式也都在这里。...使用--extra-webpack-config指向部分Webpack配置的开关启动应用程序: ng serve --extra-webpack-config webpack.partial.js -o...三、使用webpack把第三方库模块分离 - optimization + splitChunks webpack4.x ,我们使用 optimization.splitChunks 来分离公用的代码块...这对于文件名包含每次会随着编译而发生变化哈希的 webpack bundle 尤其有用。 你可以让插件为你生成一个HTML文件,这个插件有两个重要作用。

    5K20

    Heroku上一键部署Cloudreve网盘程序

    with Heroku Redis + Heroku Postgres(需要验证的Heroku账户) 当前版本使用Heroku Postgres可能无法成功部署。...#960 Cloudreve的Docker版本,内置Heroku Redis与Heroku Postgres,可自定义插件配置(可能包含付费内容) 一键部署Heroku上: image.png 关于...:hobby-dev", "logdna:quaco" ], 账户信息-请及时修改 部署完成应用日志或LogDNA查看默认的账户密码 Cloudreve-Heroku with Redis +...Jawsdb Mysql(需要验证的Heroku账户) Cloudreve with redis的Docker版本,内置Heroku Redis与Jawsdb Mysql 默认数据库空间为5MB 一键部署..."heroku-redis:hobby-dev", "logdna:quaco" ], 账户信息-请及时修改 部署完成应用日志或LogDNA查看默认的账户密码 app[web] info

    3.5K10
    领券