Обновление приложения Angular 2 генерирует ошибку 404 - Страница не найдена исключение

ProgramBox

Обновление приложения Angular 2 генерирует ошибку 404 — Страница не найдена исключение

Post author:admin
Запись опубликована:19 февраля, 2023
Post category:Вопросы по программированию

#asp.net #angular #angular2-routing

#asp.net #angular #angular2-маршрутизация

Вопрос:

Я разрабатываю приложение Angular 2, которое использует KendoUI datagrid в asp.net веб-приложение. Я установил index.html в качестве начальной страницы. Когда я нажимаю клавишу F5, index.html загружается. При нажатии на меню Риски отображается таблица данных с данными, которые определены на risk-list.component.html странице. Его URL localhost/risks -адрес. Если я нажму F5, я получу ошибку 404 страница не найдена. Может кто-нибудь сказать мне, в чем может быть проблема и как я могу ее исправить?

Это мой код:

список рисков.Component.ts

 import { Component, OnInit } from '@angular/core';
import { Risk } from './risk';
import { RiskService } from './risk.service';

@Component({
    moduleId: module.id,
    selector: 'rm-risks',
    templateUrl: '/app/risk-list.component.html',
    providers: [RiskService]
})

export class RiskListComponent implements OnInit {
    title = 'Risk List';
     risks: Risk[];

    constructor(private _riskService: RiskService) {
        console.log(this.risks);
    }

    getRisks(): void {
        this._riskService.getRisks().then(risks => this.risks = risks);

    }

    ngOnInit(): void {
        this.getRisks();
    }
};

risk-list.component.html

 <kendo-grid [data]="risks">
    <kendo-grid-column field="reference" title="Reference" width="120">
    </kendo-grid-column>
    <kendo-grid-column field="insuredName" title="Insured Name">
    </kendo-grid-column>
    <kendo-grid-column field="inceptionDate" title="Inception Date" width="230">
    </kendo-grid-column>
    <kendo-grid-column field="riskType" title="Risk Type" width="120">
    </kendo-grid-column>
    <kendo-grid-column field="Status" title="Status">
    </kendo-grid-column>
    <kendo-grid-column field="grossPremium" title="Gross Premium" width="230">
    </kendo-grid-column>
    <kendo-grid-column field="allocatedTo" title="Allocated To" width="120">
    </kendo-grid-column>
    <kendo-grid-column field="allocatedCompany" title="Allocated Company">
    </kendo-grid-column>
    <kendo-grid-column field="Discontinued" width="120">
        <template kendoCellTemplate let-dataItem>
            <input type="checkbox" [checked]="dataItem.Discontinued" disabled />
        </template>
    </kendo-grid-column>
</kendo-grid>

risk.service.ts

 import { Injectable } from '@angular/core';
import { Risk } from './risk';
import { Risks } from './mock-risk';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/from';


@Injectable()
export class RiskService {

    getRisks(): Promise<Risk[]> {
        return Promise.resolve(Risks);
    }

}

risk.ts

 export class Risk {
    riskId: number;
    reference: string;
    insuredName: string;
    inceptionDate: string;
    riskType: string;
    status: string;
    grossPremium: number;
    allocatedTo: string;
    allocatedCompany: string;

}

mock-risk.ts

 import { Risk } from './risk'

export const Risks: Risk[] = [

    {

        "riskId": 1,
        "reference": "HISC9308336",
        "insuredName": "SA 84161",
        "inceptionDate": "March 19, 2016",
        "riskType": "Quote",
        "status": "Indication",
        "grossPremium": 100,
        "allocatedTo": "Broker User",
        "allocatedCompany": "Broker"
    },
    {

        riskId: 2,
        reference: "HISC9308337",
        insuredName: "SA 84161",
        inceptionDate: 'April 22, 2016',
        riskType: 'Quote',
        status: 'Indication',
        grossPremium: 300,
        allocatedTo: 'Broker User',
        allocatedCompany: 'Broker'
    }

];

risks.module.ts

 import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { RiskListComponent } from './risk-list.component';
import { RiskService } from './risk.service';
import { RiskRoutingModule } from './risks-routing.module';
import { GridModule } from '@progress/kendo-angular-grid';
@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        RiskRoutingModule,
        GridModule

    ],
    declarations: [
        RiskListComponent
    ],
    providers: [
        RiskService
    ]
})
export class RisksModule { }

риски-routing.module.ts

 import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { RiskListComponent } from './risk-list.component';

@NgModule({
    imports: [
        RouterModule.forChild([
            { path: 'risks', component: RiskListComponent }
        ])
    ],
    exports: [
        RouterModule
    ]
})
export class RiskRoutingModule { }

app.component.html

 <h1>Angular Router</h1>
<nav>
    <a routerLink="/risks" routerLinkActive="active">Risks</a>

</nav>
<router-outlet></router-outlet>

app.component.ts

 import { Component } from '@angular/core';

    @Component({
        moduleId: module.id,
        selector: 'my-app',
        templateUrl:'/app/app.component.html'
    })
    export class AppComponent { }

app-routing.module.ts

 import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { RiskListComponent } from './risk-list.component'
import { HomeComponent } from './home.component'

@NgModule({
    imports: [
        RouterModule.forRoot([

            { path: '', component: HomeComponent }
        ])
    ],
    exports: [
        RouterModule
    ]
})
export class AppRoutingModule { }

main.ts

 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

Ответ №1:

Эта проблема решается путем реализации HashLocationStrategy , которая добавляет # ко всем вашим маршрутам. Например, http://localhost/myComponent становится http://localhost/#/myComponent . Вы достигаете этого, добавляя HashLocationStrategy к AppModule поставщикам:

 { provide: LocationStrategy, useClass: HashLocationStrategy }

Конечно, вам нужно импортировать LocationStrategy и HashLocationStrategy из @angular/common :

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

Для получения дополнительной информации проверьте Angular 2 Router amp; Navigation — Стили URL-адресов браузера.

1. Ссылка, которой вы поделились, подсказывает мне поместить RouterModule.forRoot(routes, { useHash: true }) // …/#/crisis-center/ в app.module.ts. В моем примере я считаю, что это app-routing.module.ts. Но в моем app-routing.module.ts у меня есть RouterModule.forRoot([ { path: «, component: HomeComponent } ]) Как мне добавить эту строку сюда, поскольку она выдает ошибку компиляции

2. @Tom В вашем случае это должно быть RouterModule.forRoot([ { path: '', component: HomeComponent } ], { useHash: true })

3. Спасибо, что стратегия хеширования сработала. Я прочитал, что LocationStrategy используется по умолчанию. Если я установлю useHash = false и обновлю браузер, это не сработает.

Ответ №2:

При обновлении браузера он отправит запрос get на сервер с текущим URL-адресом, поскольку angular использует навигацию в стиле HTML 5, URL-адрес не будет иметь смысла для сервера. Либо обновите свой сервер, чтобы обслуживать index.html по определенным путям или используйте HashLocationStrategy .

Преимущество использования навигации в стиле HTML 5 заключается в том, что вы можете смешивать свое приложение angular со страницами, отображаемыми сервером.

Пример того, как это работает с asp.net : http://blog .johnnyreilly.com/2015/05/a-tale-of-angular-html5mode-aspnet-mvc.html

Больше информации об angular: https://angular.io/docs/ts/latest/guide/router.html #!#стили URL-адресов браузера

Ответ №3:

Лучший способ избавиться от этой ошибки 404 страница не найдена, вы должны импортировать HashLocationStrategy в appModule.ts

Когда я ранее работал над Angular, в моем проекте возникала ошибка того же типа, поэтому я создал простой репозиторий для такого рода ошибок (страница 404 не найдена), это может вам помочь. Вот ссылка -> AngularAppExample