0

I have been recently using angular to code an project that uses asp.net core mvc. I can not use angular module in a view while using in this view's layout page. How to mix angular with Asp.net core application? Is there any solution for this ?

Sathya Seelan
  • 3
  • 1
  • Does this answer your question? [how to embed an angular app into another app?](https://stackoverflow.com/questions/52604189/how-to-embed-an-angular-app-into-another-app) – deepakchethan Jun 04 '21 at 07:31

1 Answers1

0

That's exactly what I was looking for, after a couple of days I found a workaround:

First of all, you need to use Lazy loading feature modules, have a look at this sample to learn how to do that:

https://stackblitz.com/edit/angular-ivy-78jh2g

After learning lazy loading in Angular using the above sample then you are ready to follow the following steps:

According the above sample, I have finally a app-routing.module.ts like this:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  {
    path: 'servicelearning',
    loadChildren: () =>
      import('./service-learning/service-learning.module').then((m) => m.ServiceLearningModule),
  },
  {
    path: 'sportzone',
    loadChildren: () =>
      import('./sportzone/sportzone.module').then((m) => m.SportzoneModule),
  },
  {
    path: '',
    redirectTo: '',
    pathMatch: 'full',
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [],
})
export class AppRoutingModule {}

Then in your MVC application, you need to do the following steps:

*in this case, I have 2 modules in my Angular project, one is ServiceLearning and another one is SportZone:

1- in your index.cshtml file add:

@{
        ViewBag.Title = "Sport Zone";
    }
    
    @Styles.Render("~/Content/data-tables")
    
    <app-root class="bootstrap-plus">
        <div class="pad-top-p1 text-center">
            <i class="fa fa-spinner fa-spin"></i> Loading...
        </div>
    </app-root>
    
    @section scripts {
        <script>var __model = @Html.Raw(Json.Encode(Model));</script>
        @Scripts.Render("add your required scripts if you have any...")
    
        @if (Html.IsDebug())
        {
            <script src="/ng/dist/ng/runtime.js"></script>
            <script src="/ng/dist/ng/polyfills.js"></script>
            <script src="/ng/dist/ng/styles.js"></script>
            <script src="/ng/dist/ng/vendor.js"></script>
            <script src="/ng/dist/ng/main.js"></script>
        }
        else
        {
           <!--inject:scripts-->
            <script type="text/javascript" src="/scripts/sportzone/runtime-es2015.9855ea66eeb74731b37a.js" type="module"></script>
            <script type="text/javascript" src="/scripts/sportzone/runtime-es5.9855ea66eeb74731b37a.js" nomodule="" defer=""></script>
            <script type="text/javascript" src="/scripts/sportzone/polyfills-es5.049f620af8c864cf4d88.js" nomodule="" defer=""></script>
            <script type="text/javascript" src="/scripts/sportzone/polyfills-es2015.f2c5ab749249a66bdf26.js" type="module"></script>
            <script type="text/javascript" src="/scripts/sportzone/styles-es2015.50350f29240d2b9dec57.js" type="module"></script>
            <script type="text/javascript" src="/scripts/sportzone/styles-es5.50350f29240d2b9dec57.js" nomodule="" defer=""></script>
            <script type="text/javascript" src="/scripts/sportzone/main-es2015.77ae667b15db80594508.js" type="module"></script>
            <script type="text/javascript" src="/scripts/sportzone/main-es5.77ae667b15db80594508.js" nomodule="" defer=""></script>
            <!--endinject-->
        }
    }

2- in _Layout.chtml add:

    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>@ViewBag.Title</title>
            
        @{
            bool isNgSportZone = (HttpContext.Current.Request.RawUrl.IndexOf("/sportzone", StringComparison.InvariantCultureIgnoreCase) != -1);
            bool isNgServiceLearning = (HttpContext.Current.Request.RawUrl.IndexOf("/servicelearning", StringComparison.InvariantCultureIgnoreCase) != -1);
        }
        @if (isNgSportZone)
        {
            <script>document.write('<base href="/sportzone" />');</script>
        }
        @if (isNgServiceLearning)
        {
            <script>document.write('<base href="/servicelearning" />');</script>
        }
    </head>

And you are done!

from now on if you enter this address http://localhost/servicelearning it'll redirect to the "servicelearning" module and if you enter this address http://localhost/sportzone it'll redirect to sportzone.

hope this help, if any problem, rise here at this post.

Omid Karami
  • 156
  • 5