Je me bats avec ça depuis un moment maintenant et j'ai décidé d'écrire un article.

Je construis une application simple page unique à l'aide de VS2017 sur ASP.Net Core 5.0 et Angular 2 sur un modèle extrait de ASP.NET Core Template Pack. L'application est censée gérer une base de données de listes de contacts.

L'idée que j'ai à l'esprit est que la page de démarrage par défaut «/ home» devrait afficher la liste des contacts utilisant HomeComponent. Tout le routage fonctionne bien, mais lorsque l'application démarre ou chaque fois que j'essaie de router vers '/ home', elle continue à aller à la page Index.cshtml de la vue ASP Home au lieu d'utiliser le routage angulaire.

Une idée de comment le faire passer par Angular à tout moment? Je voulais aligner le HomeComponent avec la route '/ home', mais à la place, il continue à aller sur la page ASP qui n'est là que pour dire 'Loading ...' dont je n'ai pas vraiment besoin (je pense).

J'ai essayé beaucoup de solutions différentes mais je n'ai rien réussi à faire fonctionner. Il me manque peut-être quelque chose d'évident ici car je ne suis pas trop avancé pour ces raisons, donc si vous pouvez rester basique, faites-le ;-)

Voici ma méthode Configure de Startup.cs:

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
    {
        loggerFactory.AddConsole(Configuration.GetSection("Logging"));
        loggerFactory.AddDebug();

        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
            app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
            {
                HotModuleReplacement = true
            });
        }
        else
        {
            app.UseExceptionHandler("/Home/Error");
        }

        app.UseStaticFiles();

        app.UseMvc(routes =>
        {
            routes.MapRoute(
                name: "default",
                template: "{controller}/{action}/{id}",
                defaults: new { controller = "Home", action = "Index" });

            routes.MapSpaFallbackRoute(
                name: "spa-fallback",
                defaults: new { controller = "Home", action = "Index",});
        });
    }

App.module.shared.ts:

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { AppComponent } from './components/app/app.component'
import { NavMenuComponent } from './components/navmenu/navmenu.component';
import { DetailsComponent } from './components/details/details.component';
import { EditComponent } from './components/editContact/editContact.component';
import { NewContactComponent } from './components/newContact/newContact.component';
import { HomeComponent } from './components/home/home.component';
import { ContactServices } from './services/services';

export const sharedConfig: NgModule = {
bootstrap: [ AppComponent ],
declarations: [
    AppComponent,
    NavMenuComponent,
    DetailsComponent,
    EditComponent,
    NewContactComponent,
    HomeComponent
],
providers: [ContactServices],
imports: [
    RouterModule.forRoot([
        { path: '', redirectTo: 'home', pathMatch: 'full' },
        { path: 'home', component: HomeComponent },
        { path: 'details', component: DetailsComponent },
        { path: 'new', component: NewContactComponent },
        { path: '**', redirectTo: 'home' }
    ])
]};

Index d'accueil de l'ASP.cshtml:

@{
ViewData["Title"] = "Home Page";
}
<app>Loading...</app>

<script src="~/dist/vendor.js" asp-append-version="true"></script>
@section scripts {
<script src="~/dist/main-client.js" asp-append-version="true"></script>
} 

Aaaand home.component.ts:

import { Component } from '@angular/core';
import { ContactServices } from '../../services/services';
import { Response } from '@angular/http';

@Component({
selector: 'home',
templateUrl: './home.component.html'
})
export class HomeComponent {
public ContactList = [];
public constructor(private conService: ContactServices) {
    this.conService.getContactList()
        .subscribe(
        (data: Response) => (this.ContactList = data.json())
        );
    }
}

Merci d'avance les gars! Tout conseil sera apprécié.

6
WAR 8 sept. 2017 à 01:07

2 réponses

Meilleure réponse

J'ai adopté une approche différente et j'ai reconstruit mon application en utilisant le tutoriel qui se trouve sous ce lien.

Il s'agit d'une solution dans laquelle vous créez d'abord l'interface API de l'application Web ASP.NET CORE et installez Angular dessus. Un peu d'ingénierie, fonctionne directement à partir de Visual Studio et prend peu de temps à mettre en place.

0
WAR 21 oct. 2017 à 16:57

Y a-t-il une raison pour laquelle vous utilisez asp.net avec angular? Je vous suggère FORTEMENT d'utiliser angular cli. L'importation de bibliothèques et la publication sont très difficiles avec angular + asp.net.

L'utilisation de cli angulaire sera également toujours "angulaire"

-4
HelpinCodingpls 7 sept. 2017 à 22:23