when I run "npm run start" I get this error in the browser's console:
Unhandled Promise rejection: (SystemJS) Can't resolve all parameters for RestClientService: (?). Error: Can't resolve all parameters for RestClientService: (?).
Here is the relevant code from that class:
import { Http } from "@angular/http";
import { Injectable } from "@angular/core";
import { Observable } from "rxjs/Observable";
import { extractData, handleError } from "./helpers";
import { Notification, Slide, Spot } from "./models";
import "./rxjs-operators";
@Injectable()
export class RestClientService {
constructor (private http: Http) {}
// methods in the class
}
I tried the solution here: Angular 2 HTTP "Cannot resolve all parameters for 'AppService'"
At that point, my RestClientService had a constructor that looked like this:
constructor (@Inject(Http) private http: Http) {}
So that DID help get rid of the error for that class, however now pretty much all my other classes are having the same problem.
HOW CAN I AVOID HAVING TO USE @Inject EVERYWHERE?
Here's what I hope is relevant:
package.json:
{
"name": "my broken app",
"version": "1.0.1",
"scripts": {
"start": "tsc && concurrently \"tsc -w\" \"lite-server\" \"npm run generate-css\" \"npm run watch-css\" ",
"pree2e": "npm run webdriver:update",
"e2e": "tsc && concurrently \"http-server -s\" \"protractor protractor.config.js\" --kill-others --success first",
"lint": "tslint ./app/**/*.ts -t verbose",
"generate-css": "node-sass -r app --output ./generated-css",
"watch-css": "node-sass -w -r app --output ./generated-css",
"lite": "lite-server",
"test": "tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\"",
"test-once": "tsc && karma start karma.conf.js --single-run",
"tsc": "tsc",
"tsc:w": "tsc -w"
},
"license": "",
"author": "me",
"dependencies": {
"@angular/common": "~2.3.0",
"@angular/compiler": "~2.3.0",
"@angular/core": "~2.3.0",
"@angular/forms": "~2.3.0",
"@angular/http": "~2.3.0",
"@angular/platform-browser": "~2.3.0",
"@angular/platform-browser-dynamic": "~2.3.0",
"@angular/router": "~3.3.0",
"angular-in-memory-web-api": "~0.2.0",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"lodash": "^4.17.2",
"mydatepicker": "0.0.36",
"ng2-translate": "^4.2.0",
"reflect-metadata": "^0.1.8",
"rxjs": "5.0.0-rc.4",
"socket.io": "^1.4.8",
"socket.io-client": "^1.4.8",
"systemjs": "0.19.40",
"zone.js": "^0.7.2"
},
"devDependencies": {
"@types/core-js": "^0.9.35",
"@types/jasmine": "^2.5.38",
"@types/lodash": "^4.14.43",
"@types/node": "^6.0.46",
"@types/selenium-webdriver": "^2.53.33",
"canonical-path": "0.0.2",
"codelyzer": "0.0.25",
"concurrently": "^3.1.0",
"http-server": "^0.9.0",
"jasmine-core": "~2.5.2",
"karma": "^1.3.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-htmlfile-reporter": "^0.3.4",
"karma-jasmine": "^1.0.2",
"karma-jasmine-html-reporter": "^0.2.2",
"lite-server": "^2.2.2",
"live-server": "^1.0.0",
"lodash": "^4.16.2",
"node-sass": "^3.10.1",
"nodemon": "^1.11.0",
"protractor": "^3.3.0",
"rimraf": "^2.5.4",
"tslint": "^3.15.1",
"typescript": "~2.0.10"
}
}
tsconfig.json:
{
"compilerOptions": {
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"mapRoot": "./",
"module": "commonjs",
"moduleResolution": "node",
"lib": [ "es2015", "dom" ],
"noEmitOnError": true,
"noImplicitAny": false,
"outDir": "../dist/out-tsc",
"sourceMap": true,
"target": "es5",
"suppressImplicitAnyIndexErrors": true,
"typeRoots": [
"../node_modules/@types"
]
},
"exclude": [
"node_modules",
"dist"
]
}
systemjs.config.js
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
// angular bundles
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
'ng2-translate': 'npm:ng2-translate/bundles',
'lodash': 'npm:lodash',
'socket.io-client': 'npm:socket.io-client/socket.io.js',
'mydatepicker': 'npm:mydatepicker'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
},
'ng2-translate': {
main: 'ng2-translate',
defaultExtension: 'umd.js'
},
'socket.io-client': {
defaultExtension: 'js'
},
'mydatepicker': {
main: './dist/index.js',
defaultExtension: 'js'
},
lodash: {
main: './index.js',
defaultExtension: 'js'
}
}
});
})(this);
app.module.ts:
import { BrowserModule } from "@angular/platform-browser";
import { CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { HttpModule } from "@angular/http";
import { NgModule } from "@angular/core";
import { DashboardComponent } from "./components/dashboard/dashboard.component";
import { AcquisitionComponent } from "./components/acquisition/acquisition.component";
import { AlarmsAlertsService } from "./shared/notification-manager.service";
import { AuditService, Logger } from "./shared/log.service";
import { AuthGuard } from "./shared/auth-guard.service";
import { AuthService } from "./shared/auth.service";
import { ConfigurationComponent } from "./components/configuration/configuration.component";
import { ConfirmService } from "./shared/confirm/confirm.service";
import { PopOverComponent } from "./shared/pop-over/pop-over.component";
import { InstrumentStatusService } from "./shared/notification-manager.service";
import { LoginComponent } from "./components/login/login.component";
import { ReportsComponent } from "./components/reports/reports.component";
import { routing } from "./app.routing";
import { MyDatePickerModule } from "mydatepicker/dist/my-date-picker.module";
import { MyDatePicker } from "./shared/date-picker/my-date-picker.component";
import { RestClientService } from "./shared/rest-client.service";
import { SearchComponent } from "./components/search/search.component";
import { SupervisionComponent } from "./components/supervision/supervision.component";
import { TranslateModule } from "ng2-translate";
import { HelpComponent } from "./components/help/help.component";
import { ConfirmComponent } from "./shared/confirm/confirm.component";
import { InteractiveSlideComponent } from "./components/interactive-slide/interactive-slide.component";
import { SlidesTableComponent } from "./components/slides-table/slides-table.component";
import { SoundBarComponent } from "./components/sound-bar/sound-bar.component";
import { VolumeControlComponent } from "./components/volume-control/volume-control.component";
import { SortArrowsComponent } from "./components/sort-arrows/sort-arrows.component";
import { NotificationsTableComponent } from "./components/notifications-table/notifications-table.component";
import { StatusIndicatorComponent } from "./components/status-indicator/component-status-indicator.component";
import { TabComponent } from "./components/tab/tab.component";
import { TabsComponent } from "./components/tabs/tabs.component";
@NgModule({
imports: [
BrowserModule,
FormsModule,
HttpModule,
MyDatePickerModule,
routing,
TranslateModule.forRoot()
],
providers: [
AuditService,
AlarmsAlertsService,
AuthGuard,
AuthService,
ConfirmService,
InstrumentStatusService,
Logger,
RestClientService
],
entryComponents: [
AcquisitionComponent,
ConfigurationComponent,
LoginComponent,
ReportsComponent,
SearchComponent,
SupervisionComponent
],
declarations: [
AcquisitionComponent,
ConfigurationComponent,
ConfirmComponent,
MyDatePicker,
PopOverComponent,
DashboardComponent,
HelpComponent,
InteractiveSlideComponent,
LoginComponent,
NotificationsTableComponent,
ReportsComponent,
SearchComponent,
SlidesTableComponent,
SortArrowsComponent,
SoundBarComponent,
StatusIndicatorComponent,
SupervisionComponent,
TabComponent,
TabsComponent,
VolumeControlComponent
],
bootstrap: [ DashboardComponent ],
schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class AppModule {}
And here is an example of the RestClientService in use:
import { Injectable } from "@angular/core";
import { Observable } from "rxjs/Observable";
import { RestClientService } from "./rest-client.service";
import { Slide, Spot } from "./models";
import { AuthService } from "./auth.service";
import * as _ from "lodash";
@Injectable()
export class DataManagerService {
sysInfo;
dataHandle: Observable<any>;
errorMessage;
sysInfoArray = [];
currentlySelectedSlide: Slide = null;
currentSlides: Slide[];
foundSlides: Observable<Slide[]>;
currentExports: Object[];
foundExports: Observable<Object[]>;
currentSpotImages: Object[];
foundSpotImages: Observable<Object[]>;
removeExportCall: Observable<any>;
constructor(private rest: RestClientService, private authService: AuthService) {}
initSysInfo() {
// get and process the current alarms from the database
this.dataHandle = this.rest.getSysInfo();
this.dataHandle.subscribe(
data => {
this.sysInfo = data;
},
error => this.errorMessage = <any>error);
}
// more code here
}
Please let me know if you need to see any other files. Clearly, I'm not sure where the problem might be.