Question

我使用visual studio代码创建了angular 4 web ui项目。编写后端API代码并使用visual studio 2017。当我在命令提示符下执行ng serve并键入localhost：// 4200时，应用程序将加载并显示主组件。但是，当我尝试通过IIS运行应用程序时，它不会加载主组件并永远需要。我看到错误消息无法在调试器选项卡中加载http://mrdb.com

项目配置为通过以下方式设置在IIS上运行

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.

因此，当我在浏览器上运行mrb.com时，它将加载index.html，而index.html将查找要加载的相应模块和组件。

我还为应用程序创建了一个主机文件条目。参见下面的

127.0.0.1          mrdb.com

项目的绑定设置为

“高级”设置如下所示

应用程序池如下所示

api项目中的index.html如下所示

    <!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模块

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() {
  }

}

错误页面

我已经验证了webapi项目的web.config中的连接字符串是否正确，并且还修改了应用程序池标识以包含对数据库具有权限的服务帐户，该数据库当前在下面的屏幕截图中显示了ApplicationPoolIdentity。

Answer 1

我设法解决了。我在IIS中重命名了主机名，并更改了端口号，但它确实有效。

Answer 2

使用IIS时，可以使用Startup.cs文件路由到定义的页面。

Angular 4 app无法通过IIS加载

2 个答案: