Disable a Directive in production mode

Question

In my project, we have classes for most of the elements that need to be targeted by the E2E tests:

<div class="just-an-item" [e2e] [e2e-class]="button-to-trigger-something">...</div>

Which gets compiled into

<div class="just-an-item e2e-button-to-trigger-something">...</div>

Thanks to this directive

@Directive({
  selector: '[e2e]'
})
export class E2eClassDirective implements OnInit {

  @HostBinding('class')
  public classes: string;

  @Input('e2e-class')
  public readonly className: string;

  constructor (
    private host: ElementRef,
    private renderer: Renderer2
  ) {
  }

  public ngOnInit (): void {
      this.renderer.addClass(
        this.host.nativeElement,'e2e-' + this.className // <-------
      );
  
  }
}

And of course I have a module

@NgModule({
  ...
  declarations: [ ... ... E2eClassDirective ],
  ...
})
export class MainModule {}

I would like to disable this on compilation time, not on execution time.
In other words, I do not want this:

public ngOnInit (): void {
  if( !environment.production ) {
    this.renderer.addClass(
      this.host.nativeElement,'e2e-' + this.className // <-------
    );
  }

}

Because this still means the text will be in the compiled version, and the logic will be executed. Instead, I would like to be able to "disable" it if we are building the app in production mode, so that it doesn't make it to the /dist.

Is that possible?

Have you tried to conditionally add this directive to your module? — yurzui, Jun 24 '20 at 10:11

score 1 · Answer 1 · answered Jun 24 '20 at 10:16

1

It is not supported https://github.com/angular/angular-cli/issues/10999, but you could do it with a script that removes [e2e] [e2e-class]="button-to-trigger-something" just before production compile e.g. creating a simple js which uses https://www.npmjs.com/package/replace-in-file to remove directive from html files, node ./build/pre-build.js && ng build

answered Jun 24 '20 at 10:16

milo

445
5
12

Thank you, that's what I was looking for but my mistake was to think it could be done from _within_ the angular compiler. Quick question, won't this actually _modify_ my files? I would like to keep my source-code intact. – Nico Jun 24 '20 at 11:31
I am not sure, see https://docs.npmjs.com/misc/scripts (if you use any kind of build pipeline for production then source code modification is a non issue) – milo Jun 24 '20 at 13:51

score 1 · Answer 2 · answered Jun 24 '20 at 10:23

1

One possible solution for this would be to create 2 versions of this file, for example some.component.ts and a production version some.component.prod.ts

Then use angular's file replacement and add an item under fileReplacement in your angular.json file:

{
  ...
  "configurations": {
    "production": {
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.prod.ts"
        },
        {
          "replace": "path/to/some.component.ts",
          "with": "path/to/some.component.prod.ts"
        }
      ]
    }
  }
  ...
}
`

answered Jun 24 '20 at 10:23

Tal Ohana

1,128
8
15

That makes so much sense - I didn't think about using this replacement tool for other files than `environment.ts` – Nico Jun 24 '20 at 11:23
The `[e2e]` properties remain in the built package, but they are just ignored (and not rendered). – Nico Jun 24 '20 at 12:21

Disable a Directive in production mode

2 Answers2