Angular – zaczynam przygodę pełną zakrętów

Zaczęło się od kilku telefonów od „poszukiwaczy programistów”. Każdy oczekiwał znajomości Angulara, a ja liznąłem tylko Aurelię, a Angulara nie znam. Pełen zapału zacząłem od książki Valerio De Sanctis – ASP.NET Core 2 and Angular 5. Zacząłem korzystać, zgodnie z zaleceniami książki z szablonu dla Angulara 5 i poległem na całej szerokości. Moduł HttpClient nie był obecny w pakiecie common, a wielokrotne odinstalowywanie i instalowanie tego pakietu nie powodowało pojawienie się tego modułu tam gdzie cały internet się go spodziewa.

Postanowiłem podnieść wersję Angulara do wersji 6 co sprawiło, że moduł się pojawił, ale za to dostawałem błąd podczas próby ściągnięcia danych z części serwerowej aplikacji. Po wielu próbach stwierdziłem, że chrzanię te wszystkie szablony i zrobię to bez pomocy tych wspaniałych udziwnień, które czasami działają, a czasami nie.

Okazało się, że stworzenie samej aplikacji Angular to bułka z masłem. Strona Angulara pokazuje, że w trzech poleceniach można uruchomić część kliencką aplikacji SPA opartej o Angulara.

npm install -g @angular/cli
ng new [nazwa aplikacji a właściwie folderu, w którym będzie utworzona struktura katalogów]
cd [nazwa aplikacji]
ng serve --open

i voila – działa.

Po stronie serwera musiałem zmodyfikować plik Startup.cs, o wywołanie CORS:

public void ConfigureServices(IServiceCollection services)
{
	services.AddCors(options =>
	{
		options.AddPolicy("AllowAll", p =>
		{
			p.AllowAnyOrigin()
				.AllowAnyHeader()
				.AllowAnyMethod();
		});
	});

	services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);

	// In production, the Angular files will be served from this directory
	services.AddSpaStaticFiles(configuration =>
	{
		configuration.RootPath = "ClientApp/dist";
	});
}

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
	if (env.IsDevelopment())
	{
		app.UseDeveloperExceptionPage();
	}
	else
	{
		app.UseExceptionHandler("/Error");
		app.UseHsts();
	}

	app.UseHttpsRedirection();
	app.UseStaticFiles();
	app.UseSpaStaticFiles();
	app.UseCors("AllowAll");

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

	app.UseSpa(spa =>
	{
		spa.Options.SourcePath = "ClientApp";

		if (env.IsDevelopment())
		{
			spa.Options.StartupTimeout = new TimeSpan(days: 0, hours: 0, minutes: 1, seconds: 30);
			spa.UseAngularCliServer(npmScript: "start");
		}
	});
}

Następnie, po uruchomieniu aplikacji okazało się, że problem, który zniechęcił mnie do szablonu Angulara 6 to błąd w książce dotyczący niewłaściwego routingu po stronie serwerowej, która zwracał obiekt, a nie ich tablicę co generowało błąd:

Cannot find a differ supporting object '[object Object]' of type 'object'. 
NgFor only supports binding to Iterables such as Arrays.

no ale trudno, wcześniej tego nie wyłapałem, a teraz sobie zrobię wszystko sam.

I w końcu aplikacja wyświetliła wynik z pierwszego żadania do serwera.