发布在IIS上时Angular 2出现错误

Question

发布在IIS上时Angular 2出现错误

6

我已经在Angular 2中创建了演示应用程序，在本地运行时它可以正常工作，但是在发布到IIS服务器上时出现错误。

我遇到的错误是：

Failed to load resource: the server responded with a status of 404 (Not Found)

这里是我的代码index.html。请查看

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>MyApp</title>
  <base href="/">
  <link rel="stylesheet" href="https://bootswatch.com/darkly/bootstrap.min.css">  
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <script>
    System.import('app').catch(function(err){ console.error(err); });
  </script>
</head>
<body>
  <app-root>Loading...</app-root>
</body>

</html>

app.router.ts

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

//import {AppComponent} from './app.component'
import {AboutComponent} from './about/about.component'
import {TechnologyComponent} from './technology/technology.component'

export const router : Routes = [
    {path:'',redirectTo:'about',pathMatch:'full'},
    {path:'about',component:AboutComponent},
    {path:'tachnology',component:TechnologyComponent}
]
export const routes: ModuleWithProviders = RouterModule.forRoot(router)

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

//import { HashLocationStrategy, LocationStrategy } from '@angular/common'

import {routes} from './app.router'
import { AppComponent } from './app.component';
import { AboutComponent } from './about/about.component';
import { TechnologyComponent } from './technology/technology.component';

import {AboutSrvice} from './about/about.service'
@NgModule({
  declarations: [
    AppComponent,
    AboutComponent,
    TechnologyComponent,
  ],

  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    routes
  ],
  //There is two ways you can use service first here you can add service in provider or either you can add it in about.component.ts file in @Component({}) section 
 // providers: [AboutSrvice,{provide: LocationStrategy, useClass: HashLocationStrategy}],
 providers: [AboutSrvice],
  bootstrap: [AppComponent]
})
export class AppModule { }

我是否漏掉了什么或需要额外的内容来发布？

- Bharat

你是制作一个构建还是直接将文件传输到 IIS？如果这是一个愚蠢的问题，请原谅。 - Tarek.Eladly

是的，可以通过类似于 ng build 和 ng build --prod 的命令来构建项目，并从 dist 文件夹中获取文件。 - Bharat

请尝试运行以下命令：ng build --prod --aot --no-sourcemap。 - Tarek.Eladly

@Tarek.Eladly 仍然是相同的错误。 - Bharat

确保您的IIS服务器文件夹具有IIS_IUSRS组和IUSR用户访问所需的权限。（右键单击文件夹->属性->安全->编辑->添加，然后输入这些内容。您可以单击“检查名称”按钮以确保您输入的是正确的内容） - Tarek.Eladly

显示剩余2条评论

3个回答

1

结果表明这是版本冲突，因此

让我们玩:D

npm uninstall -g @angular/cli
npm cache clean

然后在此之后。

npm install -g @angular/cli@latest --save

在新文件夹中创建新项目

ng new TheProjectName 关闭编辑器

将旧项目的src复制到新项目中

运行编辑器

构建和部署

ng build --prod --aot --no-sourcemap --base-href

- Tarek.Eladly

1

@给踩负评的人，请至少添加评论，这个解决了我的问题，所以它不可能是错的。 - Bharat

<base href="/websitename/"> 我也遇到了同样的问题，这个解决方案解决了！ - Lazy Programer

1

我遇到了同样的问题，我只是在index.html中进行了更改。

<base href="/websitename/">

- Suraj Sakhare

这个解决方案帮了我 :) - Lazy Programer

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Swoox · Accepted Answer

好的，问题是Angular使用基础引用“/”来创建所有内容。因此，它创建的index.html文件将包含具有/filename的文件。

您需要做的是删除基本引用并将其更改为<base href="">

然后查看webpack文件，在webpack.prod中删除。更改：

publicPath：'/'，

进入：

publicPath：''，

现在如果使用路由，请阅读https://angular.io/api/common/HashLocationStrategy并实施它。

编辑

对于CLI，您可以执行以下操作而不是更改.prod webpack：

ng build --prod --aot --no-sourcemap --base-href ""