.template.dart file not being created

I'm trying to make the Routes class working. When I try to import

import 'package:mango/src/component/pages/dashboard_component.template.dart' as dashboard_template;

I get this error:

[SEVERE] build_web_compilers|entrypoint on web/main.dart:
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 'src/component/pages/dashboard_component.template.dart' as _ref3;` from mango|lib/app_component.template.dart at 19:1
`import 'package:mango/lib/src/component/pages/dashboard_component.template.dart' as dashboard_template;` from mango|lib/src/routes.template.dart at 9:1
`import 'package:mango/lib/src/component/pages/dashboard_component.template.dart' as dashboard_template;` from mango|lib/src/routes.dart at 5:1

And looking at the build directory structure I noticed that the dashboard_component.template.dart hasn't been created while all the others are.

lib/src/routes.dart

import 'package:angular_router/angular_router.dart';
import 'package:mango/src/component/pages/dashboard_component.template.dart' as dashboard_template;
import 'route_paths.dart';
export 'route_paths.dart';

class Routes {
    static final dashboard = RouteDefinition(
        routePath: RoutePaths.dashboard,
        component: dashboard_template.DashboardComponentNgFactory,
        useAsDefault: true,
    );

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

lib/src/component/pages/dashboard_component.dart

import 'package:angular/angular.dart';
import '../customers/customers_component.dart';
import '../customers/new_customer_component.dart';
import '../../data_service.dart';

@Component(
  selector: 'dashboard',
  templateUrl: 'dashboard_component.html',
  providers: [
    CustomersComponent,
    NewCustomerComponent,
  ],
)
class DashboardComponent {
  final DataService _dataService;

  DashboardComponent(this._dataService);
}

lib/app_component.dart

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

import 'src/component/header/header_component.dart';
import 'src/component/pages/dashboard_component.dart';
import 'src/model/customer.dart';
import 'src/data_service.dart';
import 'src/routes.dart';

@Component(
  selector: 'app',
  templateUrl: "app_component.html",
  styleUrls: ['app_component.css'],
  directives: [
    coreDirectives,
    routerDirectives,
    HeaderComponent,
    DashboardComponent,
  ],
  providers: [ClassProvider(DataService)],
  exports: [RoutePaths, Routes],
)
class AppComponent implements OnInit {
  final DataService dataService;

  List<Customer> get customers => dataService.customers;

  AppComponent(this.dataService);

  @override
  ngOnInit() {
    dataService.init();
  }
}

I searched other threads but I couldn't find anything helpful.

I think there are errors in your .html Therefore the template is not getting generated in .dart_tools/build/generated

Delete .dart_tools/build folder. Then on the command line execute -

 pub run build_runner build --delete-conflicting-outputs

This should show some errors. If not, you have to manually check the syntax in html file

Also check if all the correct directives and providers are listed in the .dart file