Ошибка: не удается разрешить «файл» или «каталог»

Question

Я пытаюсь создать проект Angular 2 с помощью webpack.

Вот мой webpack.common.js

var webpack = require('webpack'); 
var HtmlWebpackPlugin = require('html-webpack-plugin'); 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 
var helpers = require('./helpers'); 

module.exports = { 
    entry: { 
     'app': './app/main.ts' 
    }, 

    resolve: { 
     // extensions: ['', '.js', '.ts'] 
     extensions: ['', '.ts'] 
    }, 

    module: { 
     loaders: [{ 
      test: /\.ts$/, 
      loaders: ['ts', 'angular2-template-loader'] 
     }, { 
      test: /\.html$/, 
      loader: 'html' 
     }, { 
      test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/, 
      loader: 'file?name=assets/[name].[hash].[ext]' 
     }, { 
      test: /\.css$/, 
      exclude: helpers.root('src', 'app'), 
      loader: ExtractTextPlugin.extract('style', 'css?sourceMap') 
     }, { 
      test: /\.css$/, 
      include: helpers.root('src', 'app'), 
      loader: 'raw' 
     }] 
    }, 

    plugins: [ 
     new webpack.optimize.CommonsChunkPlugin({ 
      name: ['app'] 
     }), 

     new HtmlWebpackPlugin({ 
      template: 'app/index.html' 
     }) 
    ] 
}; 

Webpack.dev.js

var webpackMerge = require('webpack-merge'); 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 
var commonConfig = require('./webpack.common.js'); 
var helpers = require('./helpers'); 

module.exports = webpackMerge(commonConfig, { 
    devtool: 'cheap-module-eval-source-map', 

    output: { 
     path: helpers.root('dist'), 
     publicPath: 'http://localhost:8080/', 
     filename: '[name].js', 
     chunkFilename: '[id].chunk.js' 
    }, 

    plugins: [ 
     new ExtractTextPlugin('[name].css') 
    ], 

    devServer: { 
     historyApiFallback: true, 
     stats: 'minimal' 
    } 
}); 

Я понимаю, что package.json может вызвать проблемы, которые кстати я проверенная

{ 
    "name": "angular2-quickstart", 
    "version": "1.0.0", 
    "description": "QuickStart package.json from the documentation, supplemented with testing support", 
    "scripts": { 
     "start": "webpack-dev-server --inline --progress --port 8080", 
     "docker-build": "docker build -t ng2-quickstart .", 
     "docker": "npm run docker-build && docker run -it --rm -p 3000:3000 -p 3001:3001 ng2-quickstart", 
     "pree2e": "npm run webdriver:update", 
     "e2e": "tsc && concurrently \"http-server\" \"protractor protractor.config.js\"", 
     "lint": "tslint ./app/**/*.ts -t verbose", 
     "lite": "lite-server", 
     "postinstall": "typings install", 
     "test": "tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\"", 
     "tsc": "tsc", 
     "tsc:w": "tsc -w", 
     "typings": "typings", 
     "webdriver:update": "webdriver-manager update" 
    }, 
    "keywords": [], 
    "author": "", 
    "license": "ISC", 
    "dependencies": { 
     "@angular/common": "2.0.0-rc.3", 
     "@angular/compiler": "2.0.0-rc.3", 
     "@angular/core": "2.0.0-rc.3", 
     "@angular/forms": "0.1.1", 
     "@angular/http": "2.0.0-rc.3", 
     "@angular/platform-browser": "2.0.0-rc.3", 
     "@angular/platform-browser-dynamic": "2.0.0-rc.3", 
     "@angular/router": "3.0.0-alpha.7", 
     "@angular/router-deprecated": "2.0.0-rc.2", 
     "@angular/upgrade": "2.0.0-rc.3", 
     "systemjs": "0.19.27", 
     "core-js": "^2.4.0", 
     "reflect-metadata": "^0.1.3", 
     "rxjs": "5.0.0-beta.6", 
     "zone.js": "^0.6.12", 
     "angular2-in-memory-web-api": "0.0.12", 
     "bootstrap": "^3.3.6" 
    }, 
    "devDependencies": { 
     "canonical-path": "0.0.2", 
     "concurrently": "^2.0.0", 
     "http-server": "^0.9.0", 
     "jasmine-core": "~2.4.1", 
     "karma": "^0.13.22", 
     "karma-chrome-launcher": "^0.2.3", 
     "karma-cli": "^0.1.2", 
     "karma-htmlfile-reporter": "^0.2.2", 
     "karma-jasmine": "^0.3.8", 
     "karma-spec-reporter": "0.0.26", 
     "lite-server": "^2.2.0", 
     "lodash": "^4.11.1", 
     "protractor": "^3.3.0", 
     "rimraf": "^2.5.2", 
     "tslint": "^3.7.4", 
     "typescript": "^1.8.10", 
     "typings": "^1.0.4", 
     "angular2-template-loader": "^0.4.0", 
     "css-loader": "^0.23.1", 
     "extract-text-webpack-plugin": "^1.0.1", 
     "file-loader": "^0.8.5", 
     "html-loader": "^0.4.3", 
     "html-webpack-plugin": "^2.15.0", 
     "karma-phantomjs-launcher": "^1.0.0", 
     "karma-sourcemap-loader": "^0.3.7", 
     "karma-webpack": "^1.7.0", 
     "null-loader": "^0.1.1", 
     "phantomjs-prebuilt": "^2.1.7", 
     "raw-loader": "^0.5.1", 
     "style-loader": "^0.13.1", 
     "ts-loader": "^0.8.1", 
     "webpack": "^1.13.0", 
     "webpack-dev-server": "^1.14.1", 
     "webpack-merge": "^0.14.0" 
    }, 
    "repository": {} 
} 

Если вы посмотрите на мою запись, мне удалось ее разрешить, чтобы найти main.ts, но теперь зависимости от main.ts ar е придумывают werid путями, которые я не могу контролировать

ERROR in ./app/components/app/app.component.ts 
Module not found: Error: Cannot resolve 'file' or 'directory' ./app/components/app/app.component.html in C:\code\angular2-dynamic-forms\app\components\app 
resolve file 
    C:\code\angular2-dynamic-forms\app\components\app\app\components\app\app.component.html doesn't exist 
    C:\code\angular2-dynamic-forms\app\components\app\app\components\app\app.component.html.ts doesn't exist 

Answer 1

Решение было изменить свойство расширения:

extensions: ['', '.js', '.ts']