title: NgxPermissions not working with Lazy Loaded Module
body: <p>When adding ngx-permissions to my project, compilation error happens. My code contains multiple lazy-loaded modules and each one makes use of <code>*ngxPermissionsOnly</code></p>
  
  <p>Tried importing <code>NgxPermissionsModule</code>, <code>NgxPermissionsModule.forRoot()</code>, <code>NgxPermissionsModule.forChild()</code> in both main app module and child layout module, but nothing worked.</p>
  
  <p><em>Code snippets:</em>
  <strong>app.module.ts</strong></p>
  
  <pre><code>import { AuthService } from './../services/auth.service';
  import { FormsModule, ReactiveFormsModule } from '@angular/forms';
  import { CommonModule } from '@angular/common';
  import { HttpClient, HttpClientModule } from '@angular/common/http';
  import { HttpModule } from '@angular/http';
  import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  import { AppRoutingModule } from './app-routing.module';
  import { AppComponent } from './app.component';
  import { AuthGuard } from './shared';
  import { NgxPermissionsModule, NgxRolesService } from 'ngx-permissions';
  
  @NgModule({
      imports: [
          HttpModule,
          CommonModule,
          BrowserModule,
          BrowserAnimationsModule,
          HttpClientModule,
          AppRoutingModule,
          FormsModule, ReactiveFormsModule,
          NgxPermissionsModule.forRoot()
      ],
      exports: [CommonModule],
      declarations: [AppComponent],
      providers: [AuthGuard, AuthService],
      bootstrap: [AppComponent]
  })
  export class AppModule {}
  </code></pre>
  
  <p><strong>layout.module.ts</strong></p>
  
  <pre><code>import { NgxPermissionsModule, NgxRolesService } from 'ngx-permissions';
  import { CommonModule } from '@angular/common';
  import { LayoutRoutingModule } from './layout-routing.module';
  import { LayoutComponent } from './layout.component';
  import { SidebarComponent } from './components/sidebar/sidebar.component';
  import { HeaderComponent } from './components/header/header.component';
  
  @NgModule({
      imports: [
          CommonModule,
          FormsModule,
          LayoutRoutingModule,
          NgxPermissionsModule.forChild(),
      ],
      declarations: [LayoutComponent, SidebarComponent, HeaderComponent],
      providers: [AutoLogoutService]
  })
  export class LayoutModule {}
  </code></pre>
  
  <p><strong>profile.module.ts</strong></p>
  
  <pre><code>import { NgxPermissionsModule } from 'ngx-permissions';
  import { ProfileComponent } from './profile.component';
  import { CommonModule } from '@angular/common';
  import { FormsModule, ReactiveFormsModule } from '@angular/forms';
  import { ProfileRoutingModule } from './profile-routing.module';
  import { PageHeaderModule } from '../../shared';
  
  @NgModule({
      imports: [
          CommonModule,
          ProfileRoutingModule,
          PageHeaderModule,
          FormsModule,
          ReactiveFormsModule,
          NgxPermissionsModule.forChild(),
      ],
      exports: [CommonModule],
      declarations: [ProfileComponent]
  })
  export class ProfileModule {}
  </code></pre>
  
  <p><strong>layout.component.ts</strong> - This file loads permissions array.</p>
  
  <pre><code>constructor(
          public authService: AuthService,
          public router: Router,
          private ngxRolesService: NgxRolesService,
          private location: Location,
          private ngxPermissionsService: NgxPermissionsService,
        ) {
          this.currentUser = JSON.parse(localStorage.getItem('currentUser'));
          const permArray = new Array();
          const role = this.currentUser.roles;
          role.forEach(element =&gt; {
            const permission = element.permissions;
            permission.forEach(obj =&gt; {
              this.ngxPermissionsService.addPermission(obj.permissionName);
              permArray.push(obj.permissionName);
            });
          });
  
          this.ngxRolesService.addRole('current-user-role', permArray);
          this.ngxPermissionsService.loadPermissions(permArray);
          localStorage.setItem('lastAction', Date.now().toString());
          console.log('Last Action Time -- ' + localStorage.getItem('lastAction'));
          console.log('Permissions Array -- ' + permArray);
        }
  </code></pre>
  
  <p>Please let me know how can I resolve the error.</p>
  
  <p><strong>Update:</strong>
  Compilation issue was solved using Marius answer. But ngx-permissions functionality is neither working for routing using <code>NgxPermissionsGuard</code> nor for elements using <code>*ngxPermissionsOnly</code></p>
  
  <p><strong>layout-routing.module.ts</strong></p>
  
  <pre><code>const routes: Routes = [
      {
          path: '',
          component: LayoutComponent,
          children: [
              { path: '', redirectTo: 'profile', pathMatch: 'prefix' },
              {
                  path: 'profile',
                  loadChildren: './profile/profile.module#ProfileModule',
                  canActivate: [NgxPermissionsGuard],
                  data: {
                      permissions: {
                          only: 'abcd',
                          redirectTo: '/exceptions'
                      }
                  }
              },
           ]
         }
      ];
  
  @NgModule({
      imports: [RouterModule.forChild(routes)],
      exports: [RouterModule]
  })
  export class LayoutRoutingModule {}
  </code></pre>
  
  <p><strong>profile.component.html</strong>
  My permissions array contains permissions 'change-password-self' which is added to ngxpermissions using</p>
  
  <pre><code>this.ngxRolesService.addRole('current-user-role', permArray);
  this.ngxPermissionsService.loadPermissions(permArray);
  </code></pre>
  
  <p>and <code>profile.component.html</code> contains
  <code>&lt;button *ngxPermissionsOnly="['change-password-selfish']" class="btn btn-sm btn-primary" (click)="togglePasswordView()"&gt;Change Password&lt;/button&gt;</code>
  So, this button should not be displayed but it is still visible.</p>