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

【问题标题】：slim-loading-bar error - Cannot find module '@angular/core'slim-loading-bar 错误 - 找不到模块'@angular/core'
【发布时间】：2022-01-29 11:39:16
【问题描述】：

我现在正在学习 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。我安装了 ng2-slim-load-bar -npm install ng2-slim-loading-bar --save

我也用过npm install rxjs-compat --save

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

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

如果可能的话，将不胜感激任何帮助或建议。

【问题讨论】：

标签： css angular typescript

【解决方案1】：

在你的 Angular cli 上尝试 npm install。

它将安装所有缺少的模块

【讨论】：

嘿 Moye Anthonia，谢谢你提出这个建议。我试过了，但我仍然收到错误消息:(

【解决方案2】：

在您的应用程序组件的模板中添加标签。

SlimLoadingBarModule.forRoot()

.forRoot() 很重要。

以上对我有用。

【讨论】：