Question

我正在尝试使用webpack构建一个Angular 2项目。

这是我的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的依赖关系提出了我无法控制的路径

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']

错误：无法解析＆＃39; file＆＃39;或者＆＃39;目录＆＃39;

1 个答案: