Question

将基本提供程序注入空白离子项目的主页组件时出现以下错误：

columnNumber: 19752
fileName: "http://localhost:8100/build/polyfills.js"
lineNumber: 3
message: "Uncaught (in promise): Error: StaticInjectorError[TestProvider]: \n  StaticInjectorError[TestProvider]: \n    NullInjectorError: No provider for TestProvider!\n_NullInjector.prototype.get@http://localhost:8100/build/vendor.js:1276:19\nresolveToken@http://localhost:8100/build/vendor.js:1564:17\ntryResolveToken@http://localhost:8100/build/vendor.js:1506:16\nStaticInjector.prototype.get@http://localhost:8100/build/vendor.js:1377:20\nresolveToken@http://localhost:8100/build/vendor.js:1564:17\ntryResolveToken@http://localhost:8100/build/vendor.js:1506:16\nStaticInjector.prototype.get@http://localhost:8100/build/vendor.js:1377:20\nresolveNgModuleDep@http://localhost:8100/build/vendor.js:10938:12\nNgModuleRef_.prototype.get@http://localhost:8100/build/vendor.js:12159:16\nresolveDep@http://localhost:8100/build/vendor.js:12655:12\ncreateClass@http://localhost:8100/build/vendor.js:12519:85\ncreateDirectiveInstance@http://localhost:8100/build/vendor.js:12364:37\ncreateViewNodes@http://localhost:8100/build/vendor.js:13802:53\ncreateRootView@http://localhost:8100/build/vendor.js:13692:5\ncallWithDebugContext@http://localhost:8100/build/vendor.js:15093:39\ndebugCreateRootView@http://localhost:8100/build/vendor.js:14394:12\nComponentFactory_.prototype.create@http://localhost:8100/build/vendor.js:11313:37\nComponentFactoryBoundToModule.prototype.create@http://localhost:8100/build/vendor.js:4275:16\nNavControllerBase.prototype._viewInit@http://localhost:8100/build/vendor.js:48293:27\nNavControllerBase.prototype._nextTrns/<@http://localhost:8100/build/vendor.js:48106:17\nF</l</t.prototype.invoke@http://localhost:8100/build/polyfills.js:3:14974\nonInvoke@http://localhost:8100/build/vendor.js:4982:24\nF</l</t.prototype.invoke@http://localhost:8100/build/polyfills.js:3:14901\nF</c</r.prototype.run@http://localhost:8100/build/polyfills.js:3:10124\nf/<@http://localhost:8100/build/polyfills.js:3:20240\nF</l</t.prototype.invokeTask@http://localhost:8100/build/polyfills.js:3:15649\nonInvokeTask@http://localhost:8100/build/vendor.js:4973:24\nF</l</t.prototype.invokeTask@http://localhost:8100/build/polyfills.js:3:15562\nF</c</r.prototype.runTask@http://localhost:8100/build/polyfills.js:3:10815\no@http://localhost:8100/build/polyfills.js:3:7887\n"
promise: Object { __zone_symbol__state: 0, __zone_symbol__value: Error }
rejection: Error: StaticInjectorError[TestProvider]: 
  StaticInjectorError[TestProvider]: 
    NullInjectorError: No provider for TestProvider!
Stack trace:
_NullInjector.prototype.get@http://localhost:8100/build/vendor.js:1276:19
resolveToken@http://localhost:8100/build/vendor.js:1564:17
tryResolveToken@http://localhost:8100/build/vendor.js:1506:16
StaticInjector.prototype.get@http://localhost:8100/build/vendor.js:1377:20
resolveToken@http://localhost:8100/build/vendor.js:1564:17
tryResolveToken@http://localhost:8100/build/vendor.js:1506:16
StaticInjector.prototype.get@http://localhost:8100/build/vendor.js:1377:20
resolveNgModuleDep@http://localhost:8100/build/vendor.js:10938:12
NgModuleRef_.prototype.get@http://localhost:8100/build/vendor.js:12159:16
resolveDep@http://localhost:8100/build/vendor.js:12655:12
createClass@http://localhost:8100/build/vendor.js:12519:85
createDirectiveInstance@http://localhost:8100/build/vendor.js:12364:37
createViewNodes@http://localhost:8100/build/vendor.js:13802:53
createRootView@http://localhost:8100/build/vendor.js:13692:5
callWithDebugContext@http://localhost:8100/build/vendor.js:15093:39
debugCreateRootView@http://localhost:8100/build/vendor.js:14394:12
ComponentFactory_.prototype.create@http://localhost:8100/build/vendor.js:11313:37
ComponentFactoryBoundToModule.prototype.create@http://localhost:8100/build/vendor.js:4275:16
NavControllerBase.prototype._viewInit@http://localhost:8100/build/vendor.js:48293:27
NavControllerBase.prototype._nextTrns/<@http://localhost:8100/build/vendor.js:48106:17
F</l</t.prototype.invoke@http://localhost:8100/build/polyfills.js:3:14974
onInvoke@http://localhost:8100/build/vendor.js:4982:24
F</l</t.prototype.invoke@http://localhost:8100/build/polyfills.js:3:14901
F</c</r.prototype.run@http://localhost:8100/build/polyfills.js:3:10124
f/<@http://localhost:8100/build/polyfills.js:3:20240
F</l</t.prototype.invokeTask@http://localhost:8100/build/polyfills.js:3:15649
onInvokeTask@http://localhost:8100/build/vendor.js:4973:24
F</l</t.prototype.invokeTask@http://localhost:8100/build/polyfills.js:3:15562
F</c</r.prototype.runTask@http://localhost:8100/build/polyfills.js:3:10815
o@http://localhost:8100/build/polyfills.js:3:7887
stack: "c@http://localhost:8100/build/polyfills.js:3:19752\nu/<@http://localhost:8100/build/polyfills.js:3:19174\nNavControllerBase.prototype._fireError@http://localhost:8100/build/vendor.js:48075:13\nNavControllerBase.prototype._failed@http://localhost:8100/build/vendor.js:48068:9\nNavControllerBase.prototype._nextTrns/<@http://localhost:8100/build/vendor.js:48115:53\nF</l</t.prototype.invoke@http://localhost:8100/build/polyfills.js:3:14974\nonInvoke@http://localhost:8100/build/vendor.js:4982:24\nF</l</t.prototype.invoke@http://localhost:8100/build/polyfills.js:3:14901\nF</c</r.prototype.run@http://localhost:8100/build/polyfills.js:3:10124\nf/<@http://localhost:8100/build/polyfills.js:3:20240\nF</l</t.prototype.invokeTask@http://localhost:8100/build/polyfills.js:3:15649\nonInvokeTask@http://localhost:8100/build/vendor.js:4973:24\nF</l</t.prototype.invokeTask@http://localhost:8100/build/polyfills.js:3:15562\nF</c</r.prototype.runTask@http://localhost:8100/build/polyfills.js:3:10815\no@http://localhost:8100/build/polyfills.js:3:7887\n"
task: Object { runCount: 0, _state: "notScheduled", type: "microTask", … }
zone: Object { _properties: {…}, _parent: {…}, _name: "angular", … }
__proto__: Object { … }

重现的步骤：

创建测试项目。 ionic start TestProject blank
添加测试提供程序。 ionic generate provider TestProvider。该提供程序将添加到app.module中的提供程序列表中。
通过导入TestProvider并注入构造函数，将提供程序注入主页组件。
有时会发生错误;有时它没有。如果没有，请创建另一个提供程序并重复该过程，直到发生错误。

有一次，我创建了三个独立的测试提供程序，这些提供程序具有相同的复制/粘贴代码;其中一个工作一致，但另外两个产生了StaticInjectorError。

TestProject / SRC /应用程序/ app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { TestProvider } from '../providers/test/test';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    TestProvider
  ]
})
export class AppModule {}

TestProject / SRC /页/家/ home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { TestProvider } from '../../providers/test/test';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController, public test: TestProvider ) {
  }
}

TestProject / SRC /提供商/测试/ test.js

import { Injectable } from '@angular/core';

@Injectable()
export class TestProvider {

  constructor() {
    console.log('Hello TestProvider Provider');
  }
}

的package.json

{
  "name": "ProviderNamingBug",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "5.0.3",
    "@angular/compiler": "5.0.3",
    "@angular/compiler-cli": "5.0.3",
    "@angular/core": "5.0.3",
    "@angular/forms": "5.0.3",
    "@angular/http": "5.0.3",
    "@angular/platform-browser": "5.0.3",
    "@angular/platform-browser-dynamic": "5.0.3",
    "@ionic-native/core": "4.4.0",
    "@ionic-native/splash-screen": "4.4.0",
    "@ionic-native/status-bar": "4.4.0",
    "@ionic/storage": "2.1.3",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "rxjs": "5.5.2",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.18"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.1.8",
    "typescript": "2.4.2"
  },
  "description": "An Ionic project"
}

我在Windows 10上运行，Node.js版本为8.9.4，npm版本为5.6.0。

非常感谢任何帮助。

将简单提供程序添加到空白离子项目并注入组件时的StaticInjectorError

0 个答案: