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.