无法使用简单的 Dart Web 服务器提供 angular 个组件

Question

我刚开始编写 Web 应用程序，想在 Dart 中完成整个堆栈。我遵循了一些客户端教程，并运行在 webstorm works 中使用它们。

接下来，我通过右键单击 pubspec.yaml 文件并选择构建（将其定向到构建文件夹）来构建我的 Web 应用程序。从那个构建文件夹我运行我的简单飞镖服务器从命令行 "dart dartserver.dart" （下面的代码）

服务器将提供 index.html 但不会运行任何 angular 代码。它会显示仅包含 "Loading..." 行的页面，因为它尚未翻译 my-app 标签。

<my-app>Loading...</my-app>

这是服务器代码。

import 'dart:io';
import 'dart:async';

Future<void> runServer(String basePath) async {
  final server = await HttpServer.bind(InternetAddress.loopbackIPv4, 4040);

  print('Listening on localhost:${server.port}');

  await for (HttpRequest request in server) {
    handleRequest(basePath, request);
  }
}

Future<void> handleRequest(String basePath, HttpRequest request) async {
  final String path = request.uri.toFilePath();

  final String resultPath = path == '\' ? '\index.html' : path;
  final File file = File('$basePath$resultPath');

  if (await file.exists()) {
    print("Serving ${file.path}");
    request.response.headers.contentType = ContentType.html;
    try {
      await file.openRead().pipe(request.response);
    } catch (e) {
      print("Couldn't read file: $e");
      exit(-1);
    }
  } else {
    print("Can't open ${file.path}.");
    request.response
      ..statusCode = HttpStatus.notFound
      ..close();
  }
}

Future<void> sendInternalError(HttpResponse response) async {
  response.statusCode = HttpStatus.internalServerError;
  await response.close();
}

Future<void> sendNotFound(HttpResponse response) async {
  response.statusCode = HttpStatus.notFound;
  await response.close();
}

Future<void> main() async {
  // Compute base path for the request based on the location of the
  // script, and then start the server.
  final script = File(Platform.script.toFilePath());

  await runServer(script.parent.path);
}

这是构建输出

packages <dir>
.build.manifest
.packages
dartserver.dart
favicon.png
index.html
main.dart.js
styles.css

这是 Index.HTML

<!DOCTYPE html>
<html>

<head>
  <script>
    (function () {
      var m = document.location.pathname.match(/^(\/[-\w]+)+\/web($|\/)/);
      document.write('<base href="' + (m ? m[0] : '/') + '" />');
    }());
  </script>

  <title>Test App</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="styles.css">
  <link rel="icon" type="image/png" href="favicon.png">

  <script defer src="main.dart.js"></script>
</head>

<body>
  <my-app>Loading...</my-app>
</body>

</html>

在浏览器中出现两个错误

Refused to apply style from 'http://localhost:4040/styles.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
Refused to execute script from 'http://localhost:4040/main.dart.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

Answer 1

request.response.headers.contentType = ContentType.html;

而不是 ContentType.html return 正确的 MIME 类型。

您可以使用 https://pub.dartlang.org/packages/mime

lookupMimeType(file.path)

无法使用简单的 Dart Web 服务器提供 angular 个组件

Unable to serve angular components with simple Dart web server

webserver

dart

angular-dart