无法使用简单的 Dart Web 服务器提供 Angular 组件答案

【问题标题】：Unable to serve angular components with simple Dart web server无法使用简单的 Dart Web 服务器提供 Angular 组件
【发布时间】：2018-12-11 21:36:03
【问题描述】：

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

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

服务器将提供 index.html 但不会运行任何角度代码。它将仅显示带有“正在加载...”行的页面，因为它尚未翻译 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.

【问题讨论】：

你的 html 文件是什么样的？浏览器控制台中是否有任何错误？您是否在build_web_compilers 上添加了dev_dependency？
我添加了更多信息。我不知道 dev_dependency 或 build_web_compilers。我不熟悉这些。

标签： dart webserver angular-dart

【解决方案1】：

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

返回正确的 mime 类型，而不是 ContentType.html。

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

lookupMimeType(file.path)

【讨论】：

谢谢。预定义的类型不包括 css 和 js。感谢您的参考！
我会在 mime 存储库中创建一个问题。