Swagger UI not rendered :: AspNetCore - swagger

Question

I wanted to have API Documentation with the use of NSwag.AspNetCore.11.18.7...package has been installed and necessary settings are set THEN executed dotnet run... WHEN I navigate to http://localhost:5000/swagger the API DOCS could not be displayed. Error message at the console are the following:
ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'swagger'
Error: Cannot match any routes. URL Segment: 'swagger'
at ApplyRedirects.noMatchError (router.js:1719)
at CatchSubscriber.eval [as selector] (router.js:1684)
at CatchSubscriber.error (catchError.js:105)
at MapSubscriber.Subscriber._error (Subscriber.js:131)
at MapSubscriber.Subscriber.error (Subscriber.js:105)
at MapSubscriber.Subscriber._error (Subscriber.js:131)
at MapSubscriber.Subscriber.error (Subscriber.js:105)
at MapSubscriber.Subscriber._error (Subscriber.js:131)
at MapSubscriber.Subscriber.error (Subscriber.js:105)
at LastSubscriber.Subscriber._error (Subscriber.js:131)
at ApplyRedirects.noMatchError (router.js:1719)
at CatchSubscriber.eval [as selector] (router.js:1684)
at CatchSubscriber.error (catchError.js:105)
at MapSubscriber.Subscriber._error (Subscriber.js:131)
at MapSubscriber.Subscriber.error (Subscriber.js:105)
at MapSubscriber.Subscriber._error (Subscriber.js:131)
at MapSubscriber.Subscriber.error (Subscriber.js:105)
at MapSubscriber.Subscriber._error (Subscriber.js:131)
at MapSubscriber.Subscriber.error (Subscriber.js:105)
at LastSubscriber.Subscriber._error (Subscriber.js:131)
at resolvePromise (zone.js:809)
at resolvePromise (zone.js:775)
at eval (zone.js:858)
at ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:4736)
at ZoneDelegate.invokeTask (zone.js:420)
at Zone.runTask (zone.js:188)
at drainMicroTaskQueue (zone.js:595)
Startup.cs
public void ConfigureServices(IServiceCollection services)
{
services.AddMvc();
// In production, the Angular files will be served from this directory
services.AddSpaStaticFiles(configuration =>
{
configuration.RootPath = "ClientApp/dist";
});
services.AddSwagger();
}
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
else
{
app.UseExceptionHandler("/Home/Error");
}
app.UseStaticFiles();
app.UseSpaStaticFiles();
app.UseMvc(routes =>
{
routes.MapRoute(
name: "default",
template: "{controller}/{action=Index}/{id?}"
);
});
app.UseSpa(spa =>
{
// To learn more about options for serving an Angular SPA from ASP.NET Core,
// see https://go.microsoft.com/fwlink/?linkid=864501
spa.Options.SourcePath = "ClientApp";
if (env.IsDevelopment())
{
spa.UseAngularCliServer(npmScript: "start");
}
});
app.UseSwaggerUi();
app.MapWhen(r => !r.Request.Path.Value.StartsWith("/swagger"), builder =>
{
builder.UseMvc(routes =>
{
routes.MapSpaFallbackRoute(
name: "spa-fallback",
defaults: new {controller = "Home", action = "Index"}
);
});
});
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { HttpClientModule } from '#angular/common/http';
import { RouterModule } from '#angular/router';
import { Ng2Webstorage, SessionStorageService } from 'ngx-webstorage';
import { AppComponent } from './app.component';
import { NavMenuComponent } from './nav-menu/nav-menu.component';
import { HomeComponent } from './home/home.component';
import { CounterComponent } from './counter/counter.component';
import { FetchDataComponent } from './fetch-data/fetch-data.component';
import { HeaderComponent } from './components/header/header.component';
import { FooterComponent } from './components/footer/footer.component';
import { MenuComponent } from './components/menu/menu.component';
import { SettingComponent } from './components/setting/setting.component';
import { RouteGuardService } from './services/route-guard.service';
import { LoginComponent } from './components/login/login.component';
import { UserService } from './services/user.service';
import { LogoutComponent } from './components/logout/logout.component';
#NgModule({
declarations: [
AppComponent,
NavMenuComponent,
HomeComponent,
CounterComponent,
FetchDataComponent,
HeaderComponent,
FooterComponent,
MenuComponent,
SettingComponent,
LoginComponent,
LogoutComponent
],
imports: [
BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
HttpClientModule,
FormsModule,
Ng2Webstorage,
RouterModule.forRoot([
{ path: '', component: HomeComponent, canActivate: [RouteGuardService], pathMatch: 'full' },
{ path: 'counter', component: CounterComponent },
{ path: 'fetch-data', component: FetchDataComponent },
{ path: 'login', component: LoginComponent },
{ path: 'logout', component: LogoutComponent },
{ path: 'home', component: HomeComponent, canActivate: [RouteGuardService] }
])
],
providers: [RouteGuardService, UserService, SessionStorageService],
bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

You have to add the configuration for services.AddSwagger(); and app.UseSwaggerUi();
Also you can switch the nuget package to Swashbuckle.AspDotNet, and cofigure to the following:
ConfigureServices:
services.AddSwaggerGen(c =>
{
c.SwaggerDoc("v1", new Info { Title = "NFC Demo Ci2", Version = "v1" });
});
Configure:
app.UseSwagger();
app.UseSwaggerUI(c =>
{
c.SwaggerEndpoint("/swagger/v1/swagger.json", "Catalogo de servicios");
});
I hope this has been useful for you
bye