Error “Unable to find modules for some sources…” in Dart

[Valentin Olchowski]

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

app_Component.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 {

}

app_Component.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', 'ax...@sfoley.de');

}

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

[Bob Nystrom]

What are the contents of your pubspec.yaml file?

– bob

--
For more ways to connect visit https://www.dartlang.org/community
---
You received this message because you are subscribed to the Google Groups "Dart Misc" group.
To unsubscribe from this group and stop receiving emails from it, send an email to misc+uns...@dartlang.org.
To view this discussion on the web visit https://groups.google.com/a/dartlang.org/d/msgid/misc/70efce7a-7dbc-4bd6-8f6d-ba92f8b13af7%40dartlang.org.

[Valentin Olchowski]

pubspec.yaml

name: Muellbot
description: A web app that uses AngularDart Components
# version: 1.0.0
# homepage: https://www.example.com
# author: valentin <em...@example.com>

environment:
  sdk: '>=2.0.0 <3.0.0'

dependencies:
  angular: ^5.0.0
  angular_components: ^0.9.0
  angular_forms: ^2.0.0
  angular_router: ^2.0.0-alpha+19

dev_dependencies:
  angular_test: ^2.0.0
  build_runner: ^0.10.0
  build_test: ^0.10.2
  build_web_compilers: ^0.4.0
  test: ^1.0.0

[Bob Nystrom]

Is your Dart file "app_Component.dart" or "app_component.dart"? It looks like you're saying it's the former, but you are importing the latter. URIs are case-sensitive, so it probably thinks you are referring to a different file.

(The official style for libraries is to not use capital letters, to avoid cases like this.)

Cheers!

– bob

To view this discussion on the web visit https://groups.google.com/a/dartlang.org/d/msgid/misc/0d8a40ca-c0a2-45d1-9f51-76433c684658%40dartlang.org.

[Valentin Olchowski]

Hey,

sorry this was a mistake from me, when I was creating the post, the filename is "app_component.dart"

[Bob Nystrom]

Hmm... in that case, I'm out of ideas. :(

Adding Jake and Nate to the thread in case they have any.

– bob

To view this discussion on the web visit https://groups.google.com/a/dartlang.org/d/msgid/misc/9889b754-2c93-4d19-b00a-f476b79a21f1%40dartlang.org.

[Valentin Olchowski]

Ok removing

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

helped.

[Valentin Olchowski]

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

[Jake Macdonald]

There is a fix out for this error, but it hasn't been published yet. I can publish that today, but I think this is just hiding some other error (this is in the error handling code for module loading).

[Paul Senni]

hello, I am getting this same error, but all my naming is correct 

I am learning this from a code lab from the web dev website: https://webdev.dartlang.org/angular/tutorial/toh-pt1

app_component.dart

import 'package:angular/angular.dart';

import 'package:angular_forms/angular_forms.dart';

import 'package:hero/src/hero/hero.dart';

import 'package:hero/src/hero/mock_heroes.dart';

// AngularDart info: https://webdev.dartlang.org/angular

// Components info: https://webdev.dartlang.org/components

@Component(

 selector: 'my-app',

 styleUrls: ['app_component.css'],

 templateUrl: 'app_component.html',

 // template: '''

 // <h1>{{title}}</h1>

 // <h2>{{hero.name}}</h2>

 // <div><label>id:</label>{{hero.id}}</div>

 // <div>

 //   <label>name:</label>

 //   <input [(ngModel)]="hero.name" placeholder="name">

 // </div>

 // ''',

 directives: [formDirectives],

)

class AppComponent {

 final title = 'Tour of Heroes';

 // var hero = 'Windstorm';

 // Hero hero = Hero(1, 'Windstorm');

 final List<Hero> heroes = mockHeroes;

 // final Hero hero = Hero(1, 'Jack');

}

app_component.html

<h1>{{title}}</h1>

<!-- <h2>{{hero.name}}</h2> -->

<h2>Heroes</h2>

<!-- <div><label>id:</label>{{hero.id}}</div> -->

<!-- <div>

   <label>name:</label>

   <input [(ngModel)]="hero.name" placeholder="name">

</div> -->

<ul class="heroes">

   <li *ngFor="let hero of heroes">

       <span class="badge">{{hero.id}}</span> {{hero.name}}

   </li>

</ul>

[Tobe Osakwe]

Can confirm; I get the same error in my own project.

[Nate Bosch]

Can you file an issue to https://github.com/dart-lang/build/issues with repro instructions?