How to use mvc page as angular 5 templateUrl

Question

I am migrating my old project that used systemjs, to start use webpack, but now i having problems with the loading of templateUrl.

My old project use mvc views on templateUrl property of angular componentes, but with my new project this not work.

When i use the templateUrl calling a html file, all work good.

@Component({
    selector: 'app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

But, when i call a mvc route that provide a page, not work. (The route are work if you write manually in the browser)

@Component({
    selector: 'app',
    templateUrl: '/Teste/Index',
    styleUrls: ['./app.component.css']
})

My mvc controller class:

public class TesteController : Controller
{
    public IActionResult Index()
    {
        return View();
    }
}

So, i need load my mvc views as templateUrl, can anyone help me ?

Answer 1

This can be done, it requires using your own webpack configuration rather than angular-cli, so that you can use one of the standard typescript compilers in webpack that won't try to access the templateUrl path at build time.

Assuming that you are currently using angular-cli to build your angular app (you haven't mentioned your current configuration?) then you'd need to eject the angular-cli config so that angular creates a webpack.config.js file, then you can go about altering the configuration to suit your needs.

The following 2 commands will get you out of angular-cli and ready to use webpack directly (if you are on angular 6 then I think the eject functionality may have been disabled but it should work with angular 4/5):

ng eject tells Angular CLI to generate the webpack.config.js file

npm install then installs new dependencies required to use the webpack config directly to build your app.

You'll need to then go through the webpack.config.js and make changes for it to work for you (you'll need to read up on webpack quite a bit as when you first go through it most of it won't make much sense but it's worth getting your head around so you can configure it properly), for the mvc views to work you'll need to alter the modules configuration, updating the loader for typescript files (we use ts-loader as it offers extensions that allow for faster builds with threading to speed things up but there are others out there as well) and adding a loader for html / cshtml files.

Below is a snippet of our configuration that has us using mvc view paths for component templates:

    module: {
        rules: [
            {
                test: /\.aspx$/i,
                loader: 'raw-loader'
            },
            {
                test: /\.(cs)?html$/,
                loader: 'raw-loader'
            },
            {
                test: /\.(eot|svg|cur)$/,
                loader: 'file-loader',
                options: {
                    name: '[name].[hash:20].[ext]',
                    limit: 10000
                }
            },
            {
                test: /\.(jpg|png|webp|gif|otf|ttf|woff|woff2|ani)$/,
                loader: 'url-loader',
                options: {
                    name: '[name].[hash:20].[ext]',
                    limit: 10000
                }
            },
            {
                test: /\.ts$/,
                use: [
                    { loader: 'cache-loader' },
                    {
                        loader: 'thread-loader',
                        options: {
                            // there should be 1 cpu for the fork-ts-checker-webpack-plugin
                            workers: require('os').cpus().length - 1
                        }
                    },
                    {
                        loader: 'ts-loader',
                        options: {
                            happyPackMode: true // IMPORTANT! use happyPackMode mode to speed-up compilation and reduce errors reported to webpack
                        }
                    },
                ]
            },
            {
                test: /\.(ts|js)$/,
                loaders: [
                    'angular-router-loader'
                ]
            }
        ]
    }

It's a bit of a painful process but it can definitely be done.

Bear in mind that with this configuration, you won't be able to use AOT compliation to improve performance...