While I was trying to serve my application with host option, I've got this error.
[vite] Internal server error: Invalid URL
at new URL (node:internal/url:775:36)
at /home/user/Works/2024/node_modules/@angular-devkit/build-angular/src/builders/dev-server/vite-server.js:510:44
at /home/user/Works/2024/node_modules/@angular-devkit/build-angular/src/builders/dev-server/vite-server.js:551:55
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
Before Vite is used in Angular build system, there was no problem with internal or external static IPs. I didn't find any solution to fix it. Thanks in advance for any solution.
I've tried --disable-host-check but this issue is still on.
Also necessary ports are open and IPv4 connected with static local IP.
Serving at localhost is fine. Checked XAMPP to test IP health to serve, fine too.
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test",
"serve:ssr:2024": "node dist/2024/server/server.mjs"
},
"private": true,
"dependencies": {
"@angular/animations": "^17.0.0",
"@angular/common": "^17.0.0",
"@angular/compiler": "^17.0.0",
"@angular/core": "^17.0.0",
"@angular/forms": "^17.0.0",
"@angular/platform-browser": "^17.0.0",
"@angular/platform-browser-dynamic": "^17.0.0",
"@angular/platform-server": "^17.0.0",
"@angular/router": "^17.0.0",
"@angular/ssr": "^17.0.10",
"bootstrap": "^5.3.2",
"express": "^4.18.2",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"xlsx": "^0.18.5",
"zone.js": "~0.14.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "^17.0.10",
"@angular/cli": "^17.0.10",
"@angular/compiler-cli": "^17.0.0",
"@types/express": "^4.17.17",
"@types/jasmine": "~5.1.0",
"@types/node": "^18.18.0",
"jasmine-core": "~5.1.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.1.0",
"typescript": "~5.2.2"
}
According to fix on github,
To make quick fix in project manually: You should do some manuevers on node_modules/@angular-devkit/build-angular/src/tools/vite/angular-memory-plugin.js. (If it's not exist, update your packages.)
Find the function that I mentioned first and change with the second one.
transformIndexHtmlAndAddHeaders(req.url, rawHtml, res, next, async (html) => {
const { content } = await (0, render_page_1.renderPage)({
document: html,
route: new URL(req.originalUrl ?? '/', server.resolvedUrls?.local[0]).toString(),
serverContext: 'ssr',
loadBundle: (uri) =>
// eslint-disable-next-line @typescript-eslint/no-explicit-any
server.ssrLoadModule(uri.slice(1)),
// Files here are only needed for critical CSS inlining.
outputFiles: {},
// TODO: add support for critical css inlining.
inlineCriticalCss: false,
});
return indexHtmlTransformer && content ? await indexHtmlTransformer(content) : content;
});
transformIndexHtmlAndAddHeaders(req.url, rawHtml, res, next, async (html) => {
const resolvedUrls = server.resolvedUrls;
const baseUrl = resolvedUrls?.local[0] ?? resolvedUrls?.network[0];
const { content } = await (0, render_page_1.renderPage)({
document: html,
route: new URL(req.originalUrl ?? '/', baseUrl).toString(),
serverContext: 'ssr',
loadBundle: (uri) =>
// eslint-disable-next-line @typescript-eslint/no-explicit-any
server.ssrLoadModule(uri.slice(1)),
// Files here are only needed for critical CSS inlining.
outputFiles: {},
// TODO: add support for critical css inlining.
inlineCriticalCss: false,
});
return indexHtmlTransformer && content ? await indexHtmlTransformer(content) : content;
});
Then you can serve with ng serve --host xxx.xxx.x.