Node/Express中的路由和已部署的Angular无法正常工作 [英] Routes in Node/Express and deployed Angular not working

问题描述

由Node with Express提供服务时，已部署的Angular应用程序上的路由不起作用.我知道这已经被问过了，但是我可能缺少一些东西，这使我发疯.

Routes on a deployed Angular app do not work when served by Node with Express. I know this has been asked before but there is something I am probably missing that is driving me crazy.

运行节点的"express"文件夹中的文件结构大致如下:

File structure in the "express" folder where Node runs is roughly the following:

express
├── controller.js
├── index.js
├── ngForm 
│   ...see below...
├── node_modules
│   ...
├── package.json
├── public
│   ├── file.json
│   └── rubric.html
├── router.js
├── ssl
    ├── cert.pem
    └── key.pem

Angular项目在ngForm中:

and the Angular project is in ngForm:

ngForm 
├── angular.json
├── dist
│  └── rubric
│       ├── assets
│       ├── favicon.ico
│       ├── index.html
│       ├── main.js
│       ├── main.js.map
│       ├── polyfills.js
│       ├── polyfills.js.map
│       ├── runtime.js
│       ├── runtime.js.map
│       ├── styles.js
│       ├── styles.js.map
│       ├── vendor.js
│       └── vendor.js.map
├── e2e
├── node_modules
├── package.json
├── src
├── tsconfig.json
└── tslint.json

一些相关的Angular代码:

Some relevant Angular code:

app.module.ts:

app.module.ts:

const appRoutes: Routes = [
  {path: '', redirectTo: '/rubric', pathMatch: 'full' }, 
  {path: 'rubric', component: RubricComponent},
  {path: 'rubricbuilder', component: RubricbuilderComponent},
  {path: '**', component: PageNotFoundComponent}
]

app.component.ts:

app.component.ts:

@Component({
  selector: 'app-root',
  styleUrls: ['app.component.scss'],
  template: `<router-outlet></router-outlet>`
})

相关的Node.js代码:

The relevant Node.js code:

server.js:

server.js:

app.use(express.static("ngForm/dist/rubric"));
app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'ngForm/dist/rubric/index.html'));
});

我确实从ngForm的Angular项目中运行ng build，并且输出在ngForm/dist中.

I did run ng build from the Angular project in ngForm, and the output is in ngForm/dist.

在AngularProject中运行 ng serve 时，我可以导航到 https://localhost:4200/rubric 和

When running ng serve in the AngularProject I can navigate to https://localhost:4200/rubric and https://localhost:4200/rubricbuilder .

我只能从Node转到 https://localhost:8000/，它将URL重定向/更改为 https://localhost:8000/rubric ，但是我无法启动 https://localhost:8000/rubricbuilder .通过查看有角度的路线并重新运行构建，我可以在/路线上进行快速显示rubricbuilder，它将URL更改为

From Node I can only get to https://localhost:8000/ which redirects/changes the url to https://localhost:8000/rubric , but I cannot launch https://localhost:8000/rubric itself or https://localhost:8000/rubricbuilder. By poking around with the angular routes and re-running the build, I can make express show rubricbuilder on the / route, which changes the url to https://localhost:8000/rubricbuilder. What am I missing?

推荐答案

我对angular不太熟悉，但是这个问题与

I'm not that familiar with angular but this question is related to VueRouter.

因为您没有在快速中间件中定义/rubric 路由器，所以您可能会收到类似 404 NOT FOUND 的错误.

Because you did not define /rubric router in express middleware so you might get an error like 404 NOT FOUND.

在HTML5历史记录模式下使用SPA路由器时，您需要为服务器进行其他配置，

When using SPA router in HTML5 history mode, you need extra configurations for your server,

例如，在每条路线上发送您的SPA:

for example, send your SPA at every route:

app.use(express.static("ngForm/dist/rubric"));
app.use((req, res) => {
  res.sendFile(path.join(__dirname, 'ngForm/dist/rubric/index.html'));
});

这可能不是表达的最佳实践，您可以搜索其他解决方案，例如VueRouter建议使用使用express的connect-history-api-fallback .

This might not be the best practice for express, you can search for other solutions, for example like VueRouter suggest using connect-history-api-fallback with express.

这篇关于Node/Express中的路由和已部署的Angular无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！