Single Page Application built with Angular 4 and TypeScript
Back-end API built with ASP.NET Core
It shows how to use several controls such as Modals, DateTimePicker, Pagination in Angular 4 applications.
Installation Instructions
Setup the API from here or read the accosiated post
Clone the Scheduler.SPA app and open it in your favorite text editor
Open a command prompt and run the following commands
npm install
bower install
Start the API and set the _apiURI inside the utils/config.service.ts to point it
Start the SPA by typing npm start
Microsoft Azure Deployment
Learn how to deploy an Angular 4 app on Microsoft Azure, here.
Donations
For being part of open source projects and documenting my work here and on chsakell's blog I really do not charge anything. I try to avoid any type of ads also.
If you think that any information you obtained here is worth of some money and are willing to pay for it, feel free to send any amount through paypal.
After run npm install:
Error: typings ERR! message Unable to connect to "https://api.typings.org/entries/dt/jquery/tags/1.10.0%2B20160417213236" typings ERR! caused by connect ECONNREFUSED 104.24.112.177:443
Console:
` c:\Dev\angular\angular2-features>npm install
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: graceful-fs v3.0.0 and before will fail on node releases >= v7.0. Please update
to graceful-fs@^4.0.0 as soon as possible. Use npm ls graceful-fs to find it in the tree.
npm WARN deprecated [email protected]: Use uuid module instead
Hello. After several days of effort I am unable to make this work. I don't know if it's user error on my end or not but I have followed the simple and straightforward directions that are listed but to no avail. I have done the appropriate investigation and while I've found many issues with similar symptoms I have yet to find something to resolve my issue. And to be clear I am not making any alterations to the code other than what is required to set the correct API URL. I'm simply trying to get the base repo code to work. And for what it's worth I have tried both the Master and Production branches.
Any assistance would be appreciated.
Details...
cloned and setup and launched the repo for the backing API for this project (dotnetcore-entityframework-api)
success
npm start
browser launched with loading spinner but nothing more
chrome browser dev tools results
Request URL: http://localhost:3000/traceur
Request Method: GET
Status Code: 404 Not Found
Remote Address: [::1]:3000
initiator: zone.js:1382
When updating a schedule a DbUpdateConcurrencyException is generated from the scheduler.API when updating a schedule in the browser.
The problem is in Controllers\SchedulesController.cs of Scheduler.API.
If the following is commented out in the-- public IActionResult Put(int id, [FromBody]ScheduleViewModel schedule) --handler I no longer get the exception.
// Remove current attendees
//_attendeeRepository.DeleteWhere(a => a.ScheduleId == id);
//foreach (var userId in schedule.Attendees)
//{
// _scheduleDb.Attendees.Add(new Attendee { ScheduleId = id, UserId = userId });
//}
I am using Windows VS2015 for the API. Visual Studio Code for the Browser.
ISSUE
the entityframework-api which this repository uses to save data base changes on updating(http put) schedules throws a DbUpdateConcurrencyException when updating schedules. The data base saves, but an exception may have future side effects. Below is the fix.
MODULE- dotnetcore-entityframework-api-master\Scheduler.Data\Repositories\EntityBaseRepository.cs
HANDLER- public virtual void Commit()
CHANGED FROM -
context.SaveChanges();
CHANGED TO +
try
{
_context.SaveChanges();
}
catch(DbUpdateConcurrencyException ex)
{
// nothing for now
}
I have clone this app,
When I run this app and if I pass URL route parameter different compare to configured in app.route.ts it will not working.
So what I have to do if I want to check caseInsensitive URL ?
Code was updated to support @angular/forms but is still using import { FORM_DIRECTIVES, NgForm } from '@angular/common' when this should be changed to '@angular/forms' and omit FORM_DIRECTIVES....see https://angular.io/docs/ts/latest/guide/forms.html