首页 > 解决方案 > 如何修复在浏览器上显示白屏的角度分布

问题描述

我是 Angular 新手,我已经构建了我的第一个测试应用程序。我想看看它是如何工作的。它在 nodejs 中完美运行。在我运行“ng build --prod”之后,dist 文件夹就创建好了。通过遵循在线教程,我制作了一个指向静态 dist/index.html 文件的 nodejs 服务器。

为了解决这个问题,我检查了浏览器控制台的错误并在所有 js 文件中发现了 Uncaught SyntaxError: Unexpected token <。所以我查看了 Chrome 开发工具中的 Application>Frames>top>Scripts 并看到所有 js 文件都包含 html 代码作为 index.html

服务器.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}`);
});

虽然访问本地主机时必须显示 Angular 站点,但我得到一个白页。

标签: node.jsangular

解决方案


修复。对于任何有同样问题的人

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

这行代码实际上导致了问题。在构建了角度项目之后。它保存在 dist/my-app/ 目录中。因此,通过将上面的代码行更改为,

app.use(express.static(path.join(__dirname, 'dist/my-app')));

修复了问题。希望它会帮助某人


推荐阅读