I am currently learning Angular and attempting to integrate the ng2-slim-loading-bar. However, I encountered the following error -
ERROR in ../node_modules/ng2-slim-loading-bar/index.d.ts(1,37): error TS2307: Cannot find module '@angular/core'.
../node_modules/ng2-slim-loading-bar/src/slim-loading-bar.component.d.ts(1,24): error TS2307: Cannot find module '@angular/core'.
../node_modules/ng2-slim-loading-bar/src/slim-loading-bar.service.d.ts(1,28): error TS2307: Cannot find module 'rxjs/Observable'.
ERROR in ./src/styles.css (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./src/styles.css)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: Failed to find '../node_modules/ng2-slim-loading-bar/style.css'
in [
/Users/richardwood/Development/Inmate_Intake_App/inmate-intake-app/src
]
at resolveModule.catch.catch (/Users/richardwood/Development/Inmate_Intake_App/inmate-intake-app/node_modules/postcss-import/lib/resolve-id.js:35:13).
It seems like there is something missing.
I am working with Angular 8. I installed ng2-slim-load-bar using -
npm install ng2-slim-loading-bar --saveI also added npm install rxjs-compat --save
Following that, I imported the SlimLoadingBarModule into an app.module.ts file -
import { InmateEditComponent } from './inmate-edit/inmate-edit.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ReactiveFormsModule } from '@angular/forms';
import { SlimLoadingBarModule } from 'ng2-slim-loading-bar';
@NgModule({
declarations: [
AppComponent,
InmateAddComponent,
InmateGetComponent,
InmateEditComponent
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
ReactiveFormsModule,
SlimLoadingBarModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Then, I included the specified styling from the library in the src >> styles.css file -
@import "../node_modules/ng2-slim-loading-bar/style.css";Additionally, in the app.component.ts file -
import { Component } from '@angular/core';
import { SlimLoadingBarService } from 'ng2-slim-loading-bar';
import { NavigationCancel,
Event,
NavigationEnd,
NavigationError,
NavigationStart,
Router } from '@angular/router';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'inmate-intake-app';
constructor(private loadingBar: SlimLoadingBarService, private router: Router) {
this.router.events.subscribe((event: Event) => {
this.navigationInterceptor(event);
});
}
private navigationInterceptor(event: Event): void {
if (event instanceof NavigationStart) {
this.loadingBar.start();
}
if (event instanceof NavigationEnd) {
this.loadingBar.complete();
}
if (event instanceof NavigationCancel) {
this.loadingBar.stop();
}
if (event instanceof NavigationError) {
this.loadingBar.stop();
}
}
}
I would greatly appreciate any assistance or suggestions that can be provided.