Angular 17 ng 服务 --host Vite 无效 URL 错误

Question

当我尝试使用主机选项为我的应用程序提供服务时，出现此错误。

[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)

在 Angular 构建系统中使用 Vite 之前，内部或外部静态 IP 都没有问题。我没有找到任何解决方案来修复它。预先感谢您提供任何解决方案。

我已经尝试过

--disable-host-check

但这个问题仍然存在。 还需要打开必要的端口并使用静态本地 IP 连接 IPv4。 在本地主机上提供服务很好。检查了 XAMPP 来测试 IP 健康状况以提供服务，也很好。

"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"
  }

Answer 1

根据github上的修复，

要在项目手册中快速修复： 您应该在 node_modules/@angular-devkit/build-angular/src/tools/vite/angular-memory-plugin.js 上进行一些操作。 （如果不存在，请更新您的软件包。）

找到我第一个提到的函数并用第二个函数进行更改。

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;
                });

然后就可以上桌了

ng serve --host xxx.xxx.x.