angular: Got 'Uncaught Error: Can't resolve all parameters for AppComponent: (?).' when I inject whatever in construdtor(){} function

I’m submitting a … (check one with “x”)

[ ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[x] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior Got ‘Uncaught Error: Can’t resolve all parameters for AppComponent: (?).’ when I inject whatever in construdtor(){} function

Expected behavior Wanna inject Router and use router.navigate() in AppComponent.

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  constructor(private router: Router){}
}

It runs well when I remove private router: Router, and it causes error whatever I put into construdtor(){}.

Here’s my package.json:

{
  "name": "",
  "version": "0.0.0",
  "scripts": {
    "build": "webpack --config webpack.config.js",
    "dev": "webpack-dev-server --config webpackServer.config.js --host 0.0.0.0 --port 3333 --devtool eval --progress --colors --hot --content-base dist"
  },
  "dependencies": {
    "@angular/common": "~4.1.2",
    "@angular/compiler": "~4.1.2",
    "@angular/compiler-cli": "~4.1.2",
    "@angular/core": "~4.1.2",
    "@angular/forms": "~4.1.2",
    "@angular/http": "~4.1.2",
    "@angular/platform-browser": "~4.1.2",
    "@angular/platform-browser-dynamic": "~4.1.2",
    "@angular/router": "~4.1.2",
    "bootstrap": "^3.3.7",
    "rxjs": "^5.1.0",
    "zone.js": "^0.8.10"
  },
  "devDependencies": {
    "@types/node": "^7.0.18",
    "angular2-template-loader": "~0.6.2",
    "babel-core": "~6.24.1",
    "babel-loader": "~7.0.0",
    "babel-polyfill": "~6.23.0",
    "babel-preset-latest": "^6.24.1",
    "html-webpack-plugin": "^2.28.0",
    "raw-loader": "^0.5.1",
    "ts-loader": "^2.0.3",
    "tslint": "^5.2.0",
    "typescript": "~2.2.0",
    "webpack": "~2.5.1",
    "webpack-dev-server": "~2.4.5"
  }
}

My bootstrap.ts:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
require('zone.js');

import { AppModule } from './app/container/container.module';

platformBrowserDynamic().bootstrapModule(AppModule);

And the AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { RouterModule, Routes, Router } from '@angular/router';

import { AppComponent } from './container.component';
import { LoginComponent } from '../modules/login/login.component';

export const AppRoutes: Routes = [
    {
        path: '', component: AppComponent, children: [
            { path: 'login', component: LoginComponent },
            { path: '**', redirectTo: 'login'}
        ]
    }
];

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    // HttpModule,
    RouterModule.forRoot(AppRoutes, {useHash: true})
  ],
  declarations: [
    AppComponent,
    LoginComponent
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

Here’s the error:

compiler.es5.js:15291 
Uncaught Error: Can't resolve all parameters for LoginComponent: (?).
    at syntaxError (webpack:///./~/@angular/compiler/@angular/compiler.es5.js?:1724:34)
    at CompileMetadataResolver._getDependenciesMetadata (webpack:///./~/@angular/compiler/@angular/compiler.es5.js?:15061:35)
    at CompileMetadataResolver._getTypeMetadata (webpack:///./~/@angular/compiler/@angular/compiler.es5.js?:14929:26)
    at CompileMetadataResolver.getNonNormalizedDirectiveMetadata (webpack:///./~/@angular/compiler/@angular/compiler.es5.js?:14538:24)
    at CompileMetadataResolver._getEntryComponentMetadata (webpack:///./~/@angular/compiler/@angular/compiler.es5.js?:15182:45)
    at eval (webpack:///./~/@angular/compiler/@angular/compiler.es5.js?:15168:48)
    at Array.forEach (native)
    at CompileMetadataResolver._getEntryComponentsFromProvider (webpack:///./~/@angular/compiler/@angular/compiler.es5.js?:15167:30)
    at eval (webpack:///./~/@angular/compiler/@angular/compiler.es5.js?:15131:83)
    at Array.forEach (native)

Everything runs well when I remove params in constructor(). Is it something about the DI? Thanks for helping!