Using Webpack in an MVC 5 Angular 2 application

Question

I created a very basic MVC 5 Angular 2 app which works fine if I use SystemJS. However, I wanted to be able to bundle my code so I could add it to my BundleConfig file and decided to look into Webpack. I've got it to a point where I can generate the bundles and save them to disk (using webpack --watch) but when I include them in my BundleConfig it doesn't work because it's unable to find the templates for the component.

So the question is: Is there a better way to do this? What I mean is - I want to stick with MVC 5, use Visual Studio (which means using the VS Typescript compiler) and be able to bundle my js/css files.

I'm quite new to this framework (Angular 2/ Webpack etc.) so please let me know if you need more information.

Thanks!

Not sure how helpful this would be but here is the webpack config:

webpack.config.js

module.exports = require('./Config/webpack.dev.js');

webpack.dev.js

var webpack = require('webpack');
var webpackMerge = require('webpack-merge');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var commonConfig = require('./webpack.common.js');
var helpers = require('./helpers');

const ENV = process.env.NODE_ENV = process.env.ENV = 'production';

module.exports = webpackMerge(commonConfig, {
    devtool: 'source-map',

    output: {
        path: helpers.root('dist'),
        publicPath: 'http://localhost:64005',
        filename: '[name].js',
        chunkFilename: '[id].[hash].chunk.js'
    },

    plugins: [
        new webpack.NoEmitOnErrorsPlugin(),
        new ExtractTextPlugin('[name].css'),
        //new webpack.DefinePlugin({
        //    'process.env': {
        //        'ENV': JSON.stringify(ENV)
        //    }
        //})
        //new webpack.LoaderOptionsPlugin({
        //    htmlLoader: {
        //        minimize: false // workaround for ng2
        //    }
        //})
    ]
});

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: {
        'polyfills': './Config/polyfills.js',
        'vendor': './Config/vendor.js',
        'app': './App/main.js'
    },
    resolve: {
        extensions: ['.js']
    },
    module: {
        rules: [
            //{
            //    test: /\.ts$/,
            //    loaders: [
            //        {
            //            loader: 'awesome-typescript-loader',
            //            options: { configFileName: helpers.root('', 'tsconfig.json') }
            //        }, 'angular2-template-loader'
            //    ]
            //},
            {
                test: /\.html$/,
                loader: 'html-loader'
            },
            {
                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
                loader: 'file-loader?name=Content/[name].[hash].[ext]'
            },
            {
                test: /\.css$/,
                exclude: helpers.root('', 'App'),
                loader: ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: 'css-loader?sourceMap' })
            },
            {
                test: /\.css$/,
                include: helpers.root('', 'App'),
                loader: 'raw-loader'
            }
        ]
    },

    plugins: [
        // Workaround for angular/angular#11580
        //new webpack.ContextReplacementPlugin(
        //    // The (\\|\/) piece accounts for path separators in *nix and Windows
        //    /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
        //    helpers.root('./'), // location of your src
        //    {} // a map of your routes
        //),

        new webpack.optimize.CommonsChunkPlugin({
            name: ['app', 'vendor', 'polyfills']
        })

        //new HtmlWebpackPlugin({
        //    template: 'Views/Shared/_Layout.cshtml'
        //})
    ]
};

UPDATE: Just to clarify, here's the process I want to have: 1. Visual Studio transpiles the .ts files (As far as I know there isn't an easy way to tell Visual Studio to use the Typescript compiler from node_modules instead of its own). 2. Webpack creates bundles from all the transpiled js files, which is working. 3. BundleConfig makes those bundles available.

The above process is working except that the template files aren't being served. If I use inline templates and css it works just fine.

So maybe a more specific question would be: How do I use webpack to either add the templates/styles inline (Dunno if that's even possible) or serve those files in such a way that the components can find and load them?

Answer 1

I was able to solve this issue by uncommenting the awesome-typescript-loader rule in the webpack.common.js file. Using that plugin allows me to load template/style URLs.