在iis上发布角2错误

问题描述:

我已经在角2中创建了演示应用程序,它在当地运行时工作正常,但在iis服务器上发布时出现错误。在iis上发布角2错误

这个错误我得到

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

enter image description here

这里是我的代码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 { } 

是否有我缺少的东西或需要发布任何额外的内容?

+0

你做一个构建或者你直接把文件带到IIS?对不起,如果这是一个愚蠢的问题。 –

+0

是制作像'ng build'还有'ng build --prod'并从dist文件夹中获取文件 – Bharat

+0

请试试这个'ng build --prod --aot --no-sourcemap' –

它燕鸥的是,它是在版本冲突,从而

让我们玩:d

npm uninstall -g @angular/cli 
npm cache clean 

那之后

npm install -g @angular/[email protected] --save 

在新文件夹中创建新项目

纳克新TheProjectName

关闭编辑器

副本SRC从旧项目向新项目

运行编辑

构建和部署

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

@downvoters请至少添加评论,这是解决我的问题,所以它不会是错的 – Bharat

+0

谢谢老兄:'( –

好的问题是Angular使用基本参考“/”做所有事情。因此,它创建的index.html将包含文件/文件名

你所要做的就是卸下底座裁判并将其更改为<base href="">

然后看看你的WebPack文件和webpack.prod删除。改变:

publicPath: '/',

分为:

publicPath: '',

现在,如果使用路由阅读本https://angular.io/api/common/HashLocationStrategy并执行它。

EDIT

对于CLI而不是改变。PROD的WebPack你可以这样做:

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

+0

没有找到任何'publicPath:'我没有使用webpack – Bharat

+1

作为你的答案也是正确的+1 – Bharat

+0

嗯,我认为这是basehref是从一开始的问题。没有使用最新版本的cli,它应该已经工作。祝你今天愉快。 – Swoox