Generate angular component html file with builder

Issue

I’m writing an angular package (_shared_angular) that provides an angular component. The .html file of this component should be generated though because it will be based on other files.

I don’t want the .html file to be checked in, and I want it to be generated with the default build system.

I have tried writing a builder for it, but I struggle to generate the file for the package itself… the generated file is always put in the actual root package (that includes my package).

This is what my build.yaml looks like:

targets:
  $default:
    builders:
      _shared_angular|iconsBuilder:
        generate_for:
        - lib/$lib$

builders:
  _shared_angular|iconsBuilder:
    import: "package:_shared_angular/builders/icons_builder.dart"
    builder_factories: ["iconsBuilder"]
    build_extensions: {"lib/$lib$": ["package:_shared_angular/lib/components/icon/icon_component.html"]}
    build_to: cache
    auto_apply: dependents
    runs_before:
    - angular

and this is what my builder looks like:

import 'package:build/build.dart';
import 'package:glob/glob.dart';

Builder iconsBuilder(BuilderOptions options) => IconsBuilder();

class IconsBuilder implements Builder {
  @override
  final buildExtensions = const {
    r'lib/$lib$': ['package:_shared_angular/lib/components/icon/icon_component.html']
  };

  @override
  build(BuildStep buildStep) async {
    final templateContent = await _getTemplateContent(buildStep.findAssets(Glob('package:_shared_angular/lib/components/icon/src/*.svg'));
    await buildStep.writeAsString(
        AssetId('_shared_angular', 'lib/components/icon/icon_component.html'), templateContent);
  }
}

But it doesn’t work.

---

EDIT: It worked when I replaced buildExtensions with this: r'lib/$lib$': ['lib/components/icon/icon_component.html'] but I don’t understand why…

Solution

The reason it didn’t work as expected, was because auto_apply should be none, but inside the target, it should read: enabled: true like this:

targets:
  $default:
    builders:
      _shared_angular|iconsBuilder:
        enabled: true

Answered By – enyo

Answer Checked By – Pedro (FlutterFixes Volunteer)