Unable to serve angular components with simple Dart web server

Question

I'm just getting started writing web apps and want to do the whole stack in Dart. I've followed some tutorials for the client side and running them in webstorm works.

Next I built my web app by right clicking on the pubspec.yaml file and choosing build (directing it to a build folder). From that build folder I run my simple dart server from the command line "dart dartserver.dart" (code below)

The server will serve index.html but won't run any angular code. It will show the page with just the line "Loading..." because it hasn't translated the my-app tags.

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

Here's the server code.

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);
}

Here's the build output

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

And here's the 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>

In the browser I get two errors

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.

What does your html file look like? Are there any errors in the browser console? Have you added a dev_dependency on build_web_compilers? — Nate Bosch
– Nate Bosch, Commented Dec 11, 2018 at 22:25
I've added more info. I don't know about dev_dependency or build_web_compilers. I'm not familiar with those. — cjmarques
– cjmarques, Commented Dec 12, 2018 at 14:31

Günter Zöchbauer · Accepted Answer · 2018-12-12 17:19:41Z

2

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

Instead of ContentType.html return the correct mime type.

You can use https://pub.dartlang.org/packages/mime

lookupMimeType(file.path)

answered Dec 12, 2018 at 17:19

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

cjmarques Over a year ago

Thank you. The predefined types didn't include css and js. Thanks for the reference!

Günter Zöchbauer Over a year ago

I'd create an issue in the mime repo.

Collectives™ on Stack Overflow

Unable to serve angular components with simple Dart web server

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related