Angular refresh the application if the URL is written manually

I'm using Angular 6 and I have an issue with the change of routes. If I navigate through the application using the routerLink or the navigate() method, it works correctly, because it only load the new module (if necessary). But for example if I am in this link: localhost:8080/home, I click on the URL, cancel the 'home', write 'profile' and press Enter, it correctly goes on profile page but the application in reloaded (also the app component). Why? I can't figure out. This is my routing:

const appRoutes: Routes = [
  { path: 'home', component: HomeComponent, canActivate: [AuthGuard] },
  { path: 'profile', component: ProfileComponent, canActivate: [AuthGuard] },
  { path: 'login', component: LoginComponent },
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: '**', component: PageNotFoundComponent }
];

@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Maybe the issue is on the auth-guard?

@Injectable()
export class AuthGuard implements CanActivate {

constructor(private store: Store<fromApp.AppState>, private route: ActivatedRoute, private router: Router) {
}
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    return this.store.select('auth')
        .pipe(take(1),
            map((authState: fromAuth.State) => {
                if (authState.authenticated) {
                    return true;
                } else {
                    let sessionStorageToken: string = sessionStorage.getItem('token');
                    if (sessionStorageToken) {
                        this.store.dispatch(new AuthActions.Login());
                        this.store.dispatch(new AuthActions.SetToken(sessionStorageToken));
                        return true;
                    } else {
                        let url = state.url;
                        this.router.navigate(['/login', { redirectTo: url }]);
                        return false;
                    }
                }
            }));
}
}

This is profile.module.ts:

@NgModule({
declarations: [
    ProfileComponent
],
imports: [
    CommonModule,
    FormsModule
]
 })
 export class ProfileModule { }

When you're navigating through the routerLink within Angular, the underlying JavaScript is determining what to serve to the browser. Meaning that when the URL address is changed via the Angular router, it picks up the change and serves the components accordingly.

When you update the URL manually and press enter, it is like going to a new web page. Meaning that the server will need to re-serve the base website, http://localhost:1234, and then the application will handle the route there after, /profile and serve the required component.

I've tried to explain it in a very simplistic way, for a more thorough explanation please check out the Angular docs