Protractor/Jasmine bug in Angular:
Fix by using: expect<any>
When adding routing to an AngularCLI project you need to also update the startup test with the RouterTestingModule.
Failure to do so results in the following error when running ng test:
Here is the fix (click on the image to enlarge):
Source code available here:
As of 3rd April 2017, here is a simple example of how to add routing an AngularCLI project.
All the source code and changes to the AngularCLI project can be found here:
Step 1: Create two new files in your app folder for basic components which will display the views we would like to route between. I’ve called mine Home and Away.
Step 2: Edit the app.component.html in your app folder to contain the router-outlet.
Step 3: Create an ‘app.routes.ts’ file in your app folder. This example defaults to displaying the HomeComponent and displays the AwayComponent for path “away”.
Step 4: Update the ‘app.module.ts’ file. This is the most complicated step. I’ve shown the before and after files in the screenshot below (click image to enlarge):
Why all the changes to app.module.ts and what do they do?
Lines 5, 29, and 30: In order for us to log the routes to the console on start up which is good for debugging, you need to import the Router module (line 5). This gives us the ability to inject the router object into the constructor (line 29). Line 30 logs the router to the console on app start up.
Lines 8, 9, 15 and 16: Lets our app know about our new Home and Away components.
Lines 10, 22 and 24: Lets our app know about our new router and it’s configuration.
Here is our app running. Note I also have Augury installed which is an Angular debugging tool which can help debug your Angular app including your Router.
Add a simple “.appveyor.yml” file to the root of your project:
Next sign in to https://ci.appveyor.com and mark your repo as an AppVeyor project.
Once you’ve added your project you can build your project within AppVeyor. A build will also get kicked off with every new commit/push to your repo:
Add the following code to you readme.md file in GitHub to get a CI build badge.
npm install --save-dev karma-phantomjs-launcher
Then update karma.config.js (lines 11 and 31):
You’ll now get the following error if you attempt to npm test or ng test:
To fix this just uncomment the following lines from your polyfill.ts:
To get wallaby.js working after you have generated your project with
angular-cli, you'll need to do the following:
npm install wallaby-webpack angular2-template-loader electron --save-dev.
Here are examples of Wallaby running my server code (simple data api returning json data) and the Angular UI:
Auth0 is great for integrating security into your applications.
In this blog we’ll look at how simple it is to setup Auth0 and then create an Angular app that uses it.
1) Go to Auth0.com and setup your account:
2) Now we’ve got our Auth0 account we can setup our ASPNetCore WebAPI:
You can then download or fork the startup project.
Finally, let’s setup our Angular2 app:
Then download or Fork on GitHub (I’m forking on GitHub)
If either fail to download or fork you can manually download from here:
Drag their button to your bookmarks bar in your browser then navigate to the webpage where you want to identify the font, click the button and locate the web font you want identified – very cool!
The gif above was generated using ScreenToGif, another very useful tool.
Here is an example of some GitHub badges on a project:
It’s really easy to do, you just need to register your project with david-dm.org and travis-ci.org. Here is the markdown I used within my readme file:
In my next blog posts I'll show examples of how to integrate online TravisCI for the build badge.
Acer kindly have the Aspire S7 laptop on lockdown so you can’t easily boot from USB to install a new “clean” version of Windows. There is a way around it though so here are the hoops you have to jump through:
1. Create a bootable Windows installer on your USB drive by downloading the Windows ISO then installing RUFUS to create your USB from the ISO.
2. Restart your computer and enter the BIOS screen. You can do this before Windows boots up, by pressing F2 (by pressing function and 2 keys). If F2 doesn’t work try F8 or F10.
3. Select “Boot” menu and change from UEFI to Legacy and set the boot order so that USB HDD is at the top. Save and Exit.
4. Put your USB drive into your laptop and Windows installer should start. You can now delete any old partitions and create a new drive. The problem is this drive won’t be able to hold windows due to it being GPT partition style (arrrgh!) so we need to jump through an extra few hoops.
5. From the “Repair” menu option in the Windows installer window, select the command line option.
6. In the command line use the following commands:
7. You’ll now be able to go through the Windows installer and install into your drive.