If you are struggling to find the cause for Safari not allowing scrolling on a modal, check if you’re using this CSS animation:

animation: drop .5s;

I was struggling for a little while over why a modal that popped in using CSS animations would not scroll in Safari (but would briefly be scrollable before the first .5 seconds I noticed).

Apparently its a Safari behavior (bug?) that causes content to be un-scrollable if the animation property applied to it has run. Removing this property fixed the issue with scrolling in the modal. This does not impact Chrome or Firefox.

When setting up Heroku on a new machine, I ran into this error after running heroku keys:add:

Post https://api.heroku.com/login: x509: certificate signed by unknown authority

Post https://api.heroku.com/login: x509: certificate signed by unknown authority

The solution is to run the following:

HEROKU_SSL_VERIFY=disable heroku login

With the recent release of Angular 1.6, I’ve updated a codebase and ran into a new issue:

Possibly unhandled rejection: {"status":400,"statusText":"SearchCtrl._labot5d8x did not register the event: searching"}

Browser console error

The statusText above really isn’t super important. The Possibly unhandled rejection is the tricky one, due to its generic-ness.

In the codebase I’m working on, this is due to various promise-helper convenience functions bootstrapping but not having a promise immediately passed through them.

This was not an issue with Angular 1.5, so it appears that 1.6 is somewhat more strict (not necessarily a bad thing at all).

Here is how to shut this off:

app.config(['$qProvider', function($qProvider) {
     $qProvider.errorOnUnhandledRejections(false);
 }]);

This was actually causing some strange behavior until added to the app config – these console errors were not harmless. Hopefully this helps someone else.

This is a fairly specific need, but one which comes up when working with web application that are not entirely API-driven.

Say you’re in this scenario:

  • Your angular 2 app sits on top of some back-end system (maybe some PHP framework with a templating engine)
  • You have a specific string or JSON blob of data you need to bootstrap into your Angular 2 application, but it isn’t available via AJAX
  • The most practical thing to do is to print it on the DOM and have Angular 2 pull it in through a component’s HTML attribute

This seems to not be documented well elsewhere, so here is how the above can be approached.

1) Print non-angular string/JSON into a component’s HTML attribute

<my-ng2-component my-attribute='<?php json_encode($dataBlob, JSON_HEX_QUOT | JSON_HEX_APOS)?>' ></my-ng2-component>

2) Import the DOM parsing tools for Angular 2 – ElementRef and BrowserModule and properly use it in the component’s constructor

import { Component, NgModule, Input, ElementRef } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser'

@Component({
    selector: 'my-ng2-component',
    template: require('.myTempalte.html'),
    styles: [ require('.myStyle.scss') ]

})

export class MyNg2Component {
    constructor (
        private elementRef: ElementRef
    ) {   
        this.myData = JSON.parse(this.elementRef.nativeElement.getAttribute("myAttribute"));
    }

    // pther methods go here 
}

The JSON from a non-angular source should now be passed into the ng2 component and properlty parsed.

Welcome to JeremyCollins.net version 3.0.

This site is now built with Jekyll, originally forked from this theme, and hosted on a Digital Ocean Ubuntu droplet.

Want to see the source for the page? See My Public Github Project for it