I have created angular 4 web ui project using visual studio code. The backend API code is written and use visual studio 2017 for it. When I execute ng serve on the command prompt and type localhost://4200 , the application loads and shows me the home component. But when i try to run the application via IIS, it doesnt load the home component and takes for ever. I can see error message cannot load http://mrdb.com in the debugger tab
The project is configured to run on IIS by setting it up the following way
1. The virtual directory points the MRDB.WEB.API folder
2. The index.html in the web api project points to a folder called MRDB_Client. It contains files generated by web.ui project. Thats when we run ng build. So it contains all the angular modules and components to load. The index.html page contains the app-root tag as well.
So when I run mrb.com on the browser, it will load the index.html which in turn will look for the appropriate modules and components to be loaded.
I have also made a host file entry for the application.See below
127.0.0.1 mrdb.com
The binding for the project is set as
The Advanced setting looks as follows
The application pool looks as follows
The index.html in the api project looks as follows
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<base href="./" />
<title>MRDB</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<meta name="keyword" content="MRDB">
</head>
<body>
<div class="notifyjs-corner"></div>
<app-root>Loading...</app-root>
<script type="text/javascript" src="MRDB_Client/inline.bundle.js"></script>
<script type="text/javascript" src="MRDB_Client/polyfills.bundle.js"></script>
<script type="text/javascript" src="MRDB_Client/scripts.bundle.js"></script>
<script type="text/javascript" src="MRDB_Client/styles.bundle.js"></script>
<script type="text/javascript" src="MRDB_Client/vendor.bundle.js"></script>
<script type="text/javascript" src="MRDB_Client/main.bundle.js"></script>
</body>
</html>
app.module
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {FormsModule} from '@angular/forms';
import {HttpModule} from '@angular/http'
import { AppComponent } from './app.component';
import { NavbarComponent } from './navbar/navbar.component';
import { TopbarComponent } from './topbar/topbar.component';
import { FooterbarComponent } from './footerbar/footerbar.component';
import { MRDBGlobalConstants } from './shared/mrdb.global.constants';
import {AppRoutingModule} from './app.routing';
import {HomeComponent} from './home/home.component';
import {MovieComponent} from './movie/movie.component';
import { MRDBCommonService } from './shared/services/mrdb.common.service';
import { NotFoundComponent } from './not-found/not-found.component';
import { SharedModule } from './shared/shared.module';
@NgModule({
declarations: [
AppComponent,
FooterbarComponent,
TopbarComponent,
NavbarComponent,
MovieComponent,
HomeComponent,
NotFoundComponent
],
imports: [
BrowserModule,
HttpModule,
SharedModule,
AppRoutingModule
],
providers: [MRDBGlobalConstants,
MRDBCommonService],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component
import { Component ,ViewContainerRef } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
constructor(public viewRef : ViewContainerRef) {
}
}
app.routing module
import {NgModule} from '@angular/core';
import {Routes,RouterModule} from '@angular/router';
import {MovieComponent} from '../app/movie/movie.component';
import {HomeComponent} from '../app/home/home.component';
import {NotFoundComponent} from './not-found/not-found.component';
export const appRoutes:Routes = [
{path: '', component: HomeComponent},
{path: 'movie', component : MovieComponent},
{path: '**',component : NotFoundComponent}
];
@NgModule({
imports:[RouterModule.forRoot(appRoutes,{ useHash: true})],
exports:[RouterModule]
})
export class AppRoutingModule {}
home.component
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
Error page
I have verified that the connection string is correct in web.config of the webapi project and also amended the app pool identity to contain service account that has permissions on the database which is currently showing ApplicationPoolIdentity in the screenshot below.
