This blog has now moved (not far) here
The Angular 2 framework has now been released so it’s a great time to jump in and learn the ropes. However, whilst we can relax our attention on the changing API’s in the framework for a short time, we’re still faced with the endlessly changing world of front end tooling.
Webpack is currently top of the pile for all of our developer workflow needs. But what else is there and where do we start?
A fork of the ember cli that’s recently been updated to support webpack replacing systemjs. This is almost certainly going to be the dominant player going forward as it has some prominent angular community contributors. Remember that much of the featureset comes from webpack rather than the cli itself.
- Your lowest friction option for getting a project up an running.
- The generators are really useful for creating the often repeated boilerplate in an Angular app.
- The generators help maintain consistency across an application in the absence of existing coding standards.
- Built on test first principles. Unit and e2e tests are baked into the generators.
- Performance overall is mediocre. Initialising a new project or running tests for the first time can be very slow.
- Still in beta and past changes show they’re not afraid to move the goal posts by quite some margin.
- Currently no OOB support for cache busting in the webpack build.
- The inline help system isn’t good.
- Due to the development cadence it’s difficult to get answers to problems. Most answered questions on stackoverflow are long out of date.
ASP.NET Core Yeoman generators
If you’re looking at developing an Angular application using ASP.NET Core for the backend these generators are worth a look.
This is a great video by Steve Sanderson at NDC Sydney 2016 discussing their capability in some detail.
Community Starter Templates
These are a couple of github projects that provide a basic application along with some preconfigured tooling. Generally they’re going to provide the same bootstrapped project experience as you’ll get from the angular cli but in a slightly lighter touch template.
Low touch template with testing baked in and a solid README to get you going. As of this writing still being updated regularly.
Gulp based build – not a bad thing! It’s an older project but it’s still being updated. Again the README is solid and there are a number of forked reference sites linked that may prove handy.
We’re certainly not short of demo solutions and todo apps but I was pleased to receive an email today with details on the now comprehensive list of Azure code samples available for download here.
Of particular interest to me are the identity management and authentication samples I’ll be hooking into Dynamics CRM 2016 and of course anything node related will always get my attention.
TL;DR If you are struggling with
npm install failing on a package you are convinced is no longer a dependency of your current package.json structure. Try clearing out your node_modules folder or take a look at the
npm prune command.
I know this post is quite a long one but most of the content was created in realtime as I was working the problem. I’m a voracious note taker so figured I’d just write up my notes as a blog post as I went along.
I have a little express website running on my raspberry pi B+ from home. I deploy to this site using a post-receive git hook that deploys the master branch and runs
npm install --production to ensure the latest dependencies are installed. Notice that I use the –production switch to ensure devDependencies are not installed.
After trying to access this site following a push I found the site to be unavailable. I use forever to maintain the node process so I checked the logs and noticed a number of errors indicating new dependencies had not been installed.
I ssh’d into the server and run
npm install --production manually and saw that it was taking an unusually long time to complete eventually failing due to native module compilation failure.
Here are the new packages my latest commit has introduced:
As you can see, passport and passport-local are the only packages that should be installed. However, after I traced the failed module up the dependency tree shown below you can see that npm was trying to install browser-sync whose dependency graph relies on native modules.
At this point I checked online to see if there were any known issues but only came up with this github issue which is old and closed.
Let’s see what the status of the
--production switch is in the current npm docs
With the –production flag (or when the NODE_ENV environment variable is set to production), npm will not install modules listed in devDependencies.
That seems consistent with my understanding. So let’s make sure we’re on the latest version of npm and see if that fixes it.
My npm version (at the the time of posting) is
3.3.12, let’s update with the utter brain f*ck that is self updating software.
sudo npm install npm -g
The update has taken us to
3.6.0 but having tried to run
npm install --production again I’m getting the same result with a failed compile.
So I know that the dependency causing the problem is browser-sync. Let’s confirm this by removing it from package.json. When I now run
npm install it shouldn’t matter whether it does or doesn’t install devDependencies as the package causing the problem isn’t in either section.
To my surprise this still fails! OK
npm install is clearly not just running through the package.json and installing the specified packages and their dependencies as I expected.
The next logical step (yes I know, many of you may have arrived at this point long ago) is to delete my node_modules folder and rerun
Success! Everything installs as required.
What’s going on? Well, it would seem that
npm install doesn’t just install packages and dependencies defined in your package.json. Instead it sees your package.json as simply the top level in the dependency graph. Once it’s completed the install for all the packages in your package.json, it must then start enumerating all of the packages under node_modules and repeat the process for their package.json files.
This behaviour makes sense and more importantly for me would explain how I ended up with this problem. My git hook script does an npm install without the –production switch. After I’d fixed this up as part of my analysis of this issue I’d fixed the problem for future deployments but I’d left my node_modules folder in an invalid state because the failing module (browser-sync) was still in there.
Further reading on this problem shows there is an npm command called
prune that will clear all dangling dependencies from your node_modules folder based on your current package.json. In fact we can do the following to clear out just our devDependencies, a common requirement if we’ve inadvertently installed them on the production box…as if!
npm prune --production
So, problem solved. I hope this post has been useful or at least mildly entertaining for the more initiated out there.
Today I was trying to spin up a quick Web API for an angular project I’m working on in a fresh install of Visual Studio 2015 using Entity Framework Code First. Unfortunately after creating a simple model, when I tried to update-database to make sure all the moving parts were in a good state I was seeing the following error:
A network-related or instance-specific error occurred while establishing a connection to SQL Server. The server was not found or was not accessible. Verify that the instance name is correct and that SQL Server is configured to allow remote connections. (provider: SQL Network Interfaces, error: 50 – Local Database Runtime error occurred. The specified LocalDB instance does not exist.)
After some investigation and questioning of whether LocalDB was installed (it was). I discovered this error is caused by the connection string created by Entity Framework targeting an instance called MSSQLLocalDB which won’t exist. I believe the error occurs because VS 2015 sees that LocalDB is already installed during installation and therefore doesn’t create this new instance on install. The fix is to simply replace the instance name of MSSQLLocalDB with v11.0 in DefaultConnection in web.config.
Below is my reply which is essentially a cut and paste so it may lose context in some places, but hopefully others will get some use from it.
Get an understanding of how to use it from JQuery ( $.ajax, $.getJSON etc. ) The Microsoft Ajax libraries are dead and no longer supported. This will be more useful going forward as people start writing web applications with frameworks like knockout. You’ll be presenting an entire API to the client browser predominantly accessed via ajax with JSON being the data format of choice. Taking it to the furthest level your API will be RESTful, embracing HTTP rather than abstracting it as WebForms has for the past 10 years. Microsoft is pushing several stacks for this in terms of OData and the WCF Web API. A lot of people however are dismissing these in favour of using straight ASP.NET MVC and presenting the API through Controllers that only ever return JsonResult. It’s like MVC without the V! No idea where we’ll end up eventually with this one.
You may have already noticed but as soon as you get into using JQuery you realise you need a good handle on CSS selectors so let’s do that one first. You’ll have no doubt in the past been down the road of just randomly editing the CSS, refreshing the browser and hoping the CSS gods are looking down upon you and everything now looks as expected. Unfortunately not a fat lot’s changed in this area but we’re not alone in this camp so there are two OS frameworks called SASS and LESS (http://coding.smashingmagazine.com/2011/09/09/an-introduction-to-less-and-comparison-to-sass/) which aim to alleviate some of the pain experienced with CSS. Do you need to know these; probably not but again it doesn’t do any harm to know they’re there to help.
Apart from the ubiquitous border-radius! Media Queries are the big one here which you’ll hear all about in the same sentence as “Responsive Web Design”. It’s all about adapting the styles used on a web page based on the viewport (device-width) amongst other attributes. The most common usage scenarios are therefore styling for desktop or mobile. MVC 4 is rolling some of this stuff in but also allowing you to easily create media query based or device specific views. Phil Haack did a decent talk on this at Build. Search http://channel9.msdn.com .
Know it, learn it, and love it. You’ll be doing nothing without it. As mentioned up there get your head around the $.ajax API and understand CSS selectors. The best thing I’ve found about JQuery is it’s so ubiquitous now that all you have to do is think about what you want to achieve, type it into Google and append jQuery to the end. Cut, paste and job done. Next level on from that is writing a plugin and then if you’re so inclined JQueryUI which is all about widgets and presentation and finally JQueryMobile which is a mixture of JQueryUI and HTML5 for the mobile devices. I knocked up a half decent iPad version of my LearnAndGame site (see below) literally in about 10 minutes. I’m over simplifying JQuery here as it’s so much more but that’ll do for now.
Get the HTML5 Boilerplate template off the extensions gallery within VS. This shows you some great guidance on website best practice. It’s a bit over the top as a starting point for a site in my opinion but a good reference for learning. Moving on nicely from that also go get the NuGet gallery source from GitHub as this is also a great reference site for MVC development.
** Quite simply the most bonkers and yet wonderful Distributed Version Control System (DVCS) known to man. It makes working in TFS version control feel like seriously hard work.
With the release of NuGet 1.6 we now get the ability to control the importing of dependent packages at build time through the injection of a custom .target file into each project within the Visual Studio solution. This may seem unusual for teams that use Team Foundation Server for version control as we typically like to see those binaries included as part of the check-in process into the usual lib/dependencies/third-party (delete as appropriate) folder.
So why have the NuGet team done this? Well mainly for the DVCS teams as their repositories can grow quite large with all these binary check-ins causing merges to take significant amounts of time. But even if you don’t use a DVCS such as Git or Mercurial simply having this option available to us for any version control workflow is simply awesome in my opinion. I think I’ll be checking out how it works for comparison on an upcoming small project.
For now if you want to use the “source control free” workflow you can enable it at the solution level.
NuGet just continues to get better and better and with one of the Project Leads Phil Haack now working at GitHub I’m even more excited to see where the product goes. Further information on this new feature is available on the NuGet docs site here.