problem

I was commiting on my personal projects with my work credentials so I had to overwrite the author of several commits

solution

• Checkout the commit we are trying to modify.

    git checkout 03f482d6

• Make the author change.

    git commit --amend --author "New Author Name <New Author Email>"

• Now we have a new commit with hash assumed to be 42627abe.

    Checkout the original branch.

• Replace the old commit with the new one locally.

    git replace 03f482d6 42627abe

• Rewrite all future commits based on the replacement.

    git filter-branch -- --all

• use the -f flag if overwritting multiple commits

git filter-branch -f -- --all

• Remove the replacement for cleanliness.

    git replace -d 03f482d6

Push the new history (only use --force if the below fails, and only after sanity checking with git log and/or git diff).

    git push --force-with-lease

Last step is only needed if you've already pushed to origin

link to solution

Problem

getting an error that says import statement cannot be used outside a module issue when running jest test that tests a vuex action that uses nuxt-typed-vuex for typescript support

cause

ts-jest can't handle the imported helper functions from the nuxt-typed-vuex

solution

Use the vanilla implementations for the actions and mutations and don't use the helper functions
mentioned here

Problem

When using a custom ActionBar component in a page component the default Action Bar is showing and not the custom one.

Cause

In NativeScript Angular 5 when lazyloading submodules the default ActionBar will not be overriden by a Custom actionBar Component

<ActionBar title="Title" class="action-bar">
  <StackLayout orientation="horizontal">
    <Label text="NativeScript" class="action-label"></Label>
  </StackLayout>
</ActionBar>
<StackLayout class="tile">
  <Label text="tile component working" textWrap="true"></Label>
</StackLayout>

Here, a default action bar will be shown when visiting this page and not the custom one because it is lazy loaded component

export const routes: Routes = [
  {
      path: '',
      redirectTo: '/tile',
      pathMatch: 'full',
  },
  {
      path: 'tile',
      loadChildren: () => import('./modules/tile/tile.module.tns').then(m => m.TileModule),
  },
];

Solution

in each lazily loaded module, we need to import NativeScriptCommonModule which will take care of some basic NativeScript functionalities including the rendering of your ActionBar
More info here

import { NativeScriptCommonModule } from "nativescript-angular/common";

@NgModule({
    imports: [
        NativeScriptCommonModule, // RIGHT HERE
        NativeScriptRouterModule.forChild(routes)
    ]
})

problem

The nativescript video player plugin was not loading the video from a vimeo link

cause

I initially thought it was due to the vimeo link having to do a redirect before actually getting the mp4 link but actually it was because I was not using the https version of the link instead I was just using http which failed.
Note: Next time a plugin fails try to view the error messages and go from there instead of jumping to conclusions like this

correlation does not imply causation

solution

I used the https version of the link.
Note: whenever you're using a resource link for a mobile app, make sure you use https or atleast make sure you can use http for that specific domain. See #14

problem

"@swimlane/ngx-charts": "^11.2.0" is not working correctly in production mode and outputs many errors

22.08f3d0ea646d49255896.js:1 ERROR TypeError: (void 0) is not a function
    at ke (22.08f3d0ea646d49255896.js:1)
    at Function.n.tickFormat (22.08f3d0ea646d49255896.js:1)
    at n.update (22.08f3d0ea646d49255896.js:1)
    at n.ngOnChanges (22.08f3d0ea646d49255896.js:1)
    at main.0f871621655002842f7c.js:1
    at main.0f871621655002842f7c.js:1
    at tu (main.0f871621655002842f7c.js:1)
    at Vu (main.0f871621655002842f7c.js:1)
    at main.0f871621655002842f7c.js:1
    at Object.updateDirectives (22.08f3d0ea646d49255896.js:1)

22.08f3d0ea646d49255896.js:1 ERROR TypeError: l.transform is not a function
    at Object.updateRenderer (22.08f3d0ea646d49255896.js:1)
    at Object.Lu [as updateRenderer] (main.0f871621655002842f7c.js:1)
    at $l (main.0f871621655002842f7c.js:1)
    at su (main.0f871621655002842f7c.js:1)
    at uu (main.0f871621655002842f7c.js:1)
    at $l (main.0f871621655002842f7c.js:1)
    at su (main.0f871621655002842f7c.js:1)
    at lu (main.0f871621655002842f7c.js:1)
    at $l (main.0f871621655002842f7c.js:1)
    at su (main.0f871621655002842f7c.js:1)

22.08f3d0ea646d49255896.js:1 ERROR TypeError: (void 0) is not a function
    at ke (22.08f3d0ea646d49255896.js:1)
    at Function.n.tickFormat (22.08f3d0ea646d49255896.js:1)
    at n.update (22.08f3d0ea646d49255896.js:1)
    at n.ngOnChanges (22.08f3d0ea646d49255896.js:1)
    at main.0f871621655002842f7c.js:1
    at main.0f871621655002842f7c.js:1
    at tu (main.0f871621655002842f7c.js:1)
    at Vu (main.0f871621655002842f7c.js:1)
    at main.0f871621655002842f7c.js:1
    at Object.updateDirectives (22.08f3d0ea646d49255896.js:1)

cause

angular's buildOptimizer is passing a config option to the uglifyjs webpack plugin that is removing neccessary code for the chart library see here for more info, and this is the line that is causing the error

solution

set the buildOptimizer option in angular.json to false, note: this will make the bundle size bigger

problem

The RadListView nativescript ui component supports swipe action templates but it does not have access to the list item. For example in the following code the swipe template can't get the value of the current item so creating a template that depends on an item property is not simple.

  <RadListView class="alert-list-container" *ngIf="alertFeedDataObservableArray" [items]="alertFeedDataObservableArray" swipeActions="true" (itemSwipeProgressStarted)="onSwipeCellStarted($event)" >
      <ng-template tkListItemTemplate let-alert="item">
          <FlexboxLayout class="alert-item-container">
              <FlexboxLayout class="alert-item">
                  <app-alert-level-indicator [indicator]="alert.alert_level"></app-alert-level-indicator>
                  <StackLayout class="alert-info-block">
                      <StackLayout>
                          <app-alias [alias]="alert.alias" [attribute]="'text-l'"></app-alias>
                      </StackLayout>

                      <FlexboxLayout class="mrn-block">
                          <StackLayout class="mrn-container">
                              <app-mrn [mrn]="alert.mrn_no"></app-mrn>
                          </StackLayout>
                          <app-date-time [time]="alert.time_since_alert" [attribute]="'time-xs'" *ngIf="alert.time_since_alert"></app-date-time>
                      </FlexboxLayout>

                  </StackLayout>

                  <FlexboxLayout flexDirection="column" class="alert-block">
                      <app-text [text]="alert.alert_type"></app-text>
                      <app-bordered-text alignSelf="flex-end" [text]="alert.tile" [attribute]="'text-xxs'"></app-bordered-text>
                  </FlexboxLayout>



                  <StackLayout class="status-block">
                      <app-icon [icon]="alert.alert_activity_status"></app-icon>
                      <app-icon [icon]="alert.pinned_status"></app-icon>
                  </StackLayout>


              </FlexboxLayout>
          </FlexboxLayout>
      </ng-template>

      <GridLayout *tkListItemSwipeTemplate columns="*, 300" >
          <FlexboxLayout col="1" class="alert-item-action-block" id="swipeBlock">
              <FlexboxLayout class="action-block" [visibility]="pinnedTemplateVisibility">
                  <StackLayout class="app-icon-container">
                      <app-icon [icon]="'Y'" [attribute]="'icon-2x'"></app-icon>
                  </StackLayout>
                  <app-text [text]=" 'tile.home.unpin_label'|translate"></app-text>
              </FlexboxLayout>
              <FlexboxLayout class="action-block"  [visibility]="unpinnedTemplateVisibility">

                  <StackLayout class="app-icon-container">
                      <app-icon [icon]="'N'" [attribute]="'icon-2x'"></app-icon>
                  </StackLayout>
                  <app-text [text]=" 'tile.home.pin_label'|translate"></app-text>
              </FlexboxLayout>
              <FlexboxLayout class="action-block">

                  <StackLayout class="app-icon-container">
                      <app-icon [icon]="'remove'" [attribute]="'icon-2x'"></app-icon>
                  </StackLayout>
                  <app-text [text]="'tile.home.remove_label'|translate"></app-text>
              </FlexboxLayout>
          </FlexboxLayout>
      </GridLayout>

  </RadListView>

solution

Use the itemSwipeProgressStarted event and property binding to change the properties dynamically based on the item since that event will have access to the current item. For example this code changes the visibility of the two templates depending on the pinned_status property of the swiped item

  public onSwipeCellStarted(args: SwipeActionsEventData) {

    const swipeLimits = args.data.swipeLimits;
    const swipeView = args['object'];
    const pinnedStatus = this.alertFeedData[args.index].pinned_status;

    if (pinnedStatus === 'Y') {
      this.pinnedTemplateVisibility = Visibility.visible;
      this.unpinnedTemplateVisibility = Visibility.collapse;
    } else {
      this.unpinnedTemplateVisibility = Visibility.visible;
      this.pinnedTemplateVisibility = Visibility.collapse;
    }
    const rightItem = swipeView.getViewById<View>('swipeBlock');
    swipeLimits.right = rightItem.getMeasuredWidth();
    swipeLimits.threshold = rightItem.getMeasuredWidth() / 2;
  }

The solution was found in this stackoverflow thread

problem

When building a nuxt application I got this issue which caused the nuxt build command to stop

postcss reduce transforms Cannot read property 'type' of undefined

cause

Confirmed as a bug in postcss-reduce-transforms (cssnano) which doesn't account for missing arguments.

Specifically this line

solution

Changing the syntax to include all 4 params as rotate3d(x, y, z, a).

Useful link: angular/angular-cli#19106

I found the solution here

Explaination

• use these polyfills in the polyfills.js file to make sure it works in IE11 and modern browsers
  import "document-register-element";
  import "@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js";
• make sure the target in tsconfig.json is set to "es5" to avoid syntax errors in IE.
  "target": "es5",

problem

an element with the following css declaration

.element {
  flex: 1;
}

will have a width of 0px in IE

cause

in IE flex:1; shorthand will be treated as flex: 1 1 0px; instead of flex: 1 1 auto; like in other browsers, since flex basis is 0px it will have a width of 0px

soluion

Either don't use a shorthand declaration for flex property or use all the values in the shorthand like this
flex: 1 1 auto;

problem

I wanted to create dynamic form fields that could be added and deleted by the user by clicking on add and remove buttons but most of the tutorials showed doing this only using form arrays which caused an error in the html template

cause

The type error is caused because the template cannot infer the type of nested form arrays and the abstractcontrol does not have the controls property

solution

use getters in the typescript file so the nested controls can be accessed easily in the html template

 protected initForms() {
    this.formGroup = this.formBuilder.group({
      title: ["", Validators.required],
      question_type: [QuestionTypeEnum.multiple, Validators.required],
      skip: true,
      time: ["", Validators.required]
    });

    this.answersFormGroup = this.formBuilder.group({
      answers: this.formBuilder.array([this.createAnswer(), this.createAnswer()])
    });

  }
  public createAnswer() {
    return this.formBuilder.group({
      id: [null],
      answer: ['', Validators.required]
    });
  }

  public addAnswer() {
    const answers = this.answersFormGroup.get('answers') as FormArray;
    answers.push(this.createAnswer());
  }

  public removeAnswer(index: number) {
    const answers = this.answersFormGroup.get('answers') as FormArray;
    answers.removeAt(index);
  }

  public onQuestionTypeChange(value) {
    this.isChoiceDisplayed = value === QuestionTypeEnum.multiple;
    console.log(this.isChoiceDisplayed);
  }

  onSubmit(event: Event) {
    event.preventDefault();
    console.log(this.formGroup);
  }

   // convenience getters for easy access to form fields
   get answerControls() { return this.answersFormGroup.controls; }
   get answers() { return this.answerControls.answers as FormArray; }

        <div [hidden]="!isChoiceDisplayed">
          <div [formGroup]="answersFormGroup">
            <div class="row my-1" *ngFor="let answer of answers.controls  let i = index">
              <div class="col-10" [formGroup]="answer">
                <label class="d-block" [for]="'choice' + i">
                  <span class="sr-only">Choice {{i+1}}</span>
  
                </label>
  
                <input
                  [id]="'choice' + i"
                  formControlName="answer"
                  type="text"
                  class="form-control"
                  placeholder="Enter a choice"
                />
  
              </div>
              <div class="col-2">
                <button
                  type="button"
                  class="remove-btn"
                  (click)="removeAnswer(i)"
                >
                  <span class="sr-only">Remove</span>
                  <i aria-hidden="true" class="fas fa-minus-circle"></i>
                </button>
              </div>
            </div>
          </div>
          <div class="row mt-2">
            <div class="col-4">
              <button
                class="btn btn-sm btn-success"
                (click)="addAnswer()"
                type="button"
              >
                Add annswer
              </button>
            </div>
          </div>
        </div>

link to the post that I got the fix from

Problem

It turns out that we ran into an issue with the global variable “webpackJsonp” when loading multiple angular elements from different microapps. When we loaded the first angular element, it created “webpackJsonp” variable inside window object. The second microapp should have overridden the first microapp’s content declared on this variable but that didn’t happen and this was all because of a simple issue — both microapps were using the same variable name!

Solution

To avoid the conflict, we just had to override the default “webpackJsonp” variable name with some unique variable name specific to the angular app or element. Please follow the below steps to implement the solution.

Install custom-webpack from angular-builders module

npm i -D @angular-builders/custom-webpack

2. Make the below changes in angular.json

   change the builder property to @angular-builders/custom-webpack:browser.
   add customWebpackConfig property as below.

"architect”: {
“build”: {
“builder”: “@angular-builders/custom-webpack:browser”,
“options”: {
“customWebpackConfig”: { “path”: “./extra-webpack.config.js”,
“mergeStrategies”: { “externals”: “replace” } }

3. Create config file “extra-webpack.config.js” under project root folder with below content.

   jsonpFunction — give some unique name which is specific to angular element or microapp
   library — give the app name or angular element

module.exports = {
output: {
jsonpFunction: ‘webpackJsonpAppname’,
library: ‘appname’
}
};

4. When you build the project you will see the main.js content as below. webpackJsonP variable will be replaced with the name specified in your “extra-webpack.config.js” configuration file.

var appname=(window.webpackJsonpAppname=window.webpackJsonpAppname||[])..........

5. When you import this file, there will not be any conflicts with other microapps since we renamed the global variable to microapp specific. With this approach we can load more than one angular microapps successfully in one window.

link to the article that found the solution

Problem

Angular Element does not detect the change in bound property and ngOnChanges is never called

cause

I didn't find the exact cause but it seems that the routingModule was causing this bug

solution

Don't use the routing module in angular elements

problem

Nativescript exoplayer plugin does not work when navigating back from another page

cause

The video player executes some methods which remove the video from the video player but does not make it playable again after navigating back

solution

Adding this snippet seems to work but I'm not 100% sure why it's working so If you find a better solution in the future then use that.

    ngOnInit(): void {
      // when the app navigates to another page, the videoPlayer stops working so adding this on back navigation makes it work again.
        this.page.on("navigatedTo", (data) => {
            if (data.isBackNavigation) {
              this.videoplayer.nativeElement.play();
            }
        });
    }

problem

getting this error when trying to use npm

npm ERR! errno ENOTFOUND
npm ERR! network request to https://hc-us-east-aws-artifactory.cloud.health.ge.com/artifactory/api/npm/npm-commandcenter-all/core-js/-/core-js-3.6.4.tgz failed, reason: getaddrinfo ENOTFOUND hc-us-east-aws-artifactory.cloud.health.ge.com hc-us-east-aws-artifactory.cloud.health.ge.com:443
npm ERR! network This is a problem related to network connectivity.
npm ERR! network In most cases you are behind a proxy or have bad network settings.
npm ERR! network
npm ERR! network If you are behind a proxy, please make sure that the
npm ERR! network 'proxy' config is set properly.  See: 'npm help config'
npm ERR! A complete log of this run can be found in:
npm ERR!     /home/nk13/.npm/_logs/2020-06-11T04_56_50_439Z-debug.log

cause

a preinstall script was setting the registry to something other than the default npm registry

sokution

• change the default npm text editor to nano (vim is the default) with the npm set editor nano command
• use the npm config edit command to open the config file
• set the registry to https://registry.npmjs.org and close the file

error

java.io.IOException: Cleartext HTTP traffic to * not permitted
Request to 10.0.2.2 is failing

cause

Android 9 and up will show this error when attempting to request a resource from any domain without ssl certificate so requests to http domains will fail

cleartext is any transmitted or stored information that is not encrypted or meant to be encrypted.

solution

1. create a res/xml/network_security_config.xml file inside App_Resources/Android/src/main
2. Add the following to the file

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">10.0.2.2</domain>
    </domain-config>
</network-security-config>

Note: change domain name if using another domain inside the domain tag
3. Open AndroidManifest.xml inside App_Resources/Android/src/main/res
4. Add this to the application tag

```xml
android:networkSecurityConfig="@xml/network_security_config"

link to the solution

problem

Memory leak in a nuxt app causes Google App Engine to spin up more new instances and delays the server response

cause

Setinterval was set in the created hook and cleared in the destroyed hook (but only in client mode), Since nuxt runs the created hook on the server and the client, the setinterval was being set on each request to the server but wasn't being cleared.

how the issue was discovered

Looked at the log messages in Google Cloud console and ran nuxt with the chrome debugger in debug mode
guide on attaching chrome debugger to nuxt

solution

set the setinterval on the mounted hook instead of the created hook because mounted is only called on the client side.

Details

Angular element's property binding does not work as expected when the property is something other than a string and is used in another angular app.

Property is undefined on ngOnInit
ngOninit is called before ngOnChanges

Solution

Don't use document-register-element polyfill instead use
// Used for browsers with partially native support of Custom Elements
import "@webcomponents/custom-elements/src/native-shim";

// Used for browsers without a native support of Custom Elements
import "@webcomponents/custom-elements/custom-elements.min";

note

ngOnInit will still run before ngOnchanges if the custom element is used in the component template but if it is inserted dynamically it will work as expected.

problem

Dynamically loaded angular element component does not load properly, ngOnInit is never called.

cause

the component is being attached before the script tag has loaded

solution

resolve a promise onload event of the script and only then attach the component to the dom

 loadScriptTag(source) {
    return new Promise(function(resolve, reject) {
      var scrpt = document.createElement("script");
      scrpt.async = true;
      scrpt.src = source;
      scrpt.id = "lyb-theme-script";
      scrpt.onload = function() {
        resolve("loaded script");
      };
      document.body.appendChild(scrpt);
    });
  }

What is this error?

This error indicates a real problem in your application, therefore it makes sense to throw an exception.

In devMode change detection adds an additional turn after every regular change detection run to check if the model has changed.

If the model has changed between the regular and the additional change detection turn, this indicates that either

change detection itself has caused a change
a method or getter returns a different value every time it is called

which are both bad, because it is not clear how to proceed because the model might never stabilize.

If Angular runs change detection until the model stabilizes, it might run forever. If Angular doesn't run change detection, then the view might not reflect the current state of the model.

why it was happening?

Angular elements run ngOnInit before ngOnchanges and the view is initialized before the input properties are initialized so when the are initialized in ngOnchanges later it causes this error.

Solution

There is no full proof solution as of this moment but you can try to only use angular elements dynamically so the it runs ngOnchanges before init and everything works as usual otherwise make sure all the input properties are undefined initially.

The problem

the history.back() function works on the iframe before the page

solution

check for the iframe first and if it exists then use the history.go(-2) which will go back two times.

 if (document.querySelector("iframe")) {
      history.go(-2);
    } else {
      history.go(-1);
    }

note

this solution might not work on all iframes

Problem

Getting various errors while using nested formgroup within an array and the documentation is also not that good on the angular site.

Solution

used this guide to solve the errors

The above guide is good but also use getters to avoid type errors in template, see #17

Problem

Using the Bottom Navigation Pattern as shown in the nativescript angular docs is hard to implement on a dynamically imported module like this

export const routes: Routes = [
    {
      path: '',
      redirectTo: 'tile/default',
      pathMatch: 'full'
    },
    {
        path: 'tile',
        loadChildren: () => import('./modules/tile/tile.module.tns').then(m => m.TileModule)
    },
]

When following the instructions from the docs it will result in the routes not working properly.

Cause

There is a known issue with angular and lazy loading auxiliary routes. It still hasn't been fixed at the time of this issue in angular 8.0.0.

Solution

There is a workaround where a default named route is used in the dynamic module like this

 export const routes: Routes = [
    {
        path: 'default',
        redirectTo: '/tile/default/(homeOutlet:home//searchOutlet:search//viewsOutlet:views//settingsOutlet:settings//legendOutlet:legend)',
        pathMatch: 'full'
    },
    {
        path: 'default',
        component: TileComponent,
        children: [
            {
              path: 'home',
              component: HomeComponent,
              outlet: 'homeOutlet'
            },
            {
              path: 'search',
              component: HomeComponent,
              outlet: 'searchOutlet'
            },
            {
                path: 'views',
                component: ViewsComponent,
                outlet: 'viewsOutlet'
            },
            {
                path: 'settings',
                component: SettingsComponent,
                outlet: 'settingsOutlet'
            },
            {
                path: 'legend',
                component: LegendComponent,
                outlet: 'legendOutlet'
            }
        ]
    }
];

Note: The module that dynamically imports this module must also now redirect to this default path like this

export const routes: Routes = [
    {
      path: '',
      redirectTo: 'tile/default',
      pathMatch: 'full'
    },
    {
        path: 'tile',
        loadChildren: () => import('./modules/tile/tile.module.tns').then(m => m.TileModule)
    },
]

useful post showing how to use named outlets in nativescript