[英]How to Fix Angular Distribution Built Showing a white Screen on Browser
I am new to angular and i have built my first test app. 我是Angle的新手,我已经建立了我的第一个测试应用程序。 I want to take a look at how it works and all.
我想看看它是如何工作的。 It works perfectly in nodejs.
它在nodejs中完美地工作。 After i run the 'ng build --prod', dist folder is made.
在我运行'ng build --prod'之后,制作了dist文件夹。 By following an online tutorial i made a nodejs server which directs to the static dist/index.html file.
通过遵循在线教程,我制作了一个指向静态dist / index.html文件的nodejs服务器。
To Fix this I checked the browser console for error and found Uncaught SyntaxError: Unexpected token < in all of the js files. 为了解决这个问题,我检查了浏览器控制台中的错误,并在所有js文件中发现了Uncaught SyntaxError:Unexpected token <。 So i looked at the Application>Frames>top>Scripts in Chrome Dev tools and saw that all js file contains html code as index.html in them
所以我查看了Chrome Dev工具中的Application> Frames> top> Scripts,发现所有js文件中的HTML代码都为index.html
server.js server.js
const express = require('express');
const path = require('path');
const app = express();
const admin = require('./server/routes/admin');
app.use(express.static(path.join(__dirname, 'dist')));
app.use('/admin', admin);
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'dist/index.html'));
});
const port = process.env.port || 4600;
app.listen(port, (req, res)=>{
console.log(`Server ONLINE at ${port}`);
});
Though the Angular site must be shown when the localhost is visited, i get a white page. 虽然访问本地主机时必须显示Angular站点,但我得到了一个白页。
Fixed it. 修复。 For anyone who have the same problem
对于有相同问题的任何人
app.use(express.static(path.join(__dirname, 'dist')));
this line code actually caused the problem. 此行代码实际上引起了问题。 After building the angular project.
建立角项目后。 It was save in dist/my-app/ directory.
它保存在dist / my-app /目录中。 So by changing above line of code to,
因此,通过将上述代码行更改为
app.use(express.static(path.join(__dirname, 'dist/my-app')));
Fixed the problem. 解决了问题。 Hope it will help someone
希望对别人有帮助
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.