dart - 无法使用简单的 Dart Web 服务器提供 Angular 组件
问题描述
我刚刚开始编写网络应用程序,并想在 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.
解决方案
request.response.headers.contentType = ContentType.html;
而不是ContentType.html
返回正确的 mime 类型。
您可以使用https://pub.dartlang.org/packages/mime
lookupMimeType(file.path)
推荐阅读
- jupyter-notebook - 在 PycharmI 中错误打开 .ipynb 文件的问题
- docker - 如何将选定的字符串传递给变量?
- javascript - 使用 google colab 使用 Selenium 时出错
- django - Cookiecutter - Django:Anymail [SES] boto3 区域错误
- spring-data-jpa - 没有实体类的 Spring Data JPA
- python - 触发 Google Nest 相机拍照
- html - 所以,我有一个 html 文件和另一个有导航栏的文件。所以我想将我的 html 文件链接到该导航文件。我怎么做?
- php - Laravel Livewire:基本分页不起作用,使用 livewire 2.5.5
- javascript - 如何更新这个 Svelte 商店而不每次都重新创建它?
- python-3.x - 为什么 Python3 不接 http.server?