Невозможно обслуживать угловые компоненты с простым веб-сервером Dart - PullRequest
Новая
       8

Невозможно обслуживать угловые компоненты с простым веб-сервером Dart

0 голосов
/ 12 декабря 2018

Я только начинаю писать веб-приложения и хочу сделать весь стек в Dart.Я следовал некоторым учебникам для клиентской стороны и запускал их в webstorm works.

Далее я собрал свое веб-приложение, щелкнув правой кнопкой мыши файл pubspec.yaml и выбрав build (направив его в папку build).Из этой папки сборки я запускаю свой простой сервер dart из командной строки «dart dartserver.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.

1 Ответ

0 голосов
/ 12 декабря 2018 
request.response.headers.contentType = ContentType.html;

Вместо ContentType.html верните правильный тип MIME.

Вы можете использовать https://pub.dartlang.org/packages/mime 

lookupMimeType(file.path)
...