我正在将Angular 8和Webpack与.Net Core 2配合使用。
const path = require('path'); -- Path
const rxPaths = require('rxjs/_esm5/path-mapping');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const FilterWarningsPlugin = require('webpack-filter-warnings-plugin');
const helpers = require('./webpack.helpers');
const ROOT = path.resolve(__dirname, '..');
-- Development process start
console.log('@@@@@@@@@ USING DEVELOPMENT @@@@@@@@@@@@@@@');
module.exports = {
mode: 'development',
devtool: 'source-map',
performance:{hints: false},
entry: {
//polyfills: './ClientApp/polyfills.ts',
//vendor: './wwwroot/vendor.js',
app: './ClientApp/app.ts'
},
watchOptions: {
ignored: /node_modules/
},
output: {
path: ROOT + '/wwwroot/',
filename: 'dist/[name].bundle.js',
chunkFilename: 'dist/[id].chunk.js',
publicPath: '/'
},
resolve: {
extensions: ['.ts', '.js', '.json', '.css', '.scss', '.html'],
//alias: rxPaths()
},
devServer: {
historyApiFallback: true,
contentBase: path.join(ROOT, '/wwwroot/'),
watchOptions: {
aggregateTimeout: 300,
poll: 1000
},
hot: true
},
module: {
rules: [
{
test: /\.ts$/,
use: [
//'ts-loader',
'awesome-typescript-loader',
'angular-router-loader',
'angular2-template-loader',
'source-map-loader',
'tslint-loader'
]
},
{
test: /\.(png|jpg|gif|woff|woff2|ttf|svg|eot)$/,
loader: 'file-loader?name=assets/[name]-[hash:6].[ext]'
},
{
test: /favicon.ico$/,
loader: 'file-loader?name=/[name].[ext]'
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.scss$/,
exclude: /node_modules/,
loaders: ['style-loader', 'css-loader', 'sass-loader']
},
{
test: /\.html$/,
loader: 'raw-loader'
},
{
test: /\.svg$/,
loader: 'svg-inline-loader',
options: {
name: "[name].[ext]",
outputPath: 'wwwroot/assets/svgs/',
publicPath: 'ClientApp/'
}
}
],
exprContextCritical: false
},
plugins: [
function () {
this.plugin('watch-run', function (watching, callback) {
console.log(
'\x1b[33m%s\x1b[0m',
`Begin compile at ${new Date().toTimeString()}`
);
callback();
});
},
new webpack.optimize.ModuleConcatenationPlugin(),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
}),
// new webpack.optimize.CommonsChunkPlugin({ name: ['vendor', 'polyfills'] }),
new CleanWebpackPlugin({
cleanOnceBeforeBuildPatterns: ['./wwwroot/dist', './wwwroot/assets'],
root: ROOT
}),
new HtmlWebpackPlugin({
filename: 'index.html',
inject: 'body',
template: 'ClientApp/index.html'
}),
new CopyWebpackPlugin([
{ from: './ClientApp/assets/*.*', to: 'assets/', flatten: true }
])
//new FilterWarningsPlugin({
// exclude: /System.import/
//})
]
};
// Package.Json
{
"author": "Sandeep Kumar",
"dependencies": {
"@angular/animations": "^8.0.1",
"@angular/common": "~8.0.1",
"@angular/compiler": "~8.0.1",
"@angular/core": "~8.0.1",
"@angular/forms": "~8.0.1",
"@angular/http": "^7.2.15",
"@angular/platform-browser": "^8.0.1",
"@angular/platform-browser-dynamic": "~8.0.1",
"@angular/router": "~8.0.1",
"@aspnet/signalr": "^1.1.4",
"@ng-bootstrap/ng-bootstrap": "^4.2.1",
"@ngtools/webpack": "^8.0.3",
"@types/flatpickr": "^3.1.2",
"alertify": "^0.3.0",
"angular-bootstrap-md": "^7.5.4",
"angular4-notify": "^1.2.0",
"babel-polyfill": "^6.26.0",
"chart.js": "^2.5.0",
"file-loader": "^4.0.0",
"flag-icon-css": "^3.3.0",
"flatpickr": "^4.6.1",
"font-awesome": "^4.7.0",
"hammerjs": "^2.0.8",
"lodash": "^4.17.11",
"notie": "^4.3.1",
"omni-slider": "^1.2.1",
"pell": "^1.0.6",
"reflect-metadata": "^0.1.13",
"rxjs": "^6.4.0",
"rxjs-compat": "^6.5.2",
"tslib": "^1.9.0",
"zone.js": "~0.9.1"
},
"description": "sms app",
"devDependencies": {
"@angular-devkit/build-angular": "~0.800.0",
"@angular/cli": "~8.0.3",
"@angular/compiler-cli": "~8.0.1",
"@angular/language-service": "~8.0.1",
"@types/jasmine": "~3.3.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^8.9.5",
"@types/webpack-env": "^1.13.9",
"angular-router-loader": "^0.8.5",
"angular2-template-loader": "^0.6.2",
"aspnet-prerendering": "^3.0.1",
"aspnet-webpack": "^3.0.0",
"awesome-typescript-loader": "^5.2.1",
"clean-webpack-plugin": "^3.0.0",
"codelyzer": "^5.0.0",
"compression-webpack-plugin": "^3.0.0",
"concurrently": "^4.1.0",
"copy-webpack-plugin": "^5.0.3",
"css-loader": "^3.0.0",
"extract-text-webpack-plugin": "^3.0.2",
"html-webpack-plugin": "^3.2.0",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"jquery": "^3.4.1",
"json-loader": "^0.5.7",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"node-sass": "^4.12.0",
"protractor": "~5.4.0",
"raw-loader": "^3.0.0",
"sass-loader": "^7.1.0",
"source-map-loader": "^0.2.4",
"style-loader": "^0.23.1",
"svg-inline-loader": "^0.8.0",
"to-string-loader": "^1.1.5",
"ts-loader": "^6.0.3",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"tslint-loader": "^3.5.4",
"typescript": "~3.4.3",
"uglifyjs-webpack-plugin": "^2.1.3",
"url-loader": "^2.0.0",
"webpack": "^4.34.0",
"webpack-cli": "^3.3.4",
"webpack-dev-server": "^3.7.2",
"webpack-filter-warnings-plugin": "^1.2.1",
"webpack-hot-middleware": "^2.25.0",
"webpack-manifest-plugin": "^2.0.4"
},
"license": "ISC",
"main": "wwwroot/index.html",
"name": "client-app",
"private": true,
"scripts": {
"ngc": "ngc -p ./tsconfig.json",
"start": "concurrently \"webpack-dev-server --hot --inline --port 44380\" \"dotnet run\" ",
"webpack-dev": "set NODE_ENV=development && webpack",
"webpack-production": "set NODE_ENV=production && webpack",
"build-dev": "npm run webpack-dev",
"build-production": "npm run ngc && npm run webpack-production",
"watch-webpack-dev": "set NODE_ENV=development && webpack --watch --color",
"watch-webpack-production": "npm run build-production --watch --color",
"publish-for-iis": "npm run build-production && dotnet publish -c Release"
},
"version": "0.0.0",
"-vs-binding": {
"ProjectOpened": [
"watch-webpack-dev"
]
}
}
当我运行.net core 2应用程序时，它成功重定向到index.cshtml。但是，我收到一个错误-为组件AppSection指定的模板不是字符串
我尝试了很多方法来使其运行，但没有成功。