displaying spinner specific components is not working - Reopen

[PrabakarKaruppasamy]

Refer https://github.com/mpalourdio/ng-http-loader/issues/38.

@mpalourdio Facing the below issues.

ERROR Error: Uncaught (in promise): Error: Template parse errors: Can't bind to 'spinner' since it isn't a known property of 'spinner'. ("

][spinner]="spinkit.skRotatingPlane"> "): ng:///SuperUserModule/SuperuserComponent.html@176:17 'spinner' is not a known element: 1. If 'spinner' is an Angular component, then verify that it is part of this module. 2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" [ERROR ->] "): ng:///SuperUserModule/SuperuserComponent.html@176:8 Error: Template parse errors: Can't bind to 'spinner' since it isn't a known property of 'spinner'. (" ][spinner]="spinkit.skRotatingPlane"> "): ng:///SuperUserModule/SuperuserComponent.html@176:17 'spinner' is not a known element: 1. If 'spinner' is an Angular component, then verify that it is part of this module. 2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" [ERROR ->] ")

[mpalourdio]

It's likely not an bug, but an integration issue. Please show full integration code so we can see what could be wrong.

[PrabakarKaruppasamy]

The code is given below.

1. app.module.ts

//FOR LOADING ICON

import { NgHttpLoaderModule } from 'ng-http-loader/ng-http-loader.module';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule,
    BrowserAnimationsModule,
      HttpClientModule,
    NgHttpLoaderModule,
    DateTimePickerModule,
    ToastModule.forRoot()
    ],
  declarations: [
    AppComponent,
  ],
  providers: [
    DatePipe,CRUDService,{provide: LocationStrategy, useClass: HashLocationStrategy},{
    provide: HTTP_INTERCEPTORS,
    useClass: AuthInterceptor,
    multi: true
  }
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {
  constructor(router: Router) {
    console.log('Routes: ', JSON.stringify(router.config, undefined, 2));
  }
}

2. app.component.ts

import {Component, ViewContainerRef} from '@angular/core';
import {ToastsManager, Toast} from 'ng2-toastr';
import { Spinkit } from 'ng-http-loader/spinkits'; 

@Component({
  selector: 'app-root',
  template: `
    <router-outlet></router-outlet>
  `
})
export class AppComponent {
    public spinkit = Spinkit;
     constructor(private toastr: ToastsManager, vRef: ViewContainerRef) {
    this.toastr.setRootViewContainerRef(vRef);
  } 
}

3. app-routing.module.ts

import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { PageNotFoundComponent }    from './not-found.component';

import { CanDeactivateGuard }       from './can-deactivate-guard.service';
import { AuthGuard }                from './auth-guard.service';
import { SelectivePreloadingStrategy } from './selective-preloading-strategy';

const appRoutes: Routes = [

  {
    path: 'admin',
    loadChildren: 'app/admin/admin.module#AdminModule',
    canLoad: [AuthGuard]
  },
  {
    path: 'superuser',
    loadChildren: 'app/superuser/superuser.module#SuperUserModule',
    canLoad: [AuthGuard]
    },
  { path: '',   redirectTo: '/login', pathMatch: 'full' },
  { path: '**', component: PageNotFoundComponent }
];

@NgModule({
  imports: [
    RouterModule.forRoot(
      appRoutes,
      {
        enableTracing: true, // <-- debugging purposes only
        preloadingStrategy: SelectivePreloadingStrategy,

      }
    )
  ],
  exports: [
    RouterModule
  ],
  providers: [
    CanDeactivateGuard,
    SelectivePreloadingStrategy
  ]
})
export class AppRoutingModule { }

4. superuser.component.ts

import { Component,ViewContainerRef  } from '@angular/core';

import * as $ from 'jquery';

import {AuthService} from '../auth.service';
import { ToastsManager } from 'ng2-toastr/ng2-toastr';

import { Spinkit } from 'ng-http-loader/spinkits'; 

@Component({
    templateUrl:'./superuser.component.html',
    styleUrls: ['./superuser.component.css']
})
export class SuperuserComponent {

    private settingsMenuFlag:boolean = true;
    collapsed_var:boolean = false;
    opendPanel:boolean = false;
    currentUser : any ;

    constructor(public auth:AuthService,private toastr: ToastsManager, 
        private _vcr: ViewContainerRef)
    {
        this.toastr.setRootViewContainerRef(_vcr);
        this.currentUser = JSON.parse(localStorage.getItem('currentUser'));
    }
}

5. superuser.component.html

<div class="main-content">
        <!-- <spinner [spinner]="spinkit.skRotatingPlane"></spinner> -->
    <router-outlet></router-outlet>
</div>

6. superuser.module.ts

import { NgModule }       from '@angular/core';
import { CommonModule }   from '@angular/common';

import { SuperuserComponent }           from './superuser.component';
import { SuperuserDashboardComponent }  from './superuser-dashboard.component';

import { SuperuserRoutingModule }       from './superuser-routing.module';

import {ReactorComponent} from './reactor/reactor.component';

import { McBreadcrumbsModule } from 'ngx-breadcrumbs';

@NgModule({
  imports: [
    CommonModule,
    SuperuserRoutingModule,
    McBreadcrumbsModule.forRoot()
    ],
  declarations: [
    SuperuserComponent,
    SuperuserDashboardComponent,
    ReactorComponent
  ],
   providers: [ ]
})
export class SuperUserModule {}

7. superuser-routing.module.ts

import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { SuperuserComponent }           from './superuser.component';
import { SuperuserDashboardComponent }  from './superuser-dashboard.component';
import { AuthGuard } from '../auth-guard.service';
import {ReactorComponent} from './reactor/reactor.component';

const superuserRoutes: Routes = [
  {
    path: '',
    component: SuperuserComponent,
    canActivate: [AuthGuard],
  }
];

@NgModule({
  imports: [
    RouterModule.forChild(superuserRoutes)
  ],
  exports: [
    RouterModule
  ]
})
export class SuperuserRoutingModule {}

Please let me know if u need any info.

[mpalourdio]

public spinkit = Spinkit; should be in superuser.component.ts, not in app.component.ts, as the spinner tag is in superuser.component.html

Also, I think NgHttpLoaderModule should be declared in superuser.module.ts, not in your main module as you NEVER import SuperUserModule in your main application module

[PrabakarKaruppasamy]

Tried. The error was gone now but the spinner is not showing. Thanks.

[mpalourdio]

That's because the interceptor is not registered at the same place than the module IMO. You should declare NgHttpLoaderModule at the same level than your HttpClientModule

Also make sure to perform http requests with The HttpClientModule API.

[PrabakarKaruppasamy]

it is need import { HttpClientModule,HTTP_INTERCEPTORS } from '@angular/common/http'; in SuperUserModule is it?

[mpalourdio]

Not at all. Put everything in your main module, and all will be ok. You over-complicate things IMO.

Closing as it's definitely an integration issue, and I don't have much time to provide integration support.

[PrabakarKaruppasamy]

Ok Thanks for your valuable time.