SPA for each controller how do I configure routing #1326

New Issue

fergalmoran · 2025-08-09T17:19:42Z

fergalmoran commented

2025-08-09 17:19:42 +00:00

Originally created by @ravirambles on 10/10/2016

Hi,

I am just getting my feet wet in SPA world. Not yet ready to go with complete SPA solution with our website because of some existing legacy code and not enough time currently to rewrite them.

So the approach I am planning to take is to have take to have a SPA for each MVC controller so I can use all the Angular 2 goodness while still using the existing code.

So I create a root module for each controller with its own boot-client/boot-server files. using the below webpack configuration

var clientBundleConfig = merge(sharedConfig, {
        entry: {
        'home': './ClientApp/boot-client-home.ts',
        'profile': './ClientApp/boot-client-profile.ts',
    },
    output: { path: path.join(__dirname, './wwwroot/dist') },
    devtool: isDevBuild ? 'inline-source-map' : null,
    plugins: [
        new webpack.DllReferencePlugin({
            context: __dirname,
            manifest: require('./wwwroot/dist/vendor-manifest.json')
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'commons',
            minChunks: 2
        }),
       new HtmlWebpackPlugin({
         inject: false,
         chunks: ['home','commons'],
         template: 'Views/Shared/_WebpackTemplate.cshtml',
         filename: '../../Views/Home/Index.cshtml'
       }),
        new HtmlWebpackPlugin({
            inject: false,
            chunks: ['profile', 'commons'],
            template: 'Views/Shared/_WebpackTemplate.cshtml',
            filename: '../../Views/Profile/Index.cshtml'
        })
    ].concat(isDevBuild ? [] : [
        // Plugins that apply in production builds only
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin()
    ])
});

Can I be able to getting the routing working the way the I want.

what I am trying to do is anything routes with the following pattern
localhost:5000/{controller} be resolved by the MVC routing and
all the other routes likes
localhost:5000/{controller}/{angularroute} be resolved by base angular module for that controller

I might be missing something basic... I tried messing around with the base href and changing the routing. But I end up getting a route not found error or internal server error.

below is the template repo I am working on
https://github.com/ravirambles/TNg1

*Originally created by @ravirambles on 10/10/2016* Hi, I am just getting my feet wet in SPA world. Not yet ready to go with complete SPA solution with our website because of some existing legacy code and not enough time currently to rewrite them. So the approach I am planning to take is to have take to have a SPA for each MVC controller so I can use all the Angular 2 goodness while still using the existing code. So I create a root module for each controller with its own boot-client/boot-server files. using the below webpack configuration ``` javascript var clientBundleConfig = merge(sharedConfig, { entry: { 'home': './ClientApp/boot-client-home.ts', 'profile': './ClientApp/boot-client-profile.ts', }, output: { path: path.join(__dirname, './wwwroot/dist') }, devtool: isDevBuild ? 'inline-source-map' : null, plugins: [ new webpack.DllReferencePlugin({ context: __dirname, manifest: require('./wwwroot/dist/vendor-manifest.json') }), new webpack.optimize.CommonsChunkPlugin({ name: 'commons', minChunks: 2 }), new HtmlWebpackPlugin({ inject: false, chunks: ['home','commons'], template: 'Views/Shared/_WebpackTemplate.cshtml', filename: '../../Views/Home/Index.cshtml' }), new HtmlWebpackPlugin({ inject: false, chunks: ['profile', 'commons'], template: 'Views/Shared/_WebpackTemplate.cshtml', filename: '../../Views/Profile/Index.cshtml' }) ].concat(isDevBuild ? [] : [ // Plugins that apply in production builds only new webpack.optimize.OccurenceOrderPlugin(), new webpack.optimize.UglifyJsPlugin() ]) }); ``` Can I be able to getting the routing working the way the I want. what I am trying to do is anything routes with the following pattern localhost:5000/{controller} be resolved by the MVC routing and all the other routes likes localhost:5000/{controller}/{angularroute} be resolved by base angular module for that controller I might be missing something basic... I tried messing around with the base href and changing the routing. But I end up getting a route not found error or internal server error. below is the template repo I am working on [https://github.com/ravirambles/TNg1](url)

fergalmoran closed this issue

2025-08-09 17:19:42 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/JavaScriptServices#1326