Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/407.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 网页包生成,我的服务器提供空白页,没有错误。我做错了什么?_Javascript_Angularjs_Node.js_Webpack - Fatal编程技术网

Javascript 网页包生成,我的服务器提供空白页,没有错误。我做错了什么?

Javascript 网页包生成,我的服务器提供空白页,没有错误。我做错了什么?,javascript,angularjs,node.js,webpack,Javascript,Angularjs,Node.js,Webpack,这是我当前的配置和文件结构。它成功地构建了。我的浏览器控制台中没有错误。只是一张空白页。我为dist文件夹服务。我通过npm安装了所有依赖项。我有一个初始错误-角度没有定义-但我通过安装角度模块解决了这个问题。至少,它告诉我服务器确实在为dist文件夹服务 my dist文件夹中的html文件 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Li

这是我当前的配置和文件结构。它成功地构建了。我的浏览器控制台中没有错误。只是一张空白页。我为dist文件夹服务。我通过npm安装了所有依赖项。我有一个初始错误-角度没有定义-但我通过安装角度模块解决了这个问题。至少,它告诉我服务器确实在为dist文件夹服务

my dist文件夹中的html文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Lightbox</title>
  </head>
  <body>
  <script type="text/javascript" src="bundle.js"></script></body>
</html>
还有我的package.json

{
  "name": "",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node node_modules/.bin/webpack-dev-server --content-base dist"
  },
  "repository": {
    "type": "git",
    "url": ""
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": ""
  },
  "homepage": "",
  "dependencies": {
    "angular": "^1.6.4",
    "angular-route": "^1.6.4",
    "angular-utils-pagination": "^0.11.1",
    "css-loader": "^0.28.0",
    "express": "^4.15.2",
    "html-webpack-plugin": "^2.28.0",
    "node-sass": "^4.5.2",
    "sass-loader": "^6.0.3",
    "style-loader": "^0.16.1",
    "url-loader": "^0.5.8",
    "webpack": "^2.4.1"
  },
  "devDependencies": {
    "eslint": "^3.19.0",
    "eslint-config-airbnb": "^14.1.0",
    "webpack": "^2.4.1",
    "webpack-dev-server": "^2.4.5"
  }
}
我的服务器

const express = require('express');
const path = require('path')
const app = express();
const port = 8080;

app.listen(port)
app.use(express.static(path.join(__dirname, '../dist')));

通过将ng app指令添加到索引HTML文件模板,确保正确引导Angular应用程序,如官方HtmlWebpackPlugin文档中所述:


这是一个角度应用程序,安装点在哪里,或者,如何引导应用程序?如果不注意这一点,页面总是空白的,因为您没有将模块附加到DOM元素。这一点很好。在编译之前,我把它放在客户机文件夹中。我使用HtmlWebpackPlugin在每次构建之后重新生成html。你知道有什么方法可以将ng view&ng app指令转换成html吗?我会在这里查看HtmlWebpackPlugin的模板文档:,主文档还解释了如何添加自定义模板:谢谢,这解决了这个问题。得到不同的错误,但不同的错误是好的。如果你想回答,我会核对你的回答。
const express = require('express');
const path = require('path')
const app = express();
const port = 8080;

app.listen(port)
app.use(express.static(path.join(__dirname, '../dist')));