那些遇到过的问题

使用Express时Javascript(Angular)无法加载

use*_*464 3 javascript heroku node.js express angularjs

我正在尝试使用node.js,express.js和Heroku(或Modulus.io)将我的应用程序部署到公共域.

一切都在开发环境中正常运行.但是当我尝试将它部署到Heroku或Modulus时,我遇到了PORT和Express的很多问题.现在我正在尝试部署到Heroku.

该项目建立在angular-seed上,我对package.json进行了一些更改,以及服务器如何启动以使其与Heroku一起工作.

现在,本地服务器(localhost:5000)加载一个静态HTML页面(index.html工作正常),但没有任何CSS或Javascript被加载到页面.与Heroku上部署的应用程序相同.

以下是我对package.json所做的更改(来自angular-seed中提供的更改):

...
"scripts": {
  "start": "node web.js",
  ...
"main": "web.js",
...
Run Code Online (Sandbox Code Playgroud)

这是web.js的样子:

var express = require("express");
var logfmt = require("logfmt");
var app = express();

app.use(logfmt.requestLogger());

app.use(express.static(__dirname + '/app'));


app.get('/', function(req, res) {
  //res.send('Hello World!');
  res.sendfile('./app/index.html');
});

var port = Number(process.env.PORT || 5000);
app.listen(port, function() {
  console.log("Listening on " + port);
});
Run Code Online (Sandbox Code Playgroud)

在HTML索引文件中, 

<!doctype html>
<html lang="en" ng-app="myApp">
<head>
  <meta charset="utf-8">
  <title>Title</title>
  <link rel="stylesheet" href="css/app.css"/>
</head>

<body> 
... 
  <script src="../bower_components/angular/angular.js"></script>
  <script src="../bower_components/angular-route/angular-route.js"></script>
  <script src="../bower_components/angular-sanitize/angular-sanitize.js"></script>
  <script src="../bower_components/angular-animate/angular-animate.js"></script>
  <script src="js/app.js"></script>
  <script src="js/services.js"></script>
  <script src="js/controllers.js"></script>
  <script src="js/filters.js"></script>
  <script src="js/directives.js"></script>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

我在命令提示符下使用"foreman start"启动服务器,并使用纯HTML加载本地服务器.我也尝试过使用:

app.configure(function() {
    app.use(express.static(__dirname + '/public')); 
    app.use(express.logger('dev')); 
    app.use(express.bodyParser());  
});
Run Code Online (Sandbox Code Playgroud)

在web.js中,但是当我启动服务器时,我收到一条错误,指出"TypeError:undefined不是一个函数"指向"app.configure"的句点.

控制台中的错误说:

GET http://localhost:5000/bower_components/angular/angular.js 404 (Not Found) localhost/:22
GET http://localhost:5000/bower_components/angular-route/angular-route.js 404 (Not Found) localhost/:23
GET http://localhost:5000/bower_components/angular-sanitize/angular-sanitize.js 404 (Not Found) localhost/:24
GET http://localhost:5000/bower_components/angular-animate/angular-animate.js 404 (Not Found) localhost/:25
Uncaught ReferenceError: angular is not defined 
... etc
Run Code Online (Sandbox Code Playgroud)

我一直在尝试谷歌的解决方案,但其中大部分来自一年前,似乎不再有效.任何帮助表示赞赏.谢谢!

跟进错误:现在我无法将其推送到Heroku.一切都在当地很好.当我尝试将它推送到Heroku时,这是终端输出:

Counting objects: 5, done.
Delta compression using up to 8 threads.
Compressing objects: 100% (3/3), done.
Writing objects: 100% (3/3), 285 bytes | 0 bytes/s, done.
Total 3 (delta 2), reused 0 (delta 0)
To ssh://git@github.com/[...]
   a655423..98d78e4  master -> master
user@ubuntu:~/directory$ git push heroku
warning: push.default is unset; its implicit value is changing in
Git 2.0 from 'matching' to 'simple'. To squelch this message
and maintain the current behavior after the default changes, use:

  git config --global push.default matching

To squelch this message and adopt the new behavior now, use:

  git config --global push.default simple

See 'git help config' and search for 'push.default' for further information.
(the 'simple' mode was introduced in Git 1.7.11. Use the similar mode
'current' instead of 'simple' if you sometimes use older versions of Git)

Fetching repository, done.
Counting objects: 5, done.
Delta compression using up to 8 threads.
Compressing objects: 100% (3/3), done.
Writing objects: 100% (3/3), 285 bytes | 0 bytes/s, done.
Total 3 (delta 2), reused 0 (delta 0)

-----> Node.js app detected

       PRO TIP: Specify a node version in package.json
       See https://devcenter.heroku.com/articles/nodejs-support

-----> Defaulting to latest stable node: 0.10.21
-----> Downloading and installing node
-----> Restoring node_modules directory from cache
-----> Pruning cached dependencies not specified in package.json
-----> Node version changed since last build; rebuilding dependencies

       > ws@0.4.31 install /tmp/build_f31706d9-b302-4cdd-ae3e-cce981c1bf51/node_modules/karma/node_modules/socket.io/node_modules/socket.io-client/node_modules/ws
       > (node-gyp rebuild 2> builderror.log) || (exit 0)

       make: Entering directory `/tmp/build_f31706d9-b302-4cdd-ae3e-cce981c1bf51/node_modules/karma/node_modules/socket.io/node_modules/socket.io-client/node_modules/ws/build'
         CXX(target) Release/obj.target/bufferutil/src/bufferutil.o
         SOLINK_MODULE(target) Release/obj.target/bufferutil.node
         SOLINK_MODULE(target) Release/obj.target/bufferutil.node: Finished
         COPY Release/bufferutil.node
         CXX(target) Release/obj.target/validation/src/validation.o
         SOLINK_MODULE(target) Release/obj.target/validation.node
         SOLINK_MODULE(target) Release/obj.target/validation.node: Finished
         COPY Release/validation.node
       make: Leaving directory `/tmp/build_f31706d9-b302-4cdd-ae3e-cce981c1bf51/node_modules/karma/node_modules/socket.io/node_modules/socket.io-client/node_modules/ws/build'

       > phantomjs@1.9.7-5 install /tmp/build_f31706d9-b302-4cdd-ae3e-cce981c1bf51/node_modules/karma-phantomjs-launcher/node_modules/phantomjs
       > node install.js

       Downloading http://cdn.bitbucket.org/ariya/phantomjs/downloads/phantomjs-1.9.7-linux-x86_64.tar.bz2
       Saving to /tmp/phantomjs/phantomjs-1.9.7-linux-x86_64.tar.bz2
       Receiving...
       Error requesting archive.
       Status: 403
       Request options: {
         "protocol": "http:",
         "slashes": true,
         "auth": null,
         "host": "cdn.bitbucket.org",
         "port": null,
         "hostname": "cdn.bitbucket.org",
         "hash": null,
         "search": null,
         "query": null,
         "pathname": "/ariya/phantomjs/downloads/phantomjs-1.9.7-linux-x86_64.tar.bz2",
         "path": "/ariya/phantomjs/downloads/phantomjs-1.9.7-linux-x86_64.tar.bz2",
         "href": "http://cdn.bitbucket.org/ariya/phantomjs/downloads/phantomjs-1.9.7-linux-x86_64.tar.bz2"
       }
       Response headers: {
         "content-type": "text/html",
         "content-length": "14134",
         "connection": "keep-alive",
         "date": "Sat, 24 May 2014 00:28:20 GMT",
         "last-modified": "Sat, 24 May 2014 00:08:24 GMT",
         "etag": "\"999f4f548bfffe25245dc29e49c57e9c\"",
         "accept-ranges": "bytes",
         "server": "AmazonS3",
         "age": "49096",
         "x-cache": "Hit from cloudfront",
         "via": "1.1 7718496b82dfc64dff52dbb3d7f07f3b.cloudfront.net (CloudFront)",
         "x-amz-cf-id": "kA4IYvDWX-l2HNW8EzztjY9STY96Ns0vsZDWTUaloDmJTnwJakcDIg=="
       }
       Make sure your network and proxy settings are correct.
       npm ERR! weird error 1
       npm ERR! not ok code 0

 !     Push rejected, failed to compile Node.js app
Run Code Online (Sandbox Code Playgroud)

后续错误2:好的,这解决了无法推送到Heroku的问题.所以现在我可以将更改推送到Heroku,但AngularJS和CSS仍未显示在Heroku域上.我检查了域上的控制台,其中说:

GET http://myapp.herokuapp.com/bower_components/angular-sanitize/angular-sanitize.js 404 (Not Found) lit-inlet-8601.herokuapp.com/:24
GET http://myapp.herokuapp.com/bower_components/angular-animate/angular-animate.js 404 (Not Found) lit-inlet-8601.herokuapp.com/:25
Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:modulerr] Failed to instantiate module ngAnimate due to:
Error: [$injector:nomod] Module 'ngAnimate' is not available! You either misspelled the modul...<omitted>...1) angular.js:78
Run Code Online (Sandbox Code Playgroud)

这很奇怪,因为它在本地工作正常.在inspect元素Sources选项卡上,似乎缺少一些目录(即angular-animate和angular-sanitize).我尝试在终端中运行"heroku run bower install angular-sanitize"和"heroku run bower install angular-animate",但它没有解决问题.

"foreman start"和"npm start"都在本地启动服务器,一切都按原样显示.

我的index.html文件位于app_name/app /目录下,web.js位于app_name目录中.我没有更改任何脚本以在index.html文件中加载Angular,因此它仍然如上所列.

我的app.js文件位于app_name/app/js中,应正确列出依赖项:

angular.module('myApp', [
  'ngAnimate',
  'ngSanitize',
  'ngRoute',
  'myApp.filters',
  'myApp.services',
  'myApp.directives',
  'myApp.controllers'
])...
Run Code Online (Sandbox Code Playgroud)

我不确定是什么原因引起的.任何帮助表示赞赏.谢谢!

Pet*_*ons 19

您需要另一个静态目录路由:

app.use(express.static(__dirname + '/app'));
//add this so the browser can GET the bower files
app.use('/bower_components', express.static(__dirname + '/bower_components'));
Run Code Online (Sandbox Code Playgroud)

为了在heroku上进行部署,您需要postinstall在package.json文件中设置一个脚本来运行heroku bower install.

这是一篇描述它的博客文章.

"scripts": {
    "postinstall": "./node_modules/bower/bin/bower install"
}
Run Code Online (Sandbox Code Playgroud)

因为当前bower install没有运行,所以您需要的实际angularjs文件不存在,这会在浏览器控制台中导致这些错误,从而导致ReferenceError无法定义约角度.

GET http://localhost:5000/bower_components/angular/angular.js 404 (Not Found) localhost/:22
GET http://localhost:5000/bower_components/angular-route/angular-route.js 404 (Not Found) localhost/:23
GET http://localhost:5000/bower_components/angular-sanitize/angular-sanitize.js 404 (Not Found) localhost/:24
GET http://localhost:5000/bower_components/angular-animate/angular-animate.js 404 (Not Found) localhost/:25
Uncaught ReferenceError: angular is not defined
Run Code Online (Sandbox Code Playgroud)

一步一步走.首先,确保文件实际上在本地和heroku上正确安装.然后确保它们正确加载到浏览器中.然后确保您的实际JavaScript代码适合您的应用程序.

下一个问题

后续错误2:好的,这解决了无法推送到Heroku的问题.所以现在我可以将更改推送到Heroku,但AngularJS和CSS仍未显示在Heroku域上.我检查了域上的控制台,其中说:

GET http://myapp.herokuapp.com/bower_components/angular-sanitize/angular-sanitize.js 404 (Not Found) lit-inlet-8601.herokuapp.com/:24
GET http://myapp.herokuapp.com/bower_components/angular-animate/angular-animate.js 404 (Not Found) lit-inlet-8601.herokuapp.com/:25
Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:modulerr] Failed to instantiate module ngAnimate due to:
Error: [$injector:nomod] Module 'ngAnimate' is not available! You either misspelled the modul...<omitted>...1) angular.js:78
Run Code Online (Sandbox Code Playgroud)

因此heroku中缺少角度消毒和角度动画,这意味着bower install没有安装它们.验证您是否在bower.json文件中正确引用它们.

  • 答案已更新,更详细地说明了您的错误. (2认同)

归档时间：

查看次数：

12114 次

最近记录：

11 年，11 月 前
相关归档
你如何卸载所有的凉亭包？ 68
如何评估jQuery选择器$('#foo a')？ 44
在Node.js中侦听EADDRNOTAVAIL错误 38
NodeJS Forever包minUptime和spinSleepTime警告 23
如何删除/删除Yeoman Angular中生成的scaffolded路由 16
使用Angular JS中的CKEditor内容更新textarea值 14
关闭JSHint中的循环复杂性 14
angularjs将属性中新创建的数组传递给指令 11
编译失败：在“./src”中找不到文件“./containers/App/App” 7
可以在没有'heroku run console'的情况下在Heroku上运行单个Rails命令吗？ 6
难疑归档
什么是Python中的元类？ 5409
你如何创建一个远程Git分支？ 3030
如何在Git中更改多个提交的作者和提交者名称以及电子邮件？ 2282
.prop()vs .attr() 2249
数据绑定如何在AngularJS中运行？ 1924
使用JavaScript在下拉列表中获取选定的值？ 1660
从Git提交中删除文件 1484
如何让ASP.NET Web API使用Chrome返回JSON而不是XML？ 1220
Objective-C中的typedef枚举是什么？ 1081
如何在Vim中有效地处理多个文件？ 1074