node.js - Angular 无法使用直接 url 打开页面,在 Node.js Express 服务器上运行
问题描述
我有一个 Angular 9 应用程序,它在 Node.js 服务器上运行。从 IntelliJ 在本地运行时,路由工作正常。我可以通过更改 url 直接转到任何页面,例如:
mywebsite.com/page
但是,如果我部署应用程序,路由会刹车。如果我打开网站
mywebsite.com
如果我使用网站上的菜单,我可以访问所有页面,但如果我直接访问任何 url,例如
mywebsite.com/page
我明白了
Cannot GET /page
为什么加载不出来?
更新:
角.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"uj-kezdolap-frontend": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": true,
"assets": ["src/favicon.ico", "src/assets"],
"styles": ["./node_modules/@angular/material/prebuilt-themes/pink-bluegrey.css", "src/styles.scss"],
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"baseHref": "/",
"deployUrl": "/",
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "uj-kezdolap-frontend:build"
},
"configurations": {
"production": {
"browserTarget": "uj-kezdolap-frontend:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "uj-kezdolap-frontend:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": ["src/favicon.ico", "src/assets"],
"styles": ["./node_modules/@angular/material/prebuilt-themes/pink-bluegrey.css", "src/styles.scss"],
"scripts": []
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": ["tsconfig.app.json", "tsconfig.spec.json", "e2e/tsconfig.json"],
"exclude": ["**/node_modules/**"]
}
},
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "uj-kezdolap-frontend:serve"
},
"configurations": {
"production": {
"devServerTarget": "uj-kezdolap-frontend:serve:production"
}
}
}
}
}
},
"defaultProject": "uj-kezdolap-frontend",
"cli": {
"analytics": false
}
}
tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"module": "esnext",
"moduleResolution": "node",
"importHelpers": true,
"target": "es5",
"lib": ["es2018", "dom"]
},
"angularCompilerOptions": {
"fullTemplateTypeCheck": true,
"strictInjectionParameters": true
}
}
应用程序.js
'use strict';
const express = require('express');
const app = express();
const bodyParser = require('body-parser`enter code here`');
const isReachable = require('is-reachable');
const https = require('https');
const querystring = require('querystring');
app.set('trust proxy', 'loopback');
app.use(
bodyParser.json({
limit: '50mb',
})
);
app.use(
bodyParser.urlencoded({
extended: false,
})
);
app.use((req, res, next) => {
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, DELETE');
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type,X-Auth-Token,X-Language');
res.setHeader('Access-Control-Allow-Credentials', true);
next();
});
app.use(express.static(__dirname + '/public'));
/**
* Some irrelevant logic here, that I did not copy
*/
const server = app.listen(8080, () => {
const host = server.address().address;
const port = server.address().port;
console.log('Listening at http://%s:%s', host, port);
});
该应用程序在 Docker 容器中运行
Dockerfile
FROM node:lts-alpine
WORKDIR /app
COPY node_modules node_modules/
COPY app.js ./
COPY dist/ public/
EXPOSE 8080
CMD ["node", "app.js"]
解决方案
好的,所以我想通了。
我需要使用以下代码行更新我的 app.js:
const path = require('path');
/**
* All other logic
*/
app.use('*', function (req, res) {
res.sendFile(path.join(__dirname, 'public/index.html'));
});
而且您需要将 public/index.html 替换为您从 app.js 到 index.html 的任何路径
推荐阅读
- c++ - 如何在 C++ 中使用 wininet 创建 POST 请求
- android - Android Studio 3.5 错误 - 安装失败,原因是:''pm install-create -r -t -S 1461173'
- jquery - 尝试将文件从一个 Web 上传到 API 时出错
- rust - 更改其他线程中的值并断言后者(在“主”线程中)
- python - 如何将我的代码转换为列表表达式
- function - 本例中如何正确使用self打印字符串
- node.js - 根据使用 Typescript 的目标导入库
- sql - 根据列值出现从结果集中消除行
- python - 我可以用方法定义指定类命名空间吗
- python - 检测单词然后发送消息 (discord.py)