Question

此刻我正在学习Angular，并且尝试使用ng2-slim-loading-bar，但出现此错误-

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).

我显然缺少了一些东西。

我正在使用Angular 8。我用-npm install ng2-slim-loading-bar --save

安装了ng2-slim-load-bar

我还使用了npm install rxjs-compat --save

然后我将SlimLoadingBarModule导入了app.module.ts文件中-

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 { }

，然后在src >> styles.css文件中包含该库随附的样式-

@import "../node_modules/ng2-slim-loading-bar/style.css";

，然后在app.component.ts中-

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();  
    }  
  } 
}

如果有任何帮助或建议，将不胜感激。

Answer 1

尝试在角度cli上安装npm。

它将安装所有缺少的模块

slim-loading-bar错误-找不到模块'@ angular / core'

1 个答案: