[英]Angular - bundle error on page reload with route parameter
角度4
我从捆绑包中收到Uncaught SyntaxError: Unexpected token <
错误,但仅在特定情况下:
chart/123
,其中123
是图表ID,而路径是路由器中的chart/:id
。 像/profile
类的东西可以正常工作,因为这不是路由中的参数。 users/add
和organisations/add
等路线,我也收到此错误,因此对于包含多个“零件”的任何路线似乎都出错了... 结果是所有*.bundle.js
请求都返回了index.html
文件,而不是首选的*.js
文件。
有任何想法吗? 让我知道是否需要更多背景信息。
在此先感谢您的帮助。
这是我的server.js:
const express = require('express');
const compression = require('compression');
const morgan = require('morgan');
const path = require('path');
const rfs = require('rotating-file-stream');
const fs = require('fs');
const app = express();
/**
* Logging
*/
/**
* Create a logs directory (in project root)
*/
const logDirectory = path.join(__dirname, './logs');
if (!fs.existsSync(logDirectory)) {
fs.mkdirSync(logDirectory);
}
// Set up rotating file stream, rotate every day
const accessLogStream = rfs('access.log', {
interval: '1d',
path: logDirectory,
});
// winston.info(logDirectory);
app.use(morgan('short', { stream: accessLogStream }));
/**
* /Logging
*/
app.use(compression());
const port = process.env.PORT || 8082;
app.disable('x-powered-by');
app.use(express.static(__dirname + '/dist'));
app.get('*', (req,res) => {
try {
res.sendFile(`${__dirname}/dist/index.html`);
} catch (e) {
res.status(404).send('index not found');
}
});
app.listen(port,'127.0.0.1');
console.log(`listening on 127.0.0.1:${port}`);
这是我的angular-cli.json(大致样板):
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"name": "new-client"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"assets/scss/main.scss"
],
"scripts": [
"../node_modules/chart.js/dist/Chart.min.js",
"../node_modules/moment/min/moment.min.js"
],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"livedata": "environments/environment.livedata.ts",
"production": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"project": "src/tsconfig.app.json"
},
{
"project": "src/tsconfig.spec.json"
},
{
"project": "e2e/tsconfig.e2e.json"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "scss",
"component": {
}
}
}
所以对我来说,问题在于base-href选项相互冲突 。
在我的index.html中,我具有标准的<base href="/">
选项。
然后,在我的构建步骤中,我有以下内容:
ng build --environment=production --base-href . --aot
注意--base-href .
-这似乎已经覆盖了index.html中的/
选项。 我通过从构建脚本中删除--base-href
来解决。 我也可以将其设置为./dist
以消除我认为的冲突。
从用于build
的angular-cli文档中 ,此设置将覆盖index/html
任何选项。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.