无法通过express/heroku查看Angular应用? [英] Not able to view Angular app via express/heroku?
问题描述
我相对较新，但是我只有一个页面Angular应用程序，我打算在此处将其部署到Heroku:
I'm relatively new to express, but I have a single page Angular application that I'm trying to deploy to Heroku here:
https://jabooda-heroku.herokuapp.com/
不幸的是，它显示为空白屏幕.当我在端口8000上运行server.js文件时，它也会执行此操作(尽管我相信如果可以在此实例中对其进行修复，那么它也将在Heroku中进行修复).但是，当我在终端中运行"ng serve -open"并在端口4200上查看时，我可以看到一切正常.我确信我的server.js文件存在问题，可以解决路由问题，但这是所有相关文件:
Unfortunately, it shows up as a blank screen. It does this also when I run my server.js file on port 8000 (though I believe if I can fix it in this instance, it'll fix in Heroku as well). However, when I run 'ng serve -open' in my terminal and view on port 4200, I'm able to see everything just fine. I'm convinced there is an issue with my server.js file which takes care of the routing, but here are all relevant files:
server.js
const express = require('express');
const app = express();
const path = require('path');
const port = process.env.PORT || 8000;
const server = require('http').Server(app);
app.use(express.static(__dirname + '/src'));
server.listen(port, function() {
console.log("App running on port " + port);
})
// PathLocationStrategy
app.get('/*', function(req, res) {
res.sendFile(path.join(__dirname + '/src/index.html'));
})
我的index.html文件(负责路由)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Jabooda</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<app-root></app-root>
</body>
</html>
我在查找时看到的一种解决方案是将HashLocationStrategy和LocationStrategy导入到我的app.module.ts文件中(下面的代码片段):
One solution I've seen upon looking this up is to import HashLocationStrategy and LocationStrategy in to my app.module.ts file (snippet below):
app.module.ts
import { HashLocationStrategy, LocationStrategy } from '@angular/common';
providers: [
ProjectService,
CareerService,
{ provide: LocationStrategy, useClass: HashLocationStrategy }
],
下面的两个文件(它们在同一个目录中)会处理路由，但这没有用，这就是为什么我现在很困惑:
And the routing gets taken care of in the below two files (they are in the same directory), but this did not work, which is why I'm confused now:
routes.ts
import { Routes } from '@angular/router';
import { HomeComponent } from '../home/home.component';
import { AboutComponent } from '../about/about.component';
import { ProjectsComponent } from '../projects/projects.component';
import { ProjectdetailComponent } from '../projectdetail/projectdetail.component';
import { ProjectDialogComponent } from '../project-dialog/project-dialog.component';
import { SubcontractingComponent } from '../subcontracting/subcontracting.component';
import { CareersComponent } from '../careers/careers.component';
import { ContactusComponent } from '../contactus/contactus.component';
export const routes: Routes = [
{ path: 'home', component: HomeComponent },
{ path: 'about', component: AboutComponent },
{ path: 'projects', component: ProjectsComponent },
{ path: 'projectdetail/:id', component: ProjectdetailComponent },
{ path: 'project/:id', component: ProjectDialogComponent },
{ path: 'subcontracting', component: SubcontractingComponent },
{ path: 'careers', component: CareersComponent },
{ path: 'contactus', component: ContactusComponent },
{ path: '', redirectTo: '/home', pathMatch: 'full' }
];
app-routing.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { routes } from './routes';
@NgModule({
imports: [
CommonModule,
RouterModule.forRoot(routes)
],
exports: [ RouterModule ],
declarations: []
})
export class AppRoutingModule { }
我将如何去做?我最初的方法是将HashLocationStrategy和LocationStrategy提供程序添加到我的模块文件中，但这种方法似乎不起作用，我认为服务器必须能够使我当前的路由工作，但我不确定该如何处理.感谢您的帮助！
How would I go about doing this? My initial approach by adding the HashLocationStrategy and LocationStrategy providers in to my module file doesn't seem to be working, and I think the server has to be able to make my current routing work but I'm not sure how to approach. Any help is appreciated!
推荐答案
您不应尝试呈现src内容.您是否在本地服务器上尝试过并且可以正常工作?我一直做的是创建一个构建并使用该构建来渲染我的渲染.您的server.js应该看起来像这样
You should not try to render the src content. Did you try on your local server and it works ? What I always do is that I make a build and use that build to render my render. Your server.js should look like this
const express = require('express');
const app = express();
const path = require('path');
const port = process.env.PORT || 8000;
const server = require('http').Server(app);
app.use(express.static(__dirname, 'dist', {index: false}));
server.listen(port, function() {
console.log("App running on port " + port);
})
// PathLocationStrategy
app.get('', function(req, res) {
res.sendFile(path.join(__dirname, 'src', 'index.html'));
});
app.get('/', function(req, res) {
res.sendFile(path.join(__dirname, 'src', 'index.html'));
});
在这里构建应用程序是我经常用来获得更好的性能
To build the app here is what I often use to have a better performance
ng build --target production --build-optimizer --vendor-chunk --prod --named-chunks false --sourcemaps false --output-hashing all
我建议您阅读这篇文章，以进一步了解构建选项 https://github.com/angular/angular-cli/wiki/build
I would recommend you read this post for more understanding of the build options https://github.com/angular/angular-cli/wiki/build
这篇关于无法通过express/heroku查看Angular应用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
