Не удается разрешить модуль Ошибка при первоначальной настройке TypeScript 2 / Angular 2 / Webpack 2

Question

Я пытаюсь настроить проект TypeScript Angular Webpack в первый раз, но меня обрушила лавина ошибок, которые мне нужна помощь для устранения.

Я пытался сравнить свой проект с проектом angular-cli, но я просто не вижу, чего не хватает.

Я пробовал понизить машинопись, @angular модули и веб-пакет; нет радости Я использовал определенные версии пакетов, потому что мы делаем это на работе для стабильности.

Это больше похоже на проблему, когда ts-loader нужно указывать, где искать вещи, так как само приложение просто шаблон.

В tsconfig некоторые настройки отсутствуют, потому что в документации tsconfig.json сказано, что они по умолчанию, например target = es5, module = commonjs, но я счастлив попробовать что угодно. Другие там, потому что я хотел посмотреть, что они сделали; Я счастлив бросить их тоже, если это необходимо.

Ниже я включил (a) образец полученных ошибок (b) package.json, (c) tsconfig.json и (d) webpack.config.js (e) main.ts

Примеры ошибок:

ERROR in ./~/@angular/platform-browser-dynamic/index.js
Module not found: Error: Can't resolve './src/platform-browser-dynamic' in '/Users/Ian/Desktop/TestFolder/Bare/node_modules/@angular/platform-browser-dynamic'
 @ ./~/@angular/platform-browser-dynamic/index.js 13:0-47
 @ ./src/main.ts

ERROR in ./~/@angular/platform-browser/index.js
Module not found: Error: Can't resolve './src/platform-browser' in '/Users/Ian/Desktop/TestFolder/Bare/node_modules/@angular/platform-browser'
 @ ./~/@angular/platform-browser/index.js 13:0-295
 @ ./src/app/app.module.ts
 @ ./src/main.ts

ERROR in ./~/@angular/forms/index.js
Module not found: Error: Can't resolve './src/forms' in '/Users/Ian/Desktop/TestFolder/Bare/node_modules/@angular/forms'
 @ ./~/@angular/forms/index.js 13:0-709
 @ ./src/app/app.module.ts
 @ ./src/main.ts

ERROR in ./~/@angular/core/index.js
Module not found: Error: Can't resolve './src/core' in '/Users/Ian/Desktop/TestFolder/Bare/node_modules/@angular/core'
 @ ./~/@angular/core/index.js 13:0-2208
 @ ./src/app/app.module.ts
 @ ./src/main.ts

ERROR in ./~/@angular/http/index.js
Module not found: Error: Can't resolve './src/index' in '/Users/Ian/Desktop/TestFolder/Bare/node_modules/@angular/http'
 @ ./~/@angular/http/index.js 13:0-406
 @ ./src/app/app.module.ts
 @ ./src/main.ts    

package.json

{
  "name": "BareNg2",
  "version": "1.0.0",
  "main": "index.js",
  "repository": {},
  "license": "MIT",
  "scripts": {
    "w": "webpack"
  },
  "dependencies": {
    "@angular/common": "2.4.5",
    "@angular/compiler": "2.4.5",
    "@angular/core": "2.4.5",
    "@angular/forms": "2.4.5",
    "@angular/http": "2.4.5",
    "@angular/platform-browser": "2.4.5",
    "@angular/platform-browser-dynamic": "2.4.5",
    "@angular/router": "3.4.6",
    "core-js": "2.4.1",
    "rxjs": "5.1.0",
    "zone.js": "0.7.6"
  },
  "devDependencies": {
    "@types/node": "7.0.4",
    "ts-loader": "^2.0.0",
    "typescript": "2.0.10",
    "webpack": "2.1.0-beta.28",
    "webpack-dev-middleware": "1.10.0",
    "webpack-dev-server": "1.16.3"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es6", "dom" ],
    "listFiles": true,
    "noImplicitAny": true,
    "pretty": true,
    "strictNullChecks": true,
    "target": "ES5",
    "traceResolution": true,
    "typeRoots": [ "./node_modules/@types" ]
  }
}

webpack.config.js

'use strict';
const webpack = require('webpack');
const path = require('path');

module.exports = {
  entry: {
    app: './src/main.ts'
  },
  output: {
    path: './dist',
    filename: '[name].bundle.js'
  },
  resolve: {
    extensions: [ '.ts' ]
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        loader: 'ts-loader',
        options: {
          visualStudioErrorFormat: true
        }
      }
    ]
  }
}

/src/main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode }         from '@angular/core';
import { AppModule }              from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

/src/app/app.module.ts

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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }