我刚刚开始编写 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.
最佳答案
request.response.headers.contentType = ContentType.html;
返回正确的 mime 类型，而不是 ContentType.html。
您可以使用https://pub.dartlang.org/packages/mime
lookupMimeType(file.path)
关于dart - 无法使用简单的 Dart Web 服务器来提供角度组件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53732686/