所以我在浏览器中遇到的错误是:
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>
答案 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"
]
}