Angular routing functions flawlessly on Chrome Mac but encounters issues on Chrome iOS

Encountering a strange issue. My routing is properly configured and has been verified multiple times.

Oddly enough, page1, page3, and page5 are functioning correctly, while page2, page4, and page6 fail to redirect as expected.

Upon clicking the redirect button for page2, it takes me to the landing page instead. Even manually entering https://example.com/page2 results in the same: https://example.com without any content displayed.

Please review the routes provided below.

const routes: Routes = [
  { path: '', component: LandingComponent},
  { path: 'page1', component: Page1Component},
  { path: 'page2', component: Page2Component},
  { path: 'page3', component: Page3Component},
  { path: 'page4', component: Page4Component},
  { path: 'page5', component: Page5Component},
  { path: 'page6', component: Page6Component},
  { path: '**', component: NotFound404Component}
  ];

Furthermore, there seems to be an issue with a particular component failing to load.

@Component({
  selector: 'app-page2',
  templateUrl: './page2.component.html',
  styleUrls: ['./page2.component.scss'],
  animations: [
    trigger('animation1', [
      transition('void => *', useAnimation(flip))
    ]),
    trigger('animation2', [
      transition('void => *', useAnimation(bounceInDown), {
        params: { timing: 3}
      })
    ])
  ]
})
export class Page2Component implements OnInit {

  constructor(public some: SomeService) { }

  ngOnInit(): void {
  }

}

The main issue appears to be with Chrome on iOS, unlike MacOS where everything works seamlessly - even when emulating an 'iPhone' device.

Any suggestions or insights would be greatly appreciated.

Answer №1

Thank you everyone, I have successfully found the solution.

The log below shows:

LOGResolveEnd(id: 4, url: '/page2', urlAfterRedirects: '/page2', state: Route(url:'', path:'') { Route(url:'page2', path:'page2') } )
LOGNavigationError(id: 4, url: '/page2', error: Error: The animation trigger "animation1" has failed to build due to the following errors:
The provided animation property "backface-visibility" is not a supported CSS property for animations)
  ERRORERROR Error: Uncaught (in promise): Error: The animation trigger "animation1" has failed to build due to the following errors:
The provided animation property "backface-visibility" is not a supported CSS property for animations

The "bv" property is not compatible with Chrome (iOS), causing the animation error.

Solving this issue is straightforward if you understand how to troubleshoot routing in Chrome (iOS). Just follow these two simple steps:

  1. Add this constructor to AppModule.
export class AppModule {
  constructor(private readonly router: Router) {
    router.events
      .subscribe(console.log)
  }
}
  1. chrome://inspect - this will grant access to Chrome (iOS) logs.

Using different animation options can prevent errors on various devices. It's advisable to incorporate this into testing procedures.

Answer №2

The potential issue you're facing could be due to Chrome on iOS utilizing WebKIT as its browser engine.

Make sure to test your content on Safari too, as Apple restricts other browser implementations apart from Webkit.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Develop a TypeScript class by incorporating a static function from an external library, while ensuring type safety

I am looking to enhance the capabilities of the rxjs5 Observable class by adding a static function. While this can be easily accomplished in plain JavaScript: var myStaticFn = function() { /* ... */ }; Observable.myStaticFn = myStaticFn; this approach w ...

What is the method for including as: :json in your code?

I have a file with the extension .ts, which is part of a Ruby on Rails application. The code in this file looks something like this: export const create = async (params: CreateRequest): Promise<XYZ> => { const response = await request<XYZ> ...

Dealing with the "this" problem in TypeScript and its impact on scope

Here is my code snippet: class MyClass { name = "MyClass"; // traditional method definition getName1(){ return this.name; } // method defined as an arrow function getName2 = () => { return this.name; ...

The Angular component refuses to open

Having some trouble with my navbar containing different components that should open upon selection. The profile component is opening correctly, but the "My favorites" button isn't displaying anything from that component. Here's the code snippet ...

What is the most efficient way to apply multiple combinations for filtering the information within a table?

I'm facing an issue with my Angular project. I have 4 select boxes that allow users to apply different filters: office worker project name employee activities The problem I'm encountering is the difficulty in predicting all possible combination ...

Handling HTTP Errors in Angular Components with NGRX

I have successfully integrated the store into my angular project. I am able to handle and process the successSelector, but I am facing difficulty in capturing any data with the errorSelector when an HTTP error occurs from the backend. The error is being c ...

Angular: Preserve the URL even when encountering a 404 page

Creating a custom 404 page in Angular 4 is something I have recently done, and I am looking for a way to preserve the incorrect URL that was input by the user. To see an example of this behavior, you can visit sites like GitHub. They show a 404 page when a ...

Error with Typescript types when using Styled Components

After successfully setting up styled-components in react-native, I encountered an issue while trying to use it in a simple example with react-native-web: import * as React from 'react'; import styled from 'styled-components'; export d ...

Using async-await in canActivate() within Angular 7

I am currently working on a code that verifies whether the browser contains user information. If not, the browser will make an API call to retrieve the user information from the server. Only users with valid information are granted access to navigate to di ...

Duplicate the ng-template using ng-content as the body (make a duplicate of ng-content)

I have been working on creating a feature that allows users to add custom columns to a PrimeNg table. The main reason for developing this feature is to provide users with a default table that already has numerous configuration options pre-set. However, I ...

Angular 11 - Binding Data to an Array Element

Currently, I am attempting to apply data-binding to specific properties of an element categorized as Ripe: export interface Ripe{ version: string; data_call_status: string; cached: boolean; data: { is_less_specific: boolean, ...

Is NX capable of speeding up the performance of ng serve?

Just starting out with NX... NX is designed to enhance the Angular CLI by leveraging computation caching for faster performance. When using nx build, builds are completed almost instantly thanks to caching. However, I'm curious if nx serve also uti ...

The message states that the variable "Chart" has not been defined

I have been attempting to integrate ChartJS with Angular2, but I keep encountering an error message stating that 'Chart is not defined'. I made sure to install the ChartJS typings and referenced them accordingly. Additionally, I included the char ...

Updating the value of a form control in Angular2

I am facing an issue when trying to create dynamic Angular 2 forms with controls and select boxes, like in this example on Plunker: <select class="form-control" ngControl="power"> <option *ngFor="#p of powers" [value]="p">{{p}}</o ...

Combining an Angular application within a Spring application and encountering a TypeError on a JSP page

I am currently working on integrating an Angular app into an existing Spring application. I have included the code for integration below. While it functions correctly on some JSP pages, it fails on others. Please see the description and rendered element in ...

Tips for concealing routes in the address bar on Angular versions 5 and above

Is it possible to conceal routes from the browser's address bar? Example: http://localhost:4200/user/profile to http://localhost:4200 Is there a way to hide routes? ...

Incompatibility issues between NestJS and socket.io package

After diligently following the documentation, I attempted to install and work with socket.io on nestjs. However, I encountered multiple issues when installing packages. Despite trying different methods to update the package, nothing seemed to resolve the i ...

Retrieving radio button value in Angular 2

Currently, I am attempting to retrieve the radio button value in an Angular 2 project. The radio buttons are defined in index.html as: <input type="radio" id="options1" name="function" value="create"> <input type="radio" id="options2" name="func ...

Discovering the root cause of performance issues in a v14 Angular application

I am currently working on a web application built with Angular 14. During my testing with Lighthouse, I have discovered that the performance of the application is satisfactory on desktop but falls short for mobile users. The application consists of three ...

Utilize string variables within TypeScript's enumeration feature

Can string variables be used in enums in TypeScript? Strings can be used in enum like so: enum AllDirections { TOP = 'top', BOTTOM = 'bottom', LEFT = 'left', RIGHT = 'right', } However, trying to use variab ...