title: Angular 11 structural directive breaks when compiling via AOT
body: <p>I am attempting to migrate from Angular 8 to 11.</p>
  <p>I have gotten everything to work except for a custom directive. The directive <em><strong>works</strong></em> when running the app using <code>ng serve</code>, but breaks when compiled with the <code>--aot</code> or <code>--prod</code> flags. The browser console log reports the following error:</p>
  <pre><code>core.js:10073 NG0303: Can't bind to 'hasPermission' since it isn't a known property of 'span'.
  </code></pre>
  <p>where <code>hasPermission</code> is the directive, and <code>span</code> is any element I attempt to use the directive. This used to work fine in Angular 8.</p>
  <p>The directive itself:</p>
  <pre><code>import { Directive, OnInit, Input, ElementRef, TemplateRef, ViewContainerRef } from '@angular/core';
  
  
  @Directive({
    selector: '[hasPermission]',
  })
  export class PermissionsDirective implements OnInit {
  
    constructor(
      private element: ElementRef,
      private templateRef: TemplateRef&lt;any&gt;,
      private viewContainer: ViewContainerRef,
    ) {}
  
    ngOnInit() {
      ...
    }
  
    // this is the structural call we're looking for
    // the directive will respond to *hasPermission=&quot;'perm'&quot;
    @Input('') 
    set hasPermission(value: any) {
     ...
    }
  }
  </code></pre>
  <p>it is declared and exported using a SharedModule:</p>
  <pre><code>@NgModule({
    declarations: [
     ...
     PermissionsDirective,
     ...
    ],
    exports: [
     ...
     PermissionsDirective,
     ...
    ]
  })
  
  export class SharedModule {}
  </code></pre>
  <p>and finally, it's used in many other modules/components like so:</p>
  <pre><code>some.module.ts
  import { SharedModule } from 'path/shared.module';
  @NgModule({
   imports: [
    SharedModule,
   ],
   declarations: [
    SomeComponent
   ]
  })
  
  somehtml.html
  ...
  &lt;div *hasPermission=&quot;'somepermission'&quot;&gt;...&lt;/div&gt;
  ...
  
  some.component.ts
  @Component({ templateUrl: 'somehtml.html' })...
  
  </code></pre>
  <p>I'm thinking this has something to do with the -aot flag not placing modules in the right place so that they're visible? Otherwise I don't understand why there are no issues using just <code>ng serve</code></p>
  <p>Minimal example shown here: <a href="https://stackblitz.com/edit/angular-ivy-rzu5jm?file=src/app/app.component.html" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-ivy-rzu5jm?file=src/app/app.component.html</a></p>
  <p>Browser console for the stackblitz shows the same error (NG0303)</p>