Error "Unable to find modules for some sources..." in Dart

Question

I'm learning dart and trying to make a simple webapp, wich should make it possible to create an user.

But when I'm trying to run it, the following message appears:

[SEVERE] build_web_compilers|entrypoint on web/main.dart (cached): Unable to find modules for some sources, this is usually the result of either a bad import, a missing dependency in a package (or possibly a dev_dependency needs to move to a real dependency), or a build failure (if importing a generated file).

Please check the following imports:

import 'package:Muellbot/app_component.template.dart' as ng; from Muellbot|web/main.template.dart at 9:1 import 'package:Muellbot/app_component.template.dart' as ng; from Muellbot|web/main.dart at 2:1

[SEVERE] Failed after 2.2s

Here are my files:

main.dart

import 'package:angular/angular.dart';
import 'package:Muellbot/app_component.template.dart' as ng;
import 'package:angular_router/angular_router.dart';

import 'main.template.dart' as self;

@GenerateInjector(
  routerProvidersHash,
)
final InjectorFactory injector = self.injector;

void main() {
  runApp(ng.AppComponentNgFactory, createInjector: injector);
}

appComponent.dart

import 'package:angular/angular.dart';
import 'package:angular_router/angular_router.dart';

import 'src/routes.dart';

@Component(
  selector: 'my-app',
  styleUrls: ['app_component.css'],
  templateUrl: 'app_component.html',
  directives: [routerDirectives],
  exports: [RoutePaths, Routes],

)
class AppComponent {

}

appComponent.html

<h1>Müllbot</h1>
<nav>
    <a [routerLink]="RoutePaths.home.toUrl()"
   [    routerLinkActive]="'active'">Home</a>
    <a [routerLink]="RoutePaths.newUser.toUrl()"
       [routerLinkActive]="'active'">Neuen Benutzer anlegen</a>
</nav>
<router-outlet [routes]="Routes.all"></router-outlet>
<img src="logo.png" width="50%">

routes.dart

import 'package:angular_router/angular_router.dart';

import 'route_paths.dart';
import 'home_component.template.dart' as home_template;
import 'create_new_user_component.template.dart' as new_user_template;

export 'route_paths.dart';

class Routes {
  static final home = RouteDefinition(
    routePath: RoutePaths.home,
    component: home_template.HomeComponentNgFactory,
  );
  static final newUser = RouteDefinition(
    routePath: RoutePaths.newUser,
    component: new_user_template.NewUserComponentNgFactory,
  );

  static final all = <RouteDefinition>[
    home,
    newUser,
  ];
}

routhe_paths.dart

import 'package:angular_router/angular_router.dart';

class RoutePaths {
  static final home = RoutePath(path: 'home');
  static final newUser = RoutePath(path: 'newUser');

}

home_component.html

    <h4>Hallo {{user.firstName}}</h4>

home_component.dart

import 'package:angular/angular.dart';

import 'user.dart';

@Component(
  selector: 'home',
  templateUrl: 'home_component.html'
)

class HomeComponent {

  User user = new User('Axel', 'Foley', '[email protected]');

}

create_new_user_component.html

<h3>Neuen Benutzer anlegen</h3>
<div>
    <span *ngIf="!create" id="error">Fehler</span>
    <span *ngIf="create" id="success">Benutzer angelegt</span>
    <table>
        <tr>
            <td><label>Vorname:</label></td><td><input #firstName/></td>
            <td><label>Nachname:</label></td><td><input #lastName/></td>
        </tr><tr>
            <td><label>Email:</label></td><td><input #email/></td>
        </tr><tr>
            <td><label>Passwort:</label></td><td><input #password/></td>
            <td><label>Passwort wiederholen:</label></td><td><input #passwordRe/></td>
        </tr><tr>
            <td><button (click)="add(firstName.value, lastName.value, email.value, password.value)">Hinzufügen</button></td>
        </tr>
    </table>
</div>

create_new_user_component.dart

import 'dart:async';
import 'dart:convert';
import 'package:http/http.dart';

import 'package:angular/angular.dart';


@Component(
  selector: 'new-user',
  templateUrl: 'create_new_user_component.html'
)

class NewUserComponent {
  bool create = false;
  final Client _http;
  static final _headers = {'Content-Type': 'application/json'};
  final url = "http://localhost:4040/user/new";

  Future<void> add(String firstName, String lastName, String email, String password) async {
    try {
      final response = await _http.post(url, headers: _headers, body: json.encode({'firstName': firstName, 'lastName': lastName, 'email': email, 'password': password}));
      if (response.statusCode == 200) {
        create = true;
      }
    } catch (e) {
      throw new Exception(e);
    }
  }
}

At least from your example above, you wrote templateUrl: 'app_component.html', but named your HTML file appComponent.html. That might be the source of your issue? — matanlurey
Thank, but it's a mistake, the files are named "app_component.*" — jupper
If you look in your .dart_tool/build/generated/Muellbot/lib/ directory, do you see the app_component.template.dart file? — Jake MacDonald
Ok - so for some reason then it is not being generated. Do you have any other errors in your build? You could also navigate to /$graph (in serve mode), and in the search box type in "lib/app_component.template.dart" and click search. Does it find a node? If so can you copy/past the information for it in the top right corner? — Jake MacDonald

jupper jupper · Accepted Answer · 2018-09-12T20:55:50

Ok removing

<span *ngIf="!create" id="error">Fehler</span>
<span *ngIf="create" id="success">Benutzer angelegt</span>

helped.

But now I got another error. The server loads and when I visit the page, it just says

Loading...

In the console I get the message

TypeError: e.message is undefined

Error "Unable to find modules for some sources..." in Dart

2 Answers