title: separate module for angular materials
body: <p>To avoid importing modules from angular materials I created a separate angular module <code>AppCustomMaterialModule</code> and imported it in the main module <code>AppModule</code>. A component of that main module (<code>AppMenuComponent</code>) should use one of the exported angular materials modules. However, although the <code>AppCustomMaterialModule</code> is imported in <code>AppModule</code> it cannot be found in <code>AppMenuComponent</code>. A direct import works. Error message: 
  <code>Module ...app-custom-material-module/app-custom-material.module' has no exported member 'MatMenuTrigger'</code>
  What would I need to do to use the <code>AppCustomMaterialModule</code> as intended?</p>
  
  <p>Structure:</p>
  
  <pre><code>|____app
  | |____app.component.html
  | |____app.component.ts
  | |____app.component.spec.ts
  | |____app.module.ts
  | |____app-custom-material-module
  | | |____app-custom-material.module.ts
  | |____app-menu
  | | |____app-menu.component.html
  | | |____app-menu.component.spec.ts
  | | |____app-menu.component.css
  | | |____app-menu.component.ts
  </code></pre>
  
  <p>The AppCustomMaterialModule:</p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { MatButtonModule, MatCheckboxModule, MatMenuModule, MatMenuTrigger } from '@angular/material';
  
  @NgModule({
    imports: [
      CommonModule,
      MatButtonModule,
      MatCheckboxModule,
      MatMenuModule,
      MatMenuTrigger
    ],
    exports: [
      MatButtonModule,
      MatCheckboxModule,
      MatMenuModule,
      MatMenuTrigger
    ],
    declarations: []
  })
  export class AppCustomMaterialModule { }
  </code></pre>
  
  <p>The main module "AppModule":</p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  
  import { AppComponent } from './app.component';
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  import { AppCustomMaterialModule } from './app-custom-material-module/app-custom-material.module';
  import { AppMenuComponent } from './app-menu/app-menu.component';
  
  @NgModule({
    declarations: [
      AppComponent,
      AppMenuComponent
    ],
    imports: [
      BrowserModule,
      BrowserAnimationsModule,
      AppCustomMaterialModule
    ],
    exports: [],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>The component "AppMenuComponent":</p>
  
  <pre><code>import { Component, OnInit, ViewChild, ViewChildren } from '@angular/core';
  // import { MatMenuTrigger } from "@angular/material/menu"; &lt;== direct import works
  import { MatMenuTrigger } from '../app-custom-material-module/app-custom-material.module';
  
  @Component({
    selector: 'app-menu',
    templateUrl: './app-menu.component.html',
    styleUrls: ['./app-menu.component.css']
  })
  export class AppMenuComponent implements OnInit {
    @ViewChild(MatMenuTrigger) trigger: MatMenuTrigger;
  
    constructor() { }
  
    ngOnInit() {
    }
  
  }
  </code></pre>