Failed to load packages - Dart Angular Tutorial

Question

I tried to follow the tutorial of Angular with Dart. Everything worked fine until I got to the navigation chapter. When I run the project with webstorm and chromium I always get this error. I also tried to run the solution repo but I get the same error. It seems like these packages browser / angular etc. are not loaded. Perhaps there are some restrictions by webstorm?! The funny thing is it worked occasionally on the first run but when I refreshed the page in the browser the error always comes back.

http://localhost:63342/toh-5-master/web/packages/browser/dart.js Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:63342/toh-5-master/web/packages/angular/angular.dart Failed to load resource: the server responded with a status of 404 (Not Found)
package:angular/angular.dart:1 An error occurred loading file: package:angular/angular.dart
http://localhost:63342/toh-5-master/web/packages/angular_router/angular_router.dart Failed to load resource: the server responded with a status of 404 (Not Found)
package:angular_router/angular_router.dart:1 An error occurred loading file: package:angular_router/angular_router.dart
http://localhost:63342/toh-5-master/web/packages/angular_tour_of_heroes/app_component.dart Failed to load resource: the server responded with a status of 404 (Not Found)
package:angular_tour_of_heroes/app_component.dart:1 An error occurred loading file: package:angular_tour_of_heroes/app_component.dart

EDIT The things above are working now because I changed to this repo: github.com/angular-examples/toh-5/tree/5-dev which works with Dart 2.

Right now I have another problem with the new 5-dev repo. Here is my console of pub serve. It says the main.template.dart is missing. (I'm using the Dart version 2.0.0-dev.44.0.)

Does anyone how to fix this problem??

Compiling angular_tour_of_heroes|web/main.dart...
[web] GET styles.css => (cached) angular_tour_of_heroes|web/styles.css
[Error from Dart2JS on angular_tour_of_heroes|web/main.dart]:
file:///C:/xampp/htdocs/flutterprojects/toh-5-5-dev/web/main.template.dart: Could not find asset angular_tour_of_heroes|web/main.template.dart.
[Info from Dart2JS]:
Took 0:00:03.911463 to compile angular_tour_of_heroes|web/main.dart.
Build completed with 1 errors.
[web] GET main.dart.js => Could not find asset angular_tour_of_heroes|web/main.dart.js.
[web] GET index.html => angular_tour_of_heroes|web/index.html

When I run it directly with the console I get the following error.

> pub serve --web-compiler=dartdevc

Build completed successfully
[web] GET  => angular_tour_of_heroes|web/index.html
[web] GET styles.css => angular_tour_of_heroes|web/styles.css
Unable to find module for angular|lib/src/bootstrap/modules.template.dart
Unable to find module for angular|lib/src/bootstrap/modules.template.dart
Unable to find module for angular|lib/src/bootstrap/modules.template.dart

Patrice Chalin Patrice Chalin · Accepted Answer · 2018-04-03T12:51:21

For Angular 4 example apps

Load failures like this can happen if you have an error in your app that is preventing dart2js from compiling it successfully. Are any errors or warnings being reported by pub in WebStorm's Pub Serve tab? Also make sure that you are using version 1.24.3 of the Dart SDK.

I'm unable to reproduce the problem you mention. I've downloaded the project zip, and it runs fine from both the command line and WebStorm (even after making some edits and refreshing). Note that the first time you load the app, you might get a 404 because pub might not have finished compiling your app yet.

For Angular 5 example apps

As you've found out, if you'd like to try out an example using Angular 5-alpha, switch to the 5-dev branch of the repo. Ensure that you are using at least a Dart 2-dev version of the SDK.

The Dart 2 SDK no longer has support for pub build and pub serve. As of 2018Q2 you cannot use WebStorm to build and serve Angular 5 apps. Instead, you'll need to do that from the command line:

pub run build_runner serve

Then open localhost:8080 in Chrome. For the full details see the Angular 5 Setup for Development.

Failed to load packages - Dart Angular Tutorial

2 Answers