Search code examples
asp.netvisual-studioangular7

How to load angular 7 component in aspx page?


I am working on a .NET 4.7.2 project where I need the aspx pages to load my angular 7 view. I have to route through the pages without angular routing and the routing has to be done by aspx pages.

For example, I have about.aspx page and about.component from angular 7. Now if some aspx page, say home.aspx, redirect to about.aspx then I want to load about.aspx but inside it I want to load angular's about component.

How can this be achieved?


Solution

  • Simple Approach:

    Step1: Your angular application should be in module format.

    Step2: Your angular build should contains some common Js bundle and separate module bundle.

    Step3: Place your common Js bundle to your master .aspx page.

    Step4: Place your module bundle to page and boot strap your angular module. Fox example your home.aspx should be like:

    <app-home></app-home>
    <script src="path of your home-module.js"></script>
    

    Your Home.Component.Ts file should be

    @Component({
    selector: 'app-home',
    template: '<div> testing home </div>'
     })
    export class AppHomeComponent{
    }
    

    Step5: Repeat step 4 for different modules may be like you said about.aspx or contact.aspx