Putting AngularDart components in subfolders when routing

1
votes

According to this tutorial, when defining routes in Angular for Dart you need to import the template.dart files of the relevant components:

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

I have put my components in a subfolder of the folder where this code resides. I have the import code in lib/src/routes.dart:

import 'components/foobar/foobar_component.template.dart' as fct;

and a Foobar component in lib/src/components/foobar/foorbar_component.dart.

When I have the foobar_component.dart code in src (i.e. the same folder as routes.dart) there's no problem. But when I move it to its own subfolder, I get the error:

Unable to find modules for some sources [...] Please check the following imports: import 'components/foobar/foobar_component.template.dart'

How do I get it to find the component in its subfolder?

1
dartangular-dartangular-dart-routing

1 Answers

3
votes

You could use

import '../../components/foobar/foobar_component.template.dart' as fct;

but usually, it is better to not use ../ in imports and instead use package imports

import 'package:my_package/web/src/components/foobar/foobar_component.template.dart' as fct;

where my_package is the string used in name: ... in your pubspec.yaml and lib/ is skipped in the path to the imported file.