Page reload on child routes does not work

Question

I'm working with angular dart. I have a project with different components, in general the routing works fine, but, when I try to reload pressing "f5", I receive a white page only in child components,in the other components reload works correctly. The console doesn't throw an error, can you help me ?

I follow the router tutorial https://angulardart.dev/guide/router/4

I tried with routing the same component like a child and independent, it only reload correctly when is independent.

routes.dart file

import 'package:acoustic_inteligence_app/src/app/content/content_component.template.dart'
    as content_component;
import 'package:acoustic_inteligence_app/src/app/content/not_found_component/not_found_component.template.dart'
    as not_found_component;
import 'package:acoustic_inteligence_app/src/app/content/landing_component/landing_component.template.dart'
    as landing_component;
import 'package:acoustic_inteligence_app/src/app/content/start_component/start_component.template.dart'
    as start_component;
import 'package:acoustic_inteligence_app/src/app/content/team_component/team_component.template.dart'
    as team_component;
import 'package:acoustic_inteligence_app/src/app/content/transcription_component/editor_component/editor_component.template.dart'
    as editor_component;
import 'package:acoustic_inteligence_app/src/app/content/transcription_component/list_component/list_component.template.dart'
    as list_transcription_component;
import 'package:acoustic_inteligence_app/src/app/content/transcription_component/transcription_component.template.dart'
    as transcription_component;
import 'package:acoustic_inteligence_app/src/app/content/transcription_component/upload_component/upload_component.template.dart'
    as upload_component;
import 'package:acoustic_inteligence_app/src/app/login/login_component.template.dart'
    as login_component;
import 'package:acoustic_inteligence_app/src/app/register/register_component.template.dart'
    as register_component;
import 'package:angular_router/angular_router.dart';

import 'package:acoustic_inteligence_app/src/front/routes/route_paths.dart';
export 'package:acoustic_inteligence_app/src/front/routes/route_paths.dart';

class Routes {
    static final content = RouteDefinition(
    routePath: RoutePaths.content,
    component: content_component.ContentComponentNgFactory,
    );

    static final landing = RouteDefinition(
    routePath: RoutePaths.landing,
    component: landing_component.LandingComponentNgFactory,
    );

    static final not_found = RouteDefinition(
    routePath: RoutePaths.not_found,
    component: not_found_component.NotFoundComponentNgFactory,
    );

    static final login = RouteDefinition(
        routePath: RoutePaths.login,
        component: login_component.LoginComponentNgFactory,
        useAsDefault: true);

    static final register = RouteDefinition(
        routePath: RoutePaths.register,
        component: register_component.RegisterComponentNgFactory);

    static final list_transcription = RouteDefinition(
        routePath: RoutePaths.list_transcription,
        component:
        list_transcription_component.ListTranscriptionComponentNgFactory,
        useAsDefault: true);

    static final upload = RouteDefinition(
        routePath: RoutePaths.upload,
        component: upload_component.UploadComponentNgFactory);

    static final editor = RouteDefinition(
        routePath: RoutePaths.editor,
        component: editor_component.EditorComponentNgFactory);

    static final team = RouteDefinition(
        routePath: RoutePaths.team,
        component: team_component.TeamComponentNgFactory);

    static final transcription = RouteDefinition(
        routePath: RoutePaths.transcription,
        component: transcription_component.TranscriptionComponentNgFactory);

    static final start = RouteDefinition(
        routePath: RoutePaths.start,
        component: start_component.StartComponentNgFactory,
        useAsDefault: true);

    static final appRoute = <RouteDefinition>[
    content,
    login,
    register,
    landing,
    RouteDefinition.redirect(
        path: '',
        redirectTo: RoutePaths.login.toUrl(),
    ),
    RouteDefinition(
        path: '.+',
        component: not_found_component.NotFoundComponentNgFactory,
    ),
    ];

    static final contentRoute = <RouteDefinition>[team, transcription, start,
        RouteDefinition(
        path: '.+',
        component: not_found_component.NotFoundComponentNgFactory,
    ),];

    static final transcriptionRoute = <RouteDefinition>[
    editor,
    list_transcription,
    upload
    ];
}

route_paths.dart file

import 'package:angular_router/angular_router.dart';

int getId(Map<String, String> parameters) {
    final id = parameters[paramId];
    return id == null ? null : int.tryParse(id);
}

const paramId = "id";

class RoutePaths {
    //main
    static final not_found = RoutePath(path: 'not_found');
    static final landing = RoutePath(path: 'landing');
    static final content = RoutePath(path: 'app');
    static final login = RoutePath(path: 'login', useAsDefault: true);
    static final register = RoutePath(path: 'register');
    static final team = RoutePath(path: 'team', parent: content);
    static final transcription =
        RoutePath(path: 'transcription', parent: content);
    static final start =
        RoutePath(path: 'inicio', parent: content, useAsDefault: true);

    //transcription
    static final list_transcription =
        RoutePath(path: 'listado', parent: transcription, useAsDefault: true);
    static final upload = RoutePath(path: 'upload/:${paramId}', parent: transcription);

    static final editor =
        RoutePath(path: 'editor/:${paramId}', parent: transcription);
}

Welcome to SO. add the code you tried with Minimum Reproducible Example — Allabakash

Ted Sander Ted Sander · Accepted Answer · 2019-11-26T21:09:31

This uses push routing from HTML5. With that solution you have to map the URLs on the server to return your main index.html page for any paths that could be used in the routing.

Otherwise you can add the routerProvidersHash instead. The Hash strategy will use a #/path at the end of the URL and keep the same starting path. This doesn't go to your server and such you won't need to re-map those paths. This is good when you don't control the server, but isn't considered the current best practice for web development.

Page reload on child routes does not work

1 Answers