Угловой 2: 404 ошибка возникает при обновлении через браузер [дубликат]

обновление угловой 2 финал версия

в приложение.модуль.ТС:

• добавить импорт:

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

• и в провайдере NgModule добавьте:

  {provide: LocationStrategy, useClass: HashLocationStrategy}
  

пример (app.модуль.ТС):

import { NgModule }       from '@angular/core';
import { BrowserModule  } from '@angular/platform-browser';
import { AppComponent }   from './app.component';
import { HashLocationStrategy, LocationStrategy } from '@angular/common';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule],
    providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}],
    bootstrap: [AppComponent],
})
export class AppModule {}

---

альтернатива

Используйте RouterModule.forRoot с {useHash: true} аргумент.

пример:(от угловое документы)

import { NgModule } from '@angular/core';
...

const routes: Routes = [//routes in here];

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot(routes, { useHash: true })
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

для людей (как я), которые действительно хотят PathLocationStrategy (т. е. html5Mode) вместо HashLocationStrategy см. как настроить сервер для работы с html5Mode из сторонней Вики:

если у вас включен html5Mode, то # персонаж больше не будет использоваться в URL. Элемент # символ полезен, потому что он не требует настройки на стороне сервера. Без #, URL выглядит намного лучше, но он также требует серверной стороны переписывает.

здесь я копирую только три примера из Вики, в случае, если Вики потеряется. Другие примеры можно найти, выполнив поиск по ключевому слову "URL rewrite" (например ответ для Firebase).

Apache

<VirtualHost *:80>
    ServerName my-app

    DocumentRoot /path/to/app

    <Directory /path/to/app>
        RewriteEngine on

        # Don't rewrite files or directories
        RewriteCond %{REQUEST_FILENAME} -f [OR]
        RewriteCond %{REQUEST_FILENAME} -d
        RewriteRule ^ - [L]

        # Rewrite everything else to index.html to allow HTML5 state links
        RewriteRule ^ index.html [L]
    </Directory>
</VirtualHost>

документация для модуля перезаписи

nginx

server {
    server_name my-app;

    root /path/to/app;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

документация try_files

IIS

<system.webServer>
  <rewrite>
    <rules> 
      <rule name="Main Rule" stopProcessing="true">
        <match url=".*" />
        <conditions logicalGrouping="MatchAll">
          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
          <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
        </conditions>
        <action type="Rewrite" url="/" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>

У меня была та же проблема. Мой угловых приложение работает на сервере Windows.

Я решил эту проблему, сделав web.конфигурации на root

возможно, вы можете сделать это при регистрации вашего корня с помощью RouterModule. Вы можете передать второй объект со свойством "useHash: true", как показано ниже:

import { NgModule }       from '@angular/core';
import { BrowserModule  } from '@angular/platform-browser';
import { AppComponent }   from './app.component';
import { ROUTES }   from './app.routes';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule],
    RouterModule.forRoot(ROUTES ,{ useHash: true }),],
    providers: [],
    bootstrap: [AppComponent],
})
export class AppModule {}

Если вы используете угловой 2 до конца ASP.NET ядро 1 в Visual Studio 2015 Вы можете найти это решение от Юргена Гуча полезным. Он описывает это в блоге. Это было лучшее решение для меня. Поместите код C#, приведенный ниже, в свой стартап.cs public void Configure () непосредственно перед приложением.UseStaticFiles ();

app.Use( async ( context, next ) => {
    await next();

    if( context.Response.StatusCode == 404 && !Path.HasExtension( context.Request.Path.Value ) ) {
        context.Request.Path = "/index.html";
        await next();
    }
});

для людей, читающих это, которые используют Angular 2 rc4 или более позднюю версию, кажется, что LocationStrategy был перемещен с маршрутизатора на общий. Вам придется импортировать его оттуда.

Также обратите внимание на фигурные скобки вокруг 'обеспечить' линии.

главная.ТС

// Imports for loading & configuring the in-memory web api
import { XHRBackend } from '@angular/http';

// The usual bootstrapping imports
import { bootstrap }      from '@angular/platform-browser-dynamic';
import { HTTP_PROVIDERS } from '@angular/http';

import { AppComponent }         from './app.component';
import { APP_ROUTER_PROVIDERS } from './app.routes';
import { Location, LocationStrategy, HashLocationStrategy} from '@angular/common';

bootstrap(AppComponent, [
    APP_ROUTER_PROVIDERS,
    HTTP_PROVIDERS,
    {provide: LocationStrategy, useClass: HashLocationStrategy}
]);