Generate angular component html file with builder


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:

        - lib/$lib$

    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
    - 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 {
  final buildExtensions = const {
    r'lib/$lib$': ['package:_shared_angular/lib/components/icon/icon_component.html']

  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…


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:

        enabled: true

Answered By – enyo

Answer Checked By – Pedro (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *