升级到.NET Core 1.0后出现Webpack错误

时间:2016-06-28 08:26:26

标签: asp.net-core webpack

所以我在浏览器中遇到的错误是:

  

bootstrap 050c815 ...:578未捕获错误:找不到模块" ./ app / main.ts"

当我尝试从cmd运行webpack时,我得到了

   ./app/main.ts中的错误   模块构建失败:TypeError:Path必须是字符串。收到undefined
     在assertPath(path.js:7:11)
     at Object.dirname(path.js:697:5)
     在ensureTypeScriptInstance(C:\ Users \ Me \ Google Drive \ TemplateProjects \ CoreAngular2WebpackSass \ src \ CoreAngular2WebpackSass \ node_modules \ ts-loader \ index.js:156:103)
     at Object.loader(C:\ Users \ Me \ Google Drive \ TemplateProjects \ CoreAngular2WebpackSass \ src \ CoreAngular2WebpackSass \ node_modules \ ts-loader \ index.js:403:14)

我已经评论了应用程序所需的几乎所有内容,但仍然出现此错误。

我不确定如何调试这个问题,它在.NET Core RC 2上工作但是错误看起来像.net相关的问题,这让我觉得它在复制代码时可能搞砸了结束但我看不到

此处的webpack.config位于根

var path = require('path');
var webpack = require('webpack');
var merge = require('extendify')({ isDeep: true, arrays: 'concat' });
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var extractCSS = new ExtractTextPlugin('styles.css');
var devConfig = require('./webpack.config.dev');
var prodConfig = require('./webpack.config.prod');
var isDevelopment = process.env.ASPNETCORE_ENVIRONMENT === 'Development';

//if (isDevelopment) {
    module.exports = merge({
        resolve: {
            extensions: ['', '.js', '.ts']
        },
        module: {
            loaders: [
                { test: /\.ts$/, loader: 'ts-loader' },
                { test: /\.html$/, loader: 'raw-loader' },
                { test: /\.css$/, loader: "css-loader" }
            ]
        },
        entry: {
            main: ['./app/main.ts']
        },
        output: {
            path: 'wwwroot/dist/',//path.join(__dirname, 'wwwroot', 'dist'),
            filename: '[name].js',
            publicPath: '/dist/'
        },
        plugins: [
            new webpack.DllReferencePlugin({
                context: __dirname,
                manifest: require('./wwwroot/dist/vendor-manifest.json')
            })
        ]
    },  devConfig );
//}

main.ts位于app/main.ts

import 'zone.js/dist/zone';
import 'reflect-metadata';

import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
//import { enableProdMode} from '@angular/core';
//import { APP_ROUTER_PROVIDER } from './app.routes';
//import { HTTP_PROVIDERS } from '@angular/http';
//import { disableDeprecatedForms, provideForms } from '@angular/forms';

//enableProdMode();
bootstrap(AppComponent, [
    //APP_ROUTER_PROVIDER,
    //HTTP_PROVIDERS,
    //disableDeprecatedForms(),
    //provideForms()
]);

//Hot swapping
//declare var module: any;
//if (module.hot) {
//    module.hot.accept();
//}

我的app.component.ts位于app/app.component.ts

import { Component}       from '@angular/core';
//import { AppFooter}         from './shared/footer/footer.component'
//import { ROUTER_DIRECTIVES } from '@angular/router';
//import { AccountService } from './services/account/account.service'
//import './rxjs-operators';

@Component({
    selector: 'app',
    template: 'hi',//require('./app.html'),
    //directives: [AppFooter, ROUTER_DIRECTIVES],
   // providers: [AccountService]
})
export class AppComponent {
}

最后提供服务的索引:位于Views/home/Index.cshtml,这是应用提供的默认页面

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Home</title>
    <base href="." />
    <link rel="stylesheet" href="~/dist/vendor.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/dist/styles.css" asp-append-version="true" />
</head>
<body>
    <app asp-prerender-webpack-config="webpack.config.js">Loading...</app>   
    @*<script src="webpack.config.js" asp-append-version="true"> </script> *@   
    <script src="~/dist/vendor.js" asp-append-version="true"></script>    
    <script src="~/dist/main.js" asp-append-version="true"></script>

</body>
</html>

1 个答案:

答案 0 :(得分:1)

我遇到了同样的错误,我在这里找到了解决方案:Fixing webpack error: Path must be a string. Received undefined

解决方案是创建tsconfig.json。像这样:

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "jsx": "react",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "outDir": "dist"
    },
    "files": [
      "./typings/main.d.ts"
    ]
}