angular - 尝试实现 Spinner 时出现异常
问题描述
我正在按照https://www.npmjs.com/package/ngx-spinner上的说明在我的应用程序中实现微调器,但显然我做错了。
这是我的打字稿模块。一切正常,但是即使我在 ngOnInit 中显示它并将其隐藏在 getFacilities 的回调中,我也没有看到任何微调器。(我知道这些方法正在执行,因为我正在将数据显示到页面上。)
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { NgxSpinnerService } from "ngx-spinner";
import { Portfolio} from '../models/Portfolio';
import { Facility } from '../models/Facility';
import 'rxjs/add/operator/map';
@Component({
selector: 'app-member-component',
templateUrl: './member.component.html'
})
export class MemberComponent {
constructor(private http: HttpClient, private spinner: NgxSpinnerService ) { }
public SelectedPortfolio: Portfolio = new Portfolio;
public Portfolios: Portfolio[] = [] ;
public SelectedFacility: Facility = new Facility;
public Facilities: Facility[] = [];
public UILock: boolean;
ngOnInit() {
// call the method on initial load of page to bind dropdown
this.spinner.show();
this.UILock = true;
this.SelectedPortfolio.name = "Select Portfolio";
this.SelectedPortfolio.id = 0;
this.SelectedFacility.name = "<No Portfolio Selected>";
this.SelectedFacility.id = 0;
this.getPortfolios();
}
public selectPortfolio(portfolio: Portfolio) {
this.SelectedPortfolio = portfolio;
this.getFacilities();
}
public selectFacility(facility: Facility) {
this.SelectedFacility = facility;
}
private getPortfolios() {
this.UILock = true;
this.http.get<Portfolio[]>('https://localhost:44319/api/portfolio').subscribe((portfolios: Portfolio[]): void =>
{
this.Portfolios = portfolios;
this.selectPortfolio(portfolios[0]);
}
);
}
private getFacilities() {
this.http.get<Portfolio[]>('https://localhost:44319/api/portfolio/' + this.SelectedPortfolio.id).subscribe((facilities: Facility[]): void =>
{
this.Facilities = facilities;
this.selectFacility(facilities[0]);
this.UILock = false;
this.spinner.hide();
}
);
}
}
一旦我将以下内容添加到我的 html 模板中,所有的地狱都会崩溃。
<ngx-spinner bdColor="rgba(51,51,51,0.8)"
size="medium"
color="#fff"
type="ball-scale-multiple">
<p style="font-size: 20px; color: white">Loading...</p>
</ngx-spinner>
该页面未加载,我看到以下异常:
ERROR Error: Uncaught (in promise): NullInjectorError: StaticInjectorError(AppModule)[NgxSpinnerComponent -> ChangeDetectorRef]:
StaticInjectorError(Platform: core)[NgxSpinnerComponent -> ChangeDetectorRef]:
NullInjectorError: No provider for ChangeDetectorRef!
NullInjectorError: StaticInjectorError(AppModule)[NgxSpinnerComponent -> ChangeDetectorRef]:
StaticInjectorError(Platform: core)[NgxSpinnerComponent -> ChangeDetectorRef]:
NullInjectorError: No provider for ChangeDetectorRef!
at NullInjector.get (core.js:1354)
at resolveToken (core.js:1681)
at tryResolveToken (core.js:1607)
at StaticInjector.get (core.js:1470)
at resolveToken (core.js:1681)
at tryResolveToken (core.js:1607)
at StaticInjector.get (core.js:1470)
at resolveNgModuleDep (core.js:23104)
at NgModuleRef_.get (core.js:24192)
at resolveDep (core.js:24722)
at resolvePromise (zone-evergreen.js:797)
at resolvePromise (zone-evergreen.js:754)
at zone-evergreen.js:858
at ZoneDelegate.invokeTask (zone-evergreen.js:391)
at Object.onInvokeTask (core.js:30873)
at ZoneDelegate.invokeTask (zone-evergreen.js:390)
at Zone.runTask (zone-evergreen.js:168)
at drainMicroTaskQueue (zone-evergreen.js:559)
这是我的 app.module.ts:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { RouterModule } from '@angular/router';
import { NgxSpinnerModule } from "ngx-spinner";
import { AppComponent } from './app.component';
import { NavMenuComponent } from './nav-menu/nav-menu.component';
import { HomeComponent } from './home/home.component';
import { ApiAuthorizationModule } from 'src/api-authorization/api-authorization.module';
import { AuthorizeGuard } from 'src/api-authorization/authorize.guard';
import { AuthorizeInterceptor } from 'src/api-authorization/authorize.interceptor';
import { MemberComponent } from './member/member.component';
@NgModule({
declarations: [
AppComponent,
NavMenuComponent,
HomeComponent,
MemberComponent,
],
imports: [
BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
HttpClientModule,
FormsModule,
ApiAuthorizationModule,
NgxSpinnerModule,
RouterModule.forRoot([
{ path: '', component: HomeComponent, pathMatch: 'full' },
{ path: 'member', component: MemberComponent, canActivate: [AuthorizeGuard] },
])
],
providers: [
{ provide: HTTP_INTERCEPTORS, useClass: AuthorizeInterceptor, multi: true }
],
bootstrap: [AppComponent]
})
export class AppModule { }
感谢您的意见!
也许我的 package.json 是相关的?
{
"name": "cashflow",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"build:ssr": "ng run Cashflow:server:dev",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "8.0.0",
"@angular/common": "8.0.0",
"@angular/compiler": "8.0.0",
"@angular/core": "8.0.0",
"@angular/forms": "8.0.0",
"@angular/platform-browser": "8.0.0",
"@angular/platform-browser-dynamic": "8.0.0",
"@angular/platform-server": "8.0.0",
"@angular/router": "8.0.0",
"@nguniversal/module-map-ngfactory-loader": "8.0.0-rc.1",
"aspnet-prerendering": "^3.0.1",
"bootstrap": "^4.3.1",
"core-js": "^2.6.5",
"jquery": "3.4.1",
"oidc-client": "^1.9.0",
"popper.js": "^1.14.3",
"rxjs": "^6.4.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.800.6",
"@angular/cli": "8.0.6",
"@angular/compiler-cli": "8.0.0",
"@angular/language-service": "8.0.0",
"@types/jasmine": "~3.3.9",
"@types/jasminewd2": "~2.0.6",
"@types/node": "~11.10.5",
"codelyzer": "^5.0.1",
"jasmine-core": "~3.3.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "^4.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.5",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"typescript": "3.4.5"
},
"optionalDependencies": {
"node-sass": "^4.9.3",
"protractor": "~5.4.0",
"ts-node": "~5.0.1",
"tslint": "~5.9.1"
}
}
解决方案
问题是,我在项目中有两个node_modules文件夹。一个在正确的位置,在ClientApp中(这是 Angular 应用程序“存在”的地方),另一个在 Web 应用程序的根目录(错误!)。显然发生了冲突。
我现在明白,在构建这样的应用程序时,我实际上是在构建两个应用程序——一个在服务器上(用 C# 编写),一个在客户端(Angular / Typescript)。Visual Studio 提供了一个统一的编辑器环境,我们可以在其中同时处理两个应用程序,但它仍然是两个独立的应用程序。最初,在我真正知道自己在做什么之前,我通过 Visual Studio 控制台窗口安装了我的 Angular 模块,但我没有意识到在安装任何包之前手动设置文件夹位置 ( cd ClientApp ) 很重要,否则它将结束在错误的位置。这是我为清理它所做的工作:
- 从项目根目录中删除了流氓package.json、package-lock.json、angular.json 。
- 卸载Dependencies/NPM下列出的所有 Angular 包
- 从项目根目录中删除了 node_modules文件夹
- 在ClientApp文件夹中运行npm update 。
现在一切正常!我什至不必更改一行代码。
推荐阅读
- django - DRF - 删除对象后如何“更新”pk?
- java - RESTful Web 应用程序中映射 servlet 的问题
- c# - 如何将 lambda 表达式作为参数插入 mongodb 'collection.find' 方法?
- javascript - 为什么我的 forloop 只运行一次 if 语句?
- python - 如何将 ndarray 对象列表中的二进制值转换为十进制值?
- python - 图表未在 Web 浏览器中显示 | 剧情 | Python
- php - Yii2 控制器发布请求为 NULL
- javascript - 变量更改时如何更新异步等待功能?
- node.js - Nestjs 扩展/组合装饰器?
- java - maven-jar-plugin:如何为测试创建不同的工件名称?