我有一个继承自AuthHttpServiceBase的类UserService。 AuthHttpServiceBase有一个构造函数，需要sessionStore，httpClient和configManager - UserService也依赖于authRedirect。所以我有以下设置：
HttpServiceBase：
import { Logger } from '../utils/logger';
import { ConfigurationManager } from '../utils/configuration-manager';
import { Observable } from 'rxjs/Rx';
import { Injectable } from '@angular/core';
import { HttpClient } from "@angular/common/http";
@Injectable()
export abstract class HttpServiceBase {
constructor(protected configManager: ConfigurationManager) {}
protected get authApiUrl(): Observable<string> {
return this.configManager.get('authApiUrl');
}
protected get signingApiUrl(): Observable<string> {
return this.configManager.get('signingApiUrl');
}
protected handleError<T>(methodName: string, err: any, source: Observable<T> = null): Observable<any> {
if (err.error instanceof Error) {
// A client-side or network error occurred.
Logger.error(`API call ${methodName} failed: ${err.error.message}`);
}
else {
// The backend returned an unsuccessful response code. The response body may contain clues as to what went wrong,
Logger.error(`API call ${methodName} failed with status ${err.status}: ${JSON.stringify(err.error)}`);
}
return Observable.throw(err);
}
}
AuthHttpServiceBase：
import { HttpServiceBase } from './http-service-base';
import { Logger } from '../utils/logger';
import { SessionData } from '../security/session-data';
import { SessionStore } from '../persistance/session-store';
import { ConfigurationManager } from '../utils/configuration-manager';
import { Observable, Subject } from 'rxjs/Rx';
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
@Injectable()
export abstract class AuthHttpServiceBase extends HttpServiceBase {
constructor(protected sessionStore: SessionStore, protected httpClient: HttpClient, protected configManager: ConfigurationManager) {
super(configManager)
}
// Base class implementation...
}
UserService：
import { AuthRedirect } from '../security/auth-redirect';
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { User } from '../entities/user';
import { ConfigurationManager } from '../utils/configuration-manager';
import { Observable } from 'rxjs/Rx';
import { SessionStore } from '../persistance/session-store';
import { AuthHttpServiceBase } from '../http/auth-http-service-base';
@Injectable()
export class UserService extends AuthHttpServiceBase {
constructor(private authRedirect: AuthRedirect, sessionStore: SessionStore, httpClient: HttpClient, configManager: ConfigurationManager) {
super(sessionStore, httpClient, configManager);
}
// UserService implementation...
}
使用JIT编译（使用Angular 4.3 + Webpack）在dev中运行良好，但在AOT编译期间我收到以下错误：
TS2417：类静态端＆＃39;类型的UserService＆＃39;错误地扩展了基类静态端＆＃39; typeof AuthHttpServiceBase＆＃39;。财产类型＆ctorParameters＆＃39;是不相容的。
我对这里发生的事情感到有些不知所措 - 当然必须能够在子类构造函数中定义其他依赖项吗？
的package.json：
{
"name": "angular-starter",
"version": "6.0.0",
"description": "An Angular Webpack Starter kit featuring Angular (Router, Http, Forms, Services, Tests, E2E, Coverage), Karma, Protractor, Jasmine, Istanbul, TypeScript, and Webpack by AngularClass",
"keywords": [
"angular",
"angular2",
"angular4",
"webpack",
"typescript"
],
"author": "Patrick Stapleton <patrick@angularclass.com>",
"homepage": "https://github.com/AngularClass/angular-starter",
"license": "MIT",
"scripts": {
"build:aot:prod": "npm run clean:dist && npm run clean:aot && cross-env BUILD_AOT=1 npm run webpack -- --config config/webpack.prod.js --progress --profile --bail",
"build:aot": "npm run build:aot:prod",
"build:dev": "npm run clean:dist && npm run webpack -- --config config/webpack.dev.js --progress --profile",
"build:docker": "npm run build:prod && docker build -t angular2-webpack-start:latest .",
"build:prod": "npm run clean:dist && npm run webpack -- --config config/webpack.prod.js --progress --profile --bail",
"build": "npm run build:dev",
"ci:aot": "npm run lint && npm run test && npm run build:aot && npm run e2e",
"ci:jit": "npm run lint && npm run test && npm run build:prod && npm run e2e",
"ci:nobuild": "npm run lint && npm test && npm run e2e",
"ci:testall": "npm run lint && npm run test && npm run build:prod && npm run e2e && npm run build:aot && npm run e2e",
"ci:travis": "npm run lint && npm run test && npm run build:aot && npm run e2e:travis",
"ci": "npm run ci:testall",
"clean:dll": "npm run rimraf -- dll",
"clean:aot": "npm run rimraf -- compiled",
"clean:dist": "npm run rimraf -- dist",
"clean:install": "npm set progress=false && npm install",
"clean": "npm cache clean --force && npm run rimraf -- node_modules doc coverage dist compiled dll",
"docker": "docker",
"docs": "npm run typedoc -- --options typedoc.json --exclude '**/*.spec.ts' ./src/",
"e2e:live": "npm-run-all -p -r server:prod:ci protractor:live",
"e2e:travis": "npm-run-all -p -r server:prod:ci protractor:delay",
"e2e": "npm-run-all -p -r server:prod:ci protractor",
"github-deploy:dev": "npm run webpack -- --config config/webpack.github-deploy.js --progress --profile --env.githubDev",
"github-deploy:prod": "npm run webpack -- --config config/webpack.github-deploy.js --progress --profile --env.githubProd",
"github-deploy": "npm run github-deploy:dev",
"lint": "npm run tslint \"src/**/*.ts\"",
"node": "node",
"postinstall": "npm run webdriver:update",
"postversion": "git push && git push --tags",
"preclean:install": "npm run clean",
"preversion": "npm test",
"protractor": "protractor",
"protractor:delay": "sleep 3 && npm run protractor",
"protractor:live": "protractor --elementExplorer",
"rimraf": "rimraf",
"server:dev:hmr": "npm run server:dev -- --inline --hot",
"server:dev": "npm run webpack-dev-server -- --config config/webpack.dev.js --open --progress --profile --watch --content-base src/",
"server:prod": "http-server dist -c-1 --cors",
"server:prod:ci": "http-server dist -p 3000 -c-1 --cors",
"server": "npm run server:dev",
"start:hmr": "npm run server:dev:hmr",
"start": "npm run server:dev",
"test": "npm run lint && karma start",
"tslint": "tslint",
"typedoc": "typedoc",
"version": "npm run build",
"watch:dev:hmr": "npm run watch:dev -- --hot",
"watch:dev": "npm run build:dev -- --watch",
"watch:prod": "npm run build:prod -- --watch",
"watch:test": "npm run test -- --auto-watch --no-single-run",
"watch": "npm run watch:dev",
"webdriver-manager": "webdriver-manager",
"webdriver:start": "npm run webdriver-manager start",
"webdriver:update": "webdriver-manager update",
"webpack-dev-server": "node --max_old_space_size=4096 node_modules/webpack-dev-server/bin/webpack-dev-server.js",
"webpack": "node --max_old_space_size=4096 node_modules/webpack/bin/webpack.js"
},
"dependencies": {
"@angular/animations": "^4.3.4",
"@angular/cdk": "^2.0.0-beta.8",
"@angular/common": "~4.3.1",
"@angular/compiler": "~4.3.1",
"@angular/core": "~4.3.1",
"@angular/forms": "~4.3.1",
"@angular/http": "~4.3.1",
"@angular/material": "^2.0.0-beta.8",
"@angular/platform-browser": "~4.3.1",
"@angular/platform-browser-dynamic": "~4.3.1",
"@angular/platform-server": "~4.3.1",
"@angular/router": "~4.3.1",
"@angularclass/hmr": "~1.2.2",
"@angularclass/hmr-loader": "^3.0.4",
"core-js": "^2.4.1",
"deepmerge": "^1.5.0",
"fuse.js": "^3.0.5",
"http-server": "^0.9.0",
"ie-shim": "^0.1.0",
"ng2-file-upload": "^1.2.1",
"ng2-webstorage": "^1.8.0",
"reflect-metadata": "^0.1.10",
"rxjs": "~5.0.2",
"zone.js": "0.8.14"
},
"devDependencies": {
"@angular/compiler-cli": "~4.3.1",
"@types/hammerjs": "^2.0.34",
"@types/jasmine": "2.5.45",
"@types/node": "^7.0.39",
"@types/source-map": "^0.5.0",
"@types/uglify-js": "^2.6.28",
"@types/webpack": "^2.2.16",
"@types/fuse": "^2.5.2",
"add-asset-html-webpack-plugin": "^1.0.2",
"angular2-template-loader": "^0.6.2",
"assets-webpack-plugin": "^3.5.1",
"awesome-typescript-loader": "~3.1.2",
"codelyzer": "~2.1.1",
"copy-webpack-plugin": "^4.0.1",
"cross-env": "^5.0.0",
"css-loader": "^0.28.0",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^3.1.1",
"gulp-cache": "^0.4.5",
"gulp-concat": "^2.6.1",
"gulp-cssnano": "^2.1.2",
"gulp-rename": "^1.2.2",
"gulp-sass": "^3.1.0",
"gulp-uglify": "^2.0.0",
"exports-loader": "^0.6.4",
"expose-loader": "^0.7.3",
"extract-text-webpack-plugin": "~2.1.0",
"file-loader": "^0.11.1",
"find-root": "^1.0.0",
"gh-pages": "^1.0.0",
"html-webpack-plugin": "^2.28.0",
"imports-loader": "^0.7.1",
"inline-manifest-webpack-plugin": "^3.0.1",
"istanbul-instrumenter-loader": "2.0.0",
"jasmine-core": "^2.5.2",
"karma": "^1.6.0",
"karma-chrome-launcher": "^2.0.0",
"karma-coverage": "^1.1.1",
"karma-jasmine": "^1.1.0",
"karma-mocha-reporter": "^2.2.3",
"karma-remap-coverage": "^0.1.4",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "^2.0.4",
"ng-router-loader": "^2.1.0",
"ngc-webpack": "^3.2.0",
"node-sass": "^4.5.2",
"npm-run-all": "^4.0.2",
"optimize-js-plugin": "0.0.4",
"parse5": "^3.0.2",
"preload-webpack-plugin": "^1.2.2",
"protractor": "^5.1.1",
"raw-loader": "0.5.1",
"rimraf": "~2.6.1",
"sass-loader": "^6.0.3",
"script-ext-html-webpack-plugin": "^1.8.5",
"source-map-loader": "^0.2.1",
"string-replace-loader": "~1.2.0",
"style-loader": "^0.18.1",
"to-string-loader": "^1.1.5",
"ts-node": "^3.3.0",
"tslib": "^1.7.1",
"tslint": "~4.5.1",
"tslint-loader": "^3.5.2",
"typedoc": "^0.7.1",
"typescript": "~2.2.2",
"url-loader": "^0.5.8",
"webpack": "~2.6.1",
"webpack-dev-middleware": "^1.10.1",
"webpack-dev-server": "~2.4.2",
"webpack-dll-bundles-plugin": "^1.0.0-beta.5",
"webpack-merge": "~4.1.0"
},
"repository": {
"type": "git",
"url": "https://github.com/AngularClass/angular-starter.git"
},
"bugs": {
"url": "https://github.com/AngularClass/angular-starter/issues"
},
"engines": {
"node": ">= 4.2.1",
"npm": ">= 3"
}
}
app.module.ts：
import { SharedModule } from './shared/shared.module';
import './rxjs-extensions';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { RouterModule, PreloadAllModules } from '@angular/router';
import { CoreModule } from './core/core.module';
import { HTTP_INTERCEPTORS } from "@angular/common/http";
import { ENV_PROVIDERS } from './environment';
import { ROUTES } from './app.routes';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { ExternalRootComponent } from './external-root.component';
import { InternalRootComponent } from './internal-root.component';
import { PageHeaderComponent } from './page-header.component';
import { NotFoundComponent } from './not-found/not-found.component';
import { AuthInterceptor } from './core/security/auth-interceptor';
import '../scss/style.scss';
/**
* `AppModule` is the main entry point into Angular2's bootstraping process
*/
@NgModule({
bootstrap: [AppComponent],
declarations: [
AppComponent,
ExternalRootComponent,
InternalRootComponent,
PageHeaderComponent,
NotFoundComponent
],
/**
* Import Angular's modules.
*/
imports: [
BrowserModule,
FormsModule,
HttpClientModule,
BrowserAnimationsModule,
RouterModule.forRoot(ROUTES, { useHash: true, preloadingStrategy: PreloadAllModules }),
CoreModule,
SharedModule
],
/**
* Expose our Services and Providers into Angular's dependency injection.
*/
providers: [
ENV_PROVIDERS,
{ provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
]
})
export class AppModule {}