Fix Angular 2 Tests with Karma

Posted by in Software

Below are some fixes I had to apply in order to make Angular 2 tests work with karma. Binding Error: Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’ Solution: Import FormsModulein your test:

Unknown component Error: ‘custom-component’ is not a known element Solution: Declare the component in your test:

Note: If the element is in another module, then import the other module (like in the previous case) instead of declaring elements one by one. Unknown <router-outlet> tag Error: ‘router-outlet’ is not a known element…read more

Angular 2
Refresh Bound Variables from Callback

Posted by in Software

TL;DR: Use ChangeDetectorRef‘s detectChanges() at the end of your callback code. While developing my electron.js app, I’ve had the following workflow: I have an input element and a button The input element is capable of editing a path The button triggers a File Open dialog

The problem I had was the showOpenDialog() accepts a callback and I couldn’t get the input field to update once the user has picked a file. Fortunately, the smart angular developers have thought of this situation too and the solution is quite simple. You…read more

Electron App
Use SCSS, Luke!

Posted by in Project Management, Software

Traditionally, I’ve been a LESS supporter. The way it does mixins for example seems to me more intuitive. However, I noticed that my go-to framework (bootstrap) is now doing SASS-first and then LESS. So, one adapts… and the option in angular-cli makes things less painful. What was painful was to convert a bunch of LESS code to SCSS :/ Here are some findings relative to using SCSS in my application: Webpack does it nicely via the sass-loader You can use relative, absolute and ~ paths to refer to other resources….read more

Electron and WebPack – Live Reloads

Posted by in Software, Tutorial

I wanted to create a skeleton with Electron, Angular 2, capable of live reload while in development. I’ve settled on the following framework: Electron (d’oh!) Angular 2 Angular CLI (because it makes it easy to generate boilerplate code) SASS (SCSS in fact) Webpack 2 and Babel After a lot of trial and error (and also scouring the internet for solutions), I think I reached a nice-ish solution. Following articles outline the steps and functionalities I implemented. Why angular-cli Is it alive? Use SCSS, Luke! Adding Webpack Electron-ize Send Menu Command…read more

Electron App
. Why angular-cli?

Posted by in Software, Tutorial

The decision has been made for me since I’m new to Angular in general and the CLI offers a package deal particularly where code generation and initial package management is concerned. There’s also the boon of webpack, which is used as engine. Although the balance tilts heavily in favour of using angular-cli, this package also has a bunch of flaws, apparent to me also because of the end target: No multiple webpack configs. Angular CLI only has an optimised configuration and doesn’t expose hooks to be able to alter it…read more

Real Sticky Footer with Material Angular

Posted by in Software

I needed to set up a sticky footer as part of my Angular and Material Design experiment. You would not believe how many resource I could find (some of them listed below)! Unfortunately, most of them had a problem; blank page looked fine (header and footer in the right places), but the page populated through angular would not refresh the footer’s position, it remaining at the bottom of the page. Not nice. The solution I found that works is the one from Ryan Fait which I’ll paste in below for…read more