In order to study SignalR, I downloaded one project on the network, written in ASPNET Core, Angula2, SignalR. In the original, there: npm, bower, gulp collector. But in the standard SPA template Angular2 for ASPNET Core, there is only npm and Webpack. I wanted to translate everything to this view and then it began ...

Downloaded the SPA template Angular 2 for ASP NET Core, edited project.json, Startup.cs, package.json, added ts'ki. I run webpack and get an error enter image description here

Type is not connected jQuery and SignalR. Help please make it work. Link to GitHub repository

Here is my package.json

{ "name": "Teleport", "version": "1.0.0", "author": "", "license": "ISC", "dependencies": { "@angular/common": "2.0.0", "@angular/compiler": "2.0.0", "@angular/core": "2.0.0", "@angular/forms": "2.0.0", "@angular/http": "2.0.0", "@angular/platform-browser": "2.0.0", "@angular/platform-browser-dynamic": "2.0.0", "@angular/platform-server": "2.0.0", "@angular/router": "3.0.0", "@types/node": "^6.0.38", "angular2-platform-node": "~2.0.10", "angular2-universal": "~2.0.10", "angular2-universal-polyfills": "~2.0.10", "aspnet-prerendering": "^1.0.6", "aspnet-webpack": "^1.0.11", "bootstrap": "^3.3.7", "css": "^2.2.1", "css-loader": "^0.25.0", "es6-shim": "^0.35.1", "expose-loader": "^0.7.1", "extract-text-webpack-plugin": "^1.0.1", "file-loader": "^0.9.0", "isomorphic-fetch": "^2.2.1", "preboot": "^4.5.2", "raw-loader": "^0.5.1", "style-loader": "^0.13.0", "to-string-loader": "^1.1.5", "ts-loader": "^0.8.2", "typescript": "^2.0.0", "url-loader": "^0.5.7", "webpack": "^1.12.14", "webpack-externals-plugin": "^1.0.0", "webpack-hot-middleware": "^2.10.0", "webpack-merge": "^0.14.1", "@angular/upgrade": "2.0.0", "angular-in-memory-web-api": "0.1.15", "core-js": "^2.4.1", "reflect-metadata": "^0.1.8", "rxjs": "5.0.0-beta.12", "systemjs": "0.19.39", "zone.js": "^0.6.25", "bower": "1.7.9", "jquery": "^3.1.0", "signalr": "^2.2.1" }, "devDependencies": { "css-loader": "^0.25.0", "extract-text-webpack-plugin": "^1.0.1", "less": "^2.7.1", "less-loader": "^2.2.3", "source-map-loader": "^0.1.5", "style-loader": "^0.13.1", "webpack": "^1.13.2", "webpack-notifier": "^1.4.1" } } 

But both Webpack config First, webpack.config.js

 var isDevBuild = process.argv.indexOf('--env.prod') < 0; var path = require('path'); var webpack = require('webpack'); var nodeExternals = require('webpack-node-externals'); var merge = require('webpack-merge'); var allFilenamesExceptJavaScript = /\.(?!js(\?|$))([^.]+(\?|$))/; // Configuration in common to both client-side and server-side bundles var sharedConfig = { resolve: { extensions: [ '', '.js', '.ts' ] }, output: { filename: '[name].js', publicPath: '/dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix }, module: { loaders: [ { test: require.resolve("jquery"), loader: "expose-loader?$!expose-loader?jQuery" }, { test: /\.ts$/, include: /ClientApp/, loader: 'ts', query: { silent: true } }, { test: /\.html$/, loader: 'raw' }, { test: /\.css$/, loader: 'to-string!css' }, { test: /\.(png|jpg|jpeg|gif|svg)$/, loader: 'url', query: { limit: 25000 } } ] } }; // Configuration for client-side bundle suitable for running in browsers var clientBundleConfig = merge(sharedConfig, { entry: { 'main-client': './ClientApp/boot-client.ts' }, output: { path: path.join(__dirname, './wwwroot/dist') }, devtool: isDevBuild ? 'inline-source-map' : null, plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable) new webpack.DllReferencePlugin({ context: __dirname, manifest: require('./wwwroot/dist/vendor-manifest.json') }) ].concat(isDevBuild ? [] : [ // Plugins that apply in production builds only new webpack.optimize.OccurenceOrderPlugin(), new webpack.optimize.UglifyJsPlugin() ]) }); // Configuration for server-side (prerendering) bundle suitable for running in Node var serverBundleConfig = merge(sharedConfig, { entry: { 'main-server': './ClientApp/boot-server.ts' }, output: { libraryTarget: 'commonjs', path: path.join(__dirname, './ClientApp/dist') }, target: 'node', devtool: 'inline-source-map', externals: [nodeExternals({ whitelist: [allFilenamesExceptJavaScript] })] // Don't bundle .js files from node_modules }); module.exports = [clientBundleConfig, serverBundleConfig]; 

Then webpack.config.vendor.js

 var isDevBuild = process.argv.indexOf('--env.prod') < 0; var path = require('path'); var webpack = require('webpack'); var ExtractTextPlugin = require('extract-text-webpack-plugin'); var extractCSS = new ExtractTextPlugin('vendor.css'); module.exports = { resolve: { extensions: [ '', '.js' ] }, module: { loaders: [ { test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, loader: 'url-loader?limit=100000' }, { test: /\.css(\?|$)/, loader: extractCSS.extract(['css']) } ] }, entry: { vendor: [ '@angular/common', '@angular/compiler', '@angular/core', '@angular/http', '@angular/platform-browser', '@angular/platform-browser-dynamic', '@angular/router', '@angular/platform-server', 'angular2-universal', 'angular2-universal-polyfills', 'bootstrap', 'bootstrap/dist/css/bootstrap.css', 'es6-shim', 'es6-promise', 'jquery', 'zone.js', '@angular/upgrade', 'angular-in-memory-web-api', 'core-js', 'reflect-metadata', 'rxjs', //'systemjs', //'bower', 'signalr' ] }, output: { path: path.join(__dirname, 'wwwroot', 'dist'), filename: '[name].js', library: '[name]_[hash]', }, plugins: [ extractCSS, new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable) new webpack.optimize.OccurenceOrderPlugin(), new webpack.DllPlugin({ path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'), name: '[name]_[hash]' }) ].concat(isDevBuild ? [] : [ new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }) ]) }; 

    1 answer 1

    View ASP.NET Core, Angular 2, SignalR for Dummies

    The main thing is ASP.NET Core + Angular 2 template for Visual Studio

    There everything is already configured, you only need to add links to SignalR

    Well, you need to declare &

     declare var $: any; 

    Here are the working implementations of SignalR

    Judging by https://github.com/SolomatovS/Rox.Teleport/blob/master/src/Teleport/ClientApp/app/components/shared/services/feed.service.ts $ not announced. Add declare var $: any; and you will be happy

    • The project is based on the asp net core + angular 2 template. The article does not describe the rake that you come across when building signalr in a webpack. Comments did not help much - Source
    • There Webpack is already configured. You have an error in the code, see declare var $: any; Look at all the code it is on the link - Serginio
    • Here are the working implementations of SignalR github.com/Serginio1/Angular2SignalrCore/tree/master/… - Serginio
    • Before you put a minus, see what I advise you. Judging from github.com/SolomatovS/Rox.Teleport/blob/master/src/Teleport/ ... $ not announced. And in my post for the third time, add declare var $: any; and you will be happy - Serginio