No provider for Http! when I upgdate to Angular 4 and update libraries

So I am in the process of upgrading my app to angular 4, I guess this is a library related issue? I used to import from @angular/http earlier. Now, I use @angular/common/http. Do I need to separately include more libraries for this to work? What am I missing here?

I get the following error:

core.es5.js:1020 ERROR Error: Uncaught (in promise): Error: No provider for Http!
Error: No provider for Http!

My app.module.ts file

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 
import { NgModule } from '@angular/core';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { TranslateService, TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

import { AppComponent } from './app.component';

import { CoreModule } from './core/core.module';
import { LayoutModule } from './layout/layout.module';
import { SharedModule } from './shared/shared.module';
import { RoutesModule } from './routes/routes.module';
import { Angular2TokenService } from 'angular2-token';
export function createTranslateLoader(http: HttpClient) {
    return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        HttpClientModule,
        BrowserAnimationsModule, 
        CoreModule,
        LayoutModule,
        SharedModule.forRoot(),
        RoutesModule,
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: (createTranslateLoader),
                deps: [HttpClient]
            }
        })
    ],
    providers: [
        Angular2TokenService
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

My file.component.ts

import { Angular2TokenService } from 'angular2-token';
@Component({
    selector: 'app-file',
    templateUrl: './file.component.html',
    styleUrls: ['./file.component.scss']
})
export class HeaderComponent implements OnInit {
   constructor(
        private _tokenService: Angular2TokenService,
    ){}
}

My package.json

{
  "name": "ng2angle",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "install": "napa",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "modernizr": "modernizr -c modernizr-config.json -d src/modernizr.js",
    "postinstall": "node ./node_modules/protractor/bin/webdriver-manager update",
    "e2e": "ng e2e"
  },
  "private": true,
  "napa": {
    "jquery.flot.spline": "miloszfalinski/jquery.flot.spline",
    "ika.jvectormap": "kakirigi/ika.jvectormap",
    "flot": "flot/flot#v0.8.3"
  },
  "dependencies": {
    "@agm/core": "1.0.0-beta.0",
    "@angular/animations": "4.3.3",
    "@angular/common": "4.3.3",
    "@angular/compiler": "4.3.3",
    "@angular/core": "4.3.3",
    "@angular/forms": "4.3.3",
    "@angular/http": "4.3.3",
    "@angular/platform-browser": "4.3.3",
    "@angular/platform-browser-dynamic": "4.3.3",
    "@angular/router": "4.3.3",
    "@ngx-translate/core": "7.1.0",
    "@ngx-translate/http-loader": "1.0.1",
    "ag-grid": "12.0.2",
    "ag-grid-angular": "12.0.0",
    "angular2-token": "0.2.0-beta.12",
    "angular-tree-component": "3.9.0",
    "angular2-datatable": "0.6.0",
    "angular2-text-mask": "8.0.3",
    "angular2-toaster": "4.0.1",
    "bootstrap": "3.3.7",
    "chart.js": "2.6.0",
    "classlist.js": "1.1.20150312",
    "codemirror": "5.28.0",
    "core-js": "2.4.1",
    "easy-pie-chart": "2.1.7",
    "enhanced-resolve": "3.3.0",
    "font-awesome": "4.7.0",
    "fullcalendar": "3.4.0",
    "intl": "1.2.5",
    "jqcloud2": "2.0.3",
    "jquery": "3.2.1",
    "jquery-slimscroll": "1.3.8",
    "jquery-sparkline": "2.4.0",
    "jquery.browser": "0.1.0",
    "jquery.flot.tooltip": "github:krzysu/flot.tooltip",
    "lodash": "4.17.4",
    "modernizr": "3.5.0",
    "moment": "2.18.1",
    "ng2-charts": "1.6.0",
    "ng2-dnd": "4.2.0",
    "ng2-file-upload": "1.2.1",
    "ng2-img-cropper": "0.9.0",
    "ng2-select": "1.2.0",
    "ng2-table": "1.3.2",
    "ng2-validation": "4.2.0",
    "ngx-bootstrap": "1.8.1",
    "ngx-chips": "1.5.3",
    "ngx-color-picker": "4.2.0",
    "ngx-infinite-scroll": "0.5.1",
    "ngx-pagination": "^3.0.1",
    "node-sass": "3.13.0",
    "rxjs": "5.4.2",
    "screenfull": "3.3.1",
    "simple-line-icons": "2.4.1",
    "spinkit": "1.2.5",
    "summernote": "0.8.6",
    "sweetalert": "1.1.3",
    "ts-helpers": "1.1.1",
    "weather-icons": "github:erikflowers/weather-icons",
    "web-animations-js": "2.2.1",
    "zone.js": "0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.3.2",
    "@angular/compiler-cli": "4.3.3",
    "@angular/language-service": "4.3.3",
    "@types/codemirror": "0.0.43",
    "@types/jasmine": "2.5.53",
    "@types/jasminewd2": "2.0.2",
    "@types/lodash": "4.14.71",
    "@types/node": "6.0.60",
    "codelyzer": "3.1.1",
    "jasmine-core": "2.6.2",
    "jasmine-spec-reporter": "4.1.0",
    "karma": "1.7.0",
    "karma-chrome-launcher": "2.1.1",
    "karma-cli": "1.0.1",
    "karma-coverage-istanbul-reporter": "1.2.1",
    "karma-jasmine": "1.1.0",
    "karma-jasmine-html-reporter": "0.2.2",
    "karma-read-json": "1.1.0",
    "loaders.css": "0.1.2",
    "napa": "3.0.0",
    "protractor": "5.1.2",
    "ts-node": "3.2.0",
    "tslint": "5.3.2",
    "typescript": "2.3.3",
    "webdriver-manager": "10.2.5"
  }
}

neroniaky / angular-token

No provider for Http! when I upgdate to Angular 4 and update libraries #370