角度4：您可能需要适当的加载程序来处理此文件类型

Question

我是Angular 4的新手，正在学习使用方法。收到此错误，无法编译。我已经看到了不同的解决方案，并尝试按照解决方案中的建议在“导入”中添加指令，但该指令仍显示相同的错误。请帮忙。

我的app.module.ts如下

---

  import { AppComponent } from './app.component';
  import { routes } from './app.routes';
  import { BrowserModule } from "@angular/platform-browser";
  import { FormsModule } from "@angular/forms";
  import { RouterModule } from "@angular/router";
  import { NgModule } from "@angular/core";
    @NgModule({ 
        declarations: [AppComponent], 
        imports: [
            BrowserModule, 
            FormsModule,  
            RouterModule.forRoot(routes,{useHash: false}), 
        ], 
        bootstrap: [AppComponent], 

    })
    export class AppModule { }

---

我的package.json如下

    {
      "name": "angular4-dream",
      "version": "1.0.0",
      "description": "Hello Angular2",
      "scripts": {
        "start": "webpack-dev-server --config config/webpack.dev.js --progress",
        "test": "karma start",
        "build": "webpack --config config/webpack.dev.js --progress --profile --bail",
        "webpack": "webpack",
        "rimraf": "rimraf"
      },
      "keywords": [
        "angular2",
        "webpack"
      ],
      "author": "yanmeng@hujiang.com",
      "license": "MIT",
      "dependencies": {
        "@angular/animations": "~4.0.1",
        "@angular/common": "~4.0.0",
        "@angular/compiler": "~4.0.0",
        "@angular/core": "^4.0.1",
        "@angular/forms": "~4.0.1",
        "@angular/http": "~4.0.1",
        "core-js": "^2.4.1",
        "rxjs": "5.2.0",
        "zone.js": "^0.8.5"
      },
      "devDependencies": {
        "reflect-metadata": "^0.1.10",
        "html-webpack-plugin": "^2.28.0",
        "@angular/compiler-cli": "~4.0.1",
        "@angular/platform-browser": "~4.0.1",
        "@angular/platform-browser-dynamic": "~4.0.1",
        "@angular/platform-server": "~4.0.1",
        "@angular/router": "~4.0.1",
        "@angularclass/hmr": "^1.2.2",
        "@angularclass/hmr-loader": "^3.0.2",
        "@types/jasmine": "^2.5.43",
        "@types/node": "^6.0.45",
        "angular2-template-loader": "^0.6.0",
        "awesome-typescript-loader": "^3.0.4",
        "bootstrap": "^4.0.0-alpha.6",
        "bootstrap-sass": "^3.3.7",
        "css-loader": "^0.26.1",
        "extract-text-webpack-plugin": "2.0.0-beta.5",
        "file-loader": "^0.9.0",
        "font-awesome": "^4.7.0",
        "html-loader": "^0.4.3",
        "postcss-loader": "^1.3.1",
        "raw-loader": "^0.5.1",
        "style-loader": "^0.13.1",
        "to-string-loader": "^1.1.5",
        "ts-helpers": "^1.1.2",
        "url-loader": "^0.5.7",
        "webpack": "2.1.0-beta.21",
        "webpack-dev-server": "2.1.0-beta.9",
        "webpack-merge": "^0.14.1",
        "typescript": "^2.2.2"
      }
    }

My code