Really wired problem. My routing had been configured well and has been checked enough times.

However, page1, page3 and page5 works well. And page2, page4, page6 don't redirect to themselves.

If I tap redirect button then instead of page2 go to the landing page. If I write https://example.com/page2 -> the same: https://example.com and without some content.

Check the routes here.

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}
  ];

And component that doesn't 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 point!! No problems with Chrome (MacOS) even with dimension 'iPhone'. All works well.

But there are problems with Chrome (iOS), as I have described above.

Any Idea?

CodePudding user response：

Your error might occur because Chrome on iOS uses WebKIT as Browser engine.

Check if your stuff works on Safari as well. This restriction comes from apple which does not allow any other browser implementations besides Webkit

CodePudding user response：

Thx all I have found the answer.

The log is here:

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 supported by Chrome (iOS). And such behavior was because of animation error.

This is an easy problem if you know how to debug routing in Chrome (iOS). Two easy steps:

1. Add this constructor to AppModule.

export class AppModule {
  constructor(private readonly router: Router) {
    router.events
      .subscribe(console.log)
  }
}

2. chrome://inspect - this way you might get an access to Chrome (iOS) logs.

All works well with different animation option. Keep an eye on animation libs it might cause errors using different devices. Would be great idea to include into testing pipelines.