What does somecomponent.template.dart import in AngularDart point to?

Question

I am just reading the AngularDart routing tutorial and came across this code snippet.

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

import 'route_paths.dart' as paths;
import 'crisis_list_component.template.dart' as clct;
import 'hero_list_component.template.dart' as hlct;

@Injectable()
class Routes {
  static final _crises = new RouteDefinition(
    routePath: paths.crises,
    component: clct.CrisisListComponentNgFactory,
  );

  static final _heroes = new RouteDefinition(
    routePath: paths.heroes,
    component: hlct.HeroListComponentNgFactory,
  ); ..... see routing tutorial link above.
}

What does

import 'crisis_list_component.template.dart' as clct;
import 'hero_list_component.template.dart' as hlct;

actually import?

Answer 1

Angular uses code generation to generate Dart code from Angular template syntax.

These components import the generated code. The code contains factory methods that are required by the router to create component instances.

If you have a

import 'crisis_list_component.dart';

then code generation will generate an additional

import 'crisis_list_component.template.dart' as clct;

which in this case is imported with an alias clct