javascript - 错误:ENOENT:没有这样的文件或目录,打开 'dist\browser\index.html'
问题描述
每当我运行ng deploy --preview
时,我都会收到错误消息:
Error: ENOENT: no such file or directory, open 'dist\index.html'
at Object.openSync (fs.js:457:3)
at readFileSync (fs.js:359:35)
我已经尝试在网上遵循多个教程,但无法解决错误。我尝试访问dist/browser/index.html
但没有成功。
服务器.ts
(global as any).WebSocket = require('ws');
(global as any).XMLHttpRequest = require('xhr2');
import 'zone.js/dist/zone-node';
import { ngExpressEngine } from '@nguniversal/express-engine';
import * as express from 'express';
import { join } from 'path';
import { AppServerModule } from './src/main.server';
import { APP_BASE_HREF } from '@angular/common';
import { existsSync, readFileSync } from 'fs';
const path = require('path');
const domino = require('domino');
const template = readFileSync(path.join('.', 'dist', 'index.html')).toString();
const win = domino.createWindow(template);
global['window'] = win;
global['document'] = win.document;
// The Express app is exported so that it can be used by serverless Functions.
export function app(): express.Express {
const server = express();
const distFolder = join(process.cwd(), 'dist/iquench-website/browser');
const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';
// Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
server.engine('html', ngExpressEngine({
bootstrap: AppServerModule,
}));
server.set('view engine', 'html');
server.set('views', distFolder);
// Example Express Rest API endpoints
// server.get('/api/**', (req, res) => { });
// Serve static files from /browser
server.get('*.*', express.static(distFolder, {
maxAge: '1y'
}));
// All regular routes use the Universal engine
server.get('*', (req, res) => {
res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
// res.render(indexHtml, { req, res });
});
return server;
}
function run(): void {
const port = process.env.PORT || 4000;
// Start up the Node server
const server = app();
server.listen(port, () => {
console.log(`Node Express server listening on http://localhost:${port}`);
});
}
// Webpack will replace 'require' with '__webpack_require__'
// '__non_webpack_require__' is a proxy to Node 'require'
// The below code is to ensure that the server is run only when not requiring the bundle.
declare const __non_webpack_require__: NodeRequire;
const mainModule = __non_webpack_require__.main;
const moduleFilename = mainModule && mainModule.filename || '';
if (moduleFilename === __filename || moduleFilename.includes('iisnode')) {
run();
}
export * from './src/main.server';
角.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"iquench-website": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
},
"@schematics/angular:application": {
"strict": true
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/browser",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": true,
"assets": [
"src/favicon.ico",
"src/assets",
"src/manifest.webmanifest"
],
"styles": [
"src/styles/styles.scss",
"src/styles/variables.scss",
"src/styles/theme.scss",
"src/styles/form-styles.scss"
],
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "4kb"
}
],
"serviceWorker": true,
"ngswConfigPath": "ngsw-config.json"
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "iquench-website:build"
},
"configurations": {
"production": {
"browserTarget": "iquench-website:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "iquench-website: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",
"src/manifest.webmanifest"
],
"styles": [
"src/styles.scss"
],
"scripts": []
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"tsconfig.app.json",
"tsconfig.spec.json",
"e2e/tsconfig.json",
"tsconfig.server.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "iquench-website:serve"
},
"configurations": {
"production": {
"devServerTarget": "iquench-website:serve:production"
}
}
},
"deploy": {
"builder": "@angular/fire:deploy",
"options": {
"ssr": true
}
},
"server": {
"builder": "@angular-devkit/build-angular:server",
"options": {
"outputPath": "dist/server",
"main": "server.ts",
"tsConfig": "tsconfig.server.json",
"externalDependencies": [
"firebase",
"@firebase/app",
"@firebase/analytics",
"@firebase/auth",
"@firebase/component",
"@firebase/database",
"@firebase/firestore",
"@firebase/functions",
"@firebase/installations",
"@firebase/messaging",
"@firebase/storage",
"@firebase/performance",
"@firebase/remote-config",
"@firebase/util"
]
},
"configurations": {
"production": {
"outputHashing": "media",
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"sourceMap": false,
"optimization": true
}
}
},
"serve-ssr": {
"builder": "@nguniversal/builders:ssr-dev-server",
"options": {
"browserTarget": "iquench-website:build",
"serverTarget": "iquench-website:server"
},
"configurations": {
"production": {
"browserTarget": "iquench-website:build:production",
"serverTarget": "iquench-website:server:production"
}
}
},
"prerender": {
"builder": "@nguniversal/builders:prerender",
"options": {
"browserTarget": "iquench-website:build:production",
"serverTarget": "iquench-website:server:production",
"routes": [
"/"
]
},
"configurations": {
"production": {}
}
}
}
}
},
"defaultProject": "iquench-website"
}
firebase.json
{
"hosting": [
{
"target": "iquench-website",
"public": "dist\\iquench-website\\dist\\browser",
"ignore": [
"**/.*"
],
"headers": [
{
"source": "*.[0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f].+(css|js)",
"headers": [
{
"key": "Cache-Control",
"value": "public,max-age=31536000,immutable"
}
]
}
],
"rewrites": [
{
"source": "**",
"function": "ssr"
}
]
}
],
"functions": {
"source": "dist"
}
}
我对 Angular Universal 和 SSR 还很陌生,所以如果我做错了什么,请告诉我。提前致谢!
解决方案
首先,仔细检查您
relative path
的distFolder
变量是否可以访问。因为,distFolder
fromserver.ts
通常指向客户端应用程序中的文件,例如dist\iquench-website\browser
在您的应用程序中看起来像一个静态路径。也试试这个,它应该会自动为你创建正确的相对路径,所以你不必弄乱它,只需调整它。//const files = fs.readdirSync(${process.cwd()}/dist/{MyProjectName}-SPA/server); 常量文件 = fs.readdirSync(${process.cwd()}/dist/iquench-website-SPA/server);
其次,我也没有看到您在 Angular.Json 中配置的 dist 文件夹,您确定它在
angular.json
文件中配置了吗?因此,您需要在 Angular.json 中添加/设置它
"projects": {
//configure this to match your output & frontend serving directory on build for your SSR app
"your-project-name": {
"architect": {
"build": {
"options": {
//"outputPath": "dist/frontend"
"outputPath": "dist/iquench-website"
推荐阅读
- node.js - 如何用类处理快递中的错误?
- wpf - (WPF) .Close() 方法是否释放窗口实例?
- html - 为什么悬停后特定部分不可见?
- mysql - 使用 IAM 身份验证和常规密码访问 AWS RDS
- neo4j - 为部门/供应商/项目开发图形数据库模型
- python - 如何对可变输入长度的数据进行编码?
- android - Firebase 导入错误。plugin_platform_interface.dart / Script 'C:\src\flutter\packages\flutter_tools\gradle\flutter.gradle' 行中的问题:904
- android - 错误:libloc_eng:LOCAL_COPY_HEADERS 已过时
- python - 如何在 grib 中迭代?
- powerbi - 临时表计数过滤行