Chromium and Dart: "An error occurred loading file"

Question

I'm trying to run some Dart templates from Stagehand. The 'ubersimplewebapp' app works. There's almost nothing to it. I've tried a couple of others and they don't. I'm currently trying to get 'webapp' to work. In install using PHPStorm and there are no errors. When I run it in the Chromium browser, I get the following console errors:

GET http://dartorium.loc/packages/browser/dart.js
GET http://dartorium.loc/packages/dartorium/nav_menu.dart
An error occurred loading file: package:dartorium/nav_menu.dart
GET http://dartorium.loc/packages/route_hierarchical/client.dart
An error occurred loading file: package:route_hierarchical/client.dart
GET http://dartorium.loc/packages/dartorium/reverser.dart
An error occurred loading file: package:dartorium/reverser.dart

This is the pubspec.yaml file:

name: 'dartorium'
version: 0.0.1
description: >
  A minimal web app for the developer that doesn’t want to be confused by too
  much going on.
#author: <your name> <email@example.com>
#homepage: https://www.example.com
environment:
  sdk: '>=1.0.0 <2.0.0'
dependencies:
  browser: any
  sass: '>=0.4.0 <0.5.0'
  script_inliner: '>=1.0.0 <2.0.0'
  route_hierarchical: '>=0.5.0 <0.7.0'
transformers:
- script_inliner
#- sass:
#    style: compressed

This is the log from installing the template the PHPStorm produced:

Working dir: /Volumes/Data/htdocs/dartorium
/usr/local/opt/dart/libexec/bin/pub get
Resolving dependencies...
+ analyzer 0.22.4 (0.24.0 available)
+ args 0.12.2+6
+ barback 0.15.2+4
+ browser 0.10.0+2
+ cli_util 0.0.1+1
+ code_transformers 0.2.5
+ collection 1.1.0
+ csslib 0.11.0+4
+ html5lib 0.12.0
+ logging 0.9.3
+ path 1.3.3
+ pool 1.0.1
+ route_hierarchical 0.6.1+1
+ sass 0.4.2
+ script_inliner 1.0.0
+ source_maps 0.10.0+1
+ source_span 1.0.3
+ stack_trace 1.2.1
+ utf 0.9.0+2
+ watcher 0.9.4
+ when 0.2.0
+ which 0.1.3
Changed 22 dependencies!
Precompiling dependencies...
Loading source assets...
Loading script_inliner transformers...
Precompiled script_inliner.
Process finished with exit code 0

A directory snapshot

My vhosts entry just in case:

<VirtualHost *:80>
    ServerName dartorium.loc
    DocumentRoot "/Volumes/Data/htdocs/dartorium/web"
  <directory /Volumes/Data/htdocs/dartorium>
    Allow from all
    Options -MultiViews
    Require all granted
  </directory>
</VirtualHost>

Update

I decided to try creating the app outside of PHPStorm. I deleted the app and did 'stagehand webapp' in Terminal to install it again and then 'pub get'. I still got the same errors.

I then noticed a comment in the output that said to do 'pub serve' and then connect to the site on localhost:8080. When I did that, the app ran fine. So now my question is how do you run the app using Apache?

Answer

The accepted answer below given by Günter Zöchbauer solved the problem. In addition to what is described there, I made two other changes. After any change in the code, I run 'pub build'. I'm spoiled by working in PHP and RoR using RubyMine where all I have to do is refresh the browser. The other change was to my vhosts entry. It's now set to:

<VirtualHost *:80>
    ServerName dartorium.loc
    DocumentRoot "/Volumes/Data/htdocs/dartorium/build/web"
</VirtualHost>

I had originally added the permissions to fix some access problems I had before starting this post. It turns out they weren't necessary. The entry now points to build/web instead of the web directory in which you work.

Answer 1

You need to run pub build to generate JavaScript output (in build/web). This build output can be served by apache.

The build output works fine in Chrome without change. To make it work in Dartium I changed the script tags:

<script src="main.dart.js"></script>
<!--<script type="application/dart" src="main.dart"></script> -->
<!--<script data-pub-inline src="packages/browser/dart.js"></script>-->