Tag: troubleshooting

How to fix an Angular component that won’t stick
If you’re working in a component-driven framework like Angular, you might notice one day that your components start ignoring your router’s scroll events and are no longer sticky. All of a sudden, you find the only way to keep your components from scrolling off the page is by assigning them a fixed position with CSS. The only reason this works is because the closest positioned ancestor your components can find is the last possible resort, Document, which represents the whole DOM.

What do you mean by ‘sticky’?

Just to be clear, I’m referring to the CSS property ‘position’ that has the following possible values:
1. static – no special positioning
2. relative – normal positioning
3. fixed – always in the same place, regardless of scroll
4. absolute – always in the same place relative to its closest ancestor that has positioning
5. sticky – always in the same place after it reaches a top, right, bottom, or left scroll position
Using sticky is like fixed + relative.

Fixed is cool if you only care about positioning in respect to the viewport. But using it means your components no longer take space in the DOM, and therefore no longer have any relation to the positioning of everything else in the DOM. This runs the risks for things like overlapping, cropped and/or empty content.

What kinds of issues are we talking about?
1. Applying sticky has no effect on component. It scrolls out of viewport with everything else.
2. Applying sticky has partial effect on component. It stays in the right spot until you scroll past the entire length of the screen.
Steps to troubleshoot

Make sure you’ve specified at least a top, left, right or bottom position on the component you’re trying to make sticky.

You can used fixed or relative units, but you must specify at least a top, left, right or bottom position or else it won’t know where to stick.

Make sure your component’s container has a defined height or width.

Your component needs to know the dimensions of its container in order to calculate where the sticking point is in relation to itself. It will continue checking its ancestors until it finds one with positioning.

Make sure your component’s container does NOT have overflow set to hidden.

Once you’ve scrolled your component out of the viewport, it is considered overflow. Therefore, hiding the overflow on a sticky element that needs overflow to stick won’t work.

But what if the height is dynamic?

Let’s say you want the footer to always start at the bottom of the page, even if there’s not enough content to push it down. If you set the component’s container height to 100% and it doesn’t stretch to the end of the page, you might try 100vh. While that works and your component might be sticky at first, you may notice it stops sticking after you’ve scrolled past the full length of the page.

To solve this problem, set the following styles on your component’s container:
```
.container {
   ...
   min-height: 100vh;
   height: 100%;
 }
```
September 29, 2024
How to fix an RPC failure in Git
If your pushes to GitHub keep failing only a particular commit, you may be encountering this error:

RPC failed; HTTP 400 curl 22 The requested URL returned error: 400 Bad Request

This happens when you are trying to push a stream to your remote branch using Git that’s larger than the allowed budget. For example, I ran into this error when trying to commit a bunch of screenshots and a video at once.

Luckily, I found this stackoverflow that had the solution! The fix is to up the buffer limit for that particular commit. (524288000 refers to the size limit):
```
git config http.postBuffer 524288000
git pull
git push
```
September 12, 2024
How to solve ENOTEMPTY: Directory not empty
I recently redesigned my blog’s website and set up the upload process so that I wasn’t dragging files to be uploaded directly from Visual Studio Code. As a result, I started getting this error each time I tried to build the site:
```
An unhandled exception occurred: ENOTEMPTY: directory not empty, rmdir...
```
Since I’m using Angular, I noticed that the ‘dist’ folder (the one Angular publishes your build to) was deleting my assets but not the actual folder like it used to. I found a couple of Stack Overflow threads that offered solutions to bypass this error. Deleting the nodes_modules folder and reinstalling express body parser worked once but the error kept coming back on subsequent builds.

It turns out that the problem wasn’t a permissions one which I initially suspected. It was acutally quite simple…I just had a finder window open with that directory! Anyway, just thought I’d share since it was such a stupid mistake.

To resolve the error, all you have to do is close any dialogs that have the ‘dist’ folder open. Whoops!
September 1, 2021
Angular Security Vulnerability: How to fix tree-kill vulnerabilities
If you’re working in Angular, you may have seen 2 new security vulnerabilities that require you to update the tree-kill package to version 1.2.2 or later. Unfortunately, the usual commands, “npm audit fix” nor “npm update tree-kill” won’t work. (Those commands will update your package.json file but not your package-lock.json file.)

Thanks to saleem on stackoverflow, below is the solution that will fix your vulnerabilities.

Solution
1. Type “npm uninstall tree-kill”
2. Go to node_modules -> @angular-devkit -> package.json and update the tree-kill version to 1.2.2
3. Go to node_modules -> @ngtools/webpack -> package.json and update the tree-kill version to 1.2.2
4. Type “npm install”
January 13, 2020
Contentful Error: When searching on references you must specify the Content Type of the reference
If you’re using the incredibly lean, headless content management system, or CMS, Contentful, you may have seen this error:

“When searching on references you must specify the Content Type of the reference. Please send a Content Type id as a query parameter.”

Background

I wanted to use a different model type for category than I used for tags, short-text list, because the reference type allows you to control and manage category names outside of the blog post model. If you want to query entries that have the type short-text list, you can write a function like this:
```
  getBlogPostsByTag(tag:string):Promise<BlogPost[]> {
    return this.blogService.getEntries({
      content_type: this.contentTypeIdBlogPost,
      'fields.tags': tag,
      'order': '-fields.publishDate'
    })
    .then(res => res)
    .catch(error => error);
  }
```
Solution

If you want to query entries that have a reference data type, you have to specify the content type of the reference data. You can resolve the above error by writing a function like this:
```
  getBlogPostsByCategory(category:string):Promise<BlogPost[]> {
    return this.blogService.getEntries({
      content_type: this.contentTypeIdBlogPost,
      'fields.category.sys.contentType.sys.id':        
      this.contentTypeIdBlogCategory,
      'fields.category.fields.name': category,
      'order': '-fields.publishDate'
    })
    .then(res => res)
    .catch(error => error);
  }
```
Note: Contentful allows you to query reference types only if they contain one field. For example, my category only has the name field.

Also, to future-proof any changes to the content type IDs by identifying them only in one place (technically two, one for dev and one for prod), I am storing those values in my app’s environment files. So make sure you substitute those variables with your content type IDs.
January 10, 2020