Angular / SSR: The document object is not available in this context

Our app was accidentally moved from 18.2.13 to 18.2.14 and SSR stopped working and threw a weird error:

NG0210: The document object is not available in this context. Make sure the DOCUMENT injection token is provided.

A lot of searching really didn't lead me to a good solution. Most solutions will mention that the DOCUMENT object doesn't exist on the server. The problem is this was happening while rendering on the server and I wasn't accessing the DOCUMENT object at all.

Turns out there was a breaking change in 18.2.14 that requires you to update your bootstrap file. There is a new "context" object that is injected into the function that needs to be added as a 3rd argument to the "bootstrapApplication" function.

Angular: Can't bind to 'ngIfContext' since it isn't a known property of 'ng-container'

After a bit of refactoring our codebase this error started showing up during tests.

Can't bind to 'ngIfContext' since it isn't a known property of 'ng-container'

I found a few results from google but nothing that solved the problem. I started pulling out *ngIf from the tags in the template that was linked to the component and finally found the line causing the problem.

<ng-container *ngIf="group.subgroups; else singleGroup; context: {$implicit: group }">

*ngIf does not support the context argument. The context argument works on *ngTemplateOutlet property.

RxJs / Angular: Changing a request parameter after a failure using retry

I'm making a request for a window of data based on a date and a range. The result of the request can be empty requiring me to make another request and change some parameters. The previous way I made the request was a recursive function that worked well but it can be a lot better.

Using a combination of rxjs pipe operators this can be one chain that works beautifully.

  

constructor(private http: HttpClient){}

someFunction() {
    const retryObject = { foo: 1};
    return of(retryObject)
        .pipe(
            switchMap(obj => {
        return this.http(`http://some.name?foo=${obj.foo}`);
    }),
    map(result => {
        if (result.error) {
            // Update the foo value and it will try the request again with the new value
            retryObject.foo++;
            throw 'an error happened';
        }
        // Happy path
    }),
    retry([HOW MANY TIMES YOU WANT TO TRY THE REQUEST])
).subscribe(result => {
        // Do something with your data
    })
}

The magic here is the retry pipe in combination with throwing an error. The linked page used throwError but it didn't retry the request. You can't pass in a string or number into the of operator. Javascript is pass-by-value for those. You need a reference to an object that can be updated.

Ionic Framework / UI Router: Remove a query parameter from the URI

I've been working with Ionic Framework for most of the year and finally launched the alpha version of my project. I've enjoyed working with it, but like everything you'll run into something that makes you bang your head on the desk for a few days. The most recent case of this was trying to remove a parameter from the URI.

If a user needs to reset their password I send them a URI that looks something like this.
http://this.that/login?resetKey=1234

After the user finishes the steps to reset I want to clean up the URI so if they hit the refresh button it doesn't trigger the reset process again.
http://this.that/login

I had the worse time finding an answer on google. After a few days of digging through UI Router documentation I finally found a combination that worked.

First you need to inject the $state param into your controller. We'll use the go method and redirect to the current URI using the current router name. The current route name can be accessed through the $state.current.name property. Next we need to specify the parameter we want to remove from the URI. We'll use an object with the key as the param name and the value will be null. Lastly we don't want to trigger the route again so we'll set the notify property to false.

The final command looks like this.

$state.go($state.current.name,{'resetKey': null},{'notify': false});

Such a simple command. So much digging. UGH!

Angular: Form element not attaching to $scope

I'm well into a redesign using AngularJS as my front-end framework. After a small learning period I'm in love. It's a fantastic way to tie your UI to your backend. That said there is still some work to be done.

I'm breaking my project into modules that are included with the ng-include tag. This helps shrink the code on the page into manageable chunks. It nice when you're using a very verbose framework like Bootstrap.

All of my forms are wired up using Angular's form validation. Once again this is fantastic. Being able to watch the inputs in real time and display helpful errors is great. I ran into an issue trying to reuse a form after I've removed it from the users view.

<form name="createUser">
    <input name="name" ng-model="formObj.name" />
    <input name="email" ng-model="formObj.email" />
</form>

I should be able to access the form in my angular in this fashion.

// This will reset any validation errors on the form
$scope.createUser.$setPristine();

This wasn't working for me and I spent a lot of time trying to figure out why. Here is how my code looked.

<div ng-controller=“controllerName”>
    <div ng-include=“ ‘path-to-the-template’ ”></div>
</div>

<!—- Inside path-to-the-template -—>
<form name="createUser">
    <input name="name" ng-model="formObj.name" />
    <input name="email" ng-model="formObj.email" />
</form>

One thing to consider is when Angular is starting up the controller code the form isn't attached yet. When you click the button that submits the form it will be attached by that time. I was still unable to access the form element.

Update

I submitted this as a bug to the git repo and got a response very quickly. That team is really on top of things. Turns out when you use ng-include it creates a new scope var. This is how the setup should look.

<!—- The vars should live in the controller. I placed them here for the example. -—>
<div ng-controller=“controllerName” ng-init="form={}; model={}" >
    <div ng-include=“ ‘path-to-the-template’ ”></div>
</div>

<!—- Inside path-to-the-template -—>
<form name="form.createUser">
    <input name="name" ng-model="model.name" />
    <input name="email" ng-model="model.email" />
</form>

Now the include can reference the variables from the parent scope. The form and it's input should now be accessible.