1

I have two angular projects developed in angular2. One is public portal and other is admin. If I am hosting the main portal as http://myaddress.com then I need to host the admin under it; ie. the url should be http://myaddress.com/admin. This has to be tested in IIS.

Abhishek
  • 1,742
  • 2
  • 14
  • 25
TechDo
  • 18,398
  • 3
  • 51
  • 64

3 Answers3

4

You only have to host both project on their respective directory (IIS configuration needed) and build/deploy your apps with the base-href option :

ng build --prod --base-href=/admin // admin app
ng build --prod // public app
Jscti
  • 14,096
  • 4
  • 62
  • 87
  • Yes @Cetia, it worked for me. I manually changed the `` in index.html. – TechDo Jun 19 '19 at 09:44
  • you should not. ng serve will serve it on / when in dev mode, but will generate a build working on /admin with the option I given you. – Jscti Jun 19 '19 at 09:59
1

My answer would be mostly theoretical for this.

  1. Create a npm bundle of admin project (something like ng-packagr would help). There is a format to expose all the modules which you want to access outside of this project. You can find details on google about this. something like index.ts etc
  2. Include it in package.json of Main Project as dependency.
  3. Try to create a routing inside MainProject and use lazy loading in routing for better performance. Something like:
export const AppRoutes: Routes = [
    {
        path: '',
        component: 'IAmINMainProjec',
        canActivate: [TrafficGuard],
        pathMatch: 'full'
       // and what not..
    },
    {
        path: 'admin',
         loadChildren:
                    './modules/widget-wrappers/#AdminWrapperModule',
        canActivate: [AuthGuard]
    },

AdminWrapperModule


@NgModule({
    imports: [
        CommonModule,
        AdminModule,
    ]
})
export class AdminWrapperModule{}

the above code is just for reference purpose :D

Update

In my project, we have several modules (4 to be precise) similar to admin in your case, and we realized that it was very time consuming to have 4 projects getting build (with each project having build time of approx 7 mins). So we ended up implementing nrwl. This tool helped us to pull all 4 projects under our main project. This helped to reduce time as we no longer had to build 2 projects (one Admin and another MainProject) before actually deploying the code. Take a look at it if you really need that. If you need more segregation of projects then don't go for Nrwl.

Community
  • 1
  • 1
Shashank Vivek
  • 16,888
  • 8
  • 62
  • 104
  • Thanks @Shashank Vivek, let me try this. – TechDo Jun 19 '19 at 05:22
  • @TechDo Check my update as well. I have used it in my project but check if you really need to get into that direction. Its all project specific decisions – Shashank Vivek Jun 19 '19 at 06:05
  • 1
    Hi @Vivek, the "correct answer" marked method worked for me (plz refer it). So, to be frank, I didn't spend much time on your method. – TechDo Jun 26 '19 at 05:20
0

It worked for me with just one running locally and other one in local network Image of running both simultaneously

The one which you are running in local network using the following command :

ng serve --host 0.0.0.0

can be accessed using local ip address eg :

http://192.168.0.152:4200

Which can be accessed using following command in terminal windows :

ipconfig

on linux/mac:

ifconfig

and the other one which you are running using

ng serve

can be accessed using http://localhost:4200

Manoj
  • 1
  • 1