Angular 5 Template will NOT populate with --aot switch on but will without it. NO ERRORS

Question

I have a mystery, there's not a lot of code but it regards, ANGULAR 5 and AOT.

The template selector:

<app-component></app-component>

(This is a generic name) will NOT populate with the switch: --aot. It throws NO ERRORS but will only work (populate) without the --aot switch.

We need to be able to get this to work for our builds.

To further the mystery, another selector:

<debug-modal></debug-modal>

"DOES" populate with and without the --aot switch.

This is very frustrating...

Thoughts as this is blocking me for over a week.

UPDATE:

What's happening is that the HTML file is NOT loading...

Here's the code for @component:

import {trigger, state, style, animate, transition} from '@angular/animations';

@Component({
  selector: 'app-avatar',
  templateUrl: './avatar.component.html',
     styleUrls: ['./avatar.component.scss',
      './avatar-arrow.component.scss'],
      animations: [SlideInOutAnimation,
      trigger('hideShowAvatar', [
      state('true', style({opacity: 0})),
      state('false', style({opacity: 1})),
      transition('0 => 1', animate('.5s')),
      transition('1 => 0', animate('.9s'))
    ])]
})

the DEBUG modal that "IS" working... does NOT have the animations part...

I removed it, it doesn't help.

I flipped the lines:

  state('true', style({opacity: 1})),
  state('false', style({opacity: 0})),

This doesn't help.

I'm dumbfounded...