Após quebrar um pouco a minha cabeça (e pesquisar um pouco), consegui fazer algo similar ao que você quer.
Minha aplicação tem uma barra de navegação que eu quero deixar ela no topo o tempo todo, mas que ela deveria desaparecer na tela de login.
Meu app html template era mais ou menos assim:
<app-nav-bar></app-nav-bar>
<router-outlet></router-outlet>
Isso fazia com que a barra aparecesse depois da tela de login, mas caso eu voltasse para a "tela inicial" por algum link, a barra continuava na página. Então eu mudei para isso aqui:
<router-outlet name="navbar"></router-outlet>
<router-outlet></router-outlet>
Com a adição de uma rota:
{path: 'home', component: NavBarComponent, outlet: 'navbar'}
Agora, quando se trata de mudar rotas, você pode usar dois modos:
No routerLink (dentro do HTML), usar a seguinte forma:
[routerLink]="[{outlets: {primary: ['caminho'], navbar: ['caminho']}}]"
E nos componentes (TypeScript), da seguinte forma:
router.navigate([{outlets: {primary: 'caminho', navbar: 'caminho'}}]);
Agora, partindo da descrição do seu problema, o router-outlet primário deve ficar FORA do wrapper (dentro do app.component.html) e o router-outlet auxiliar dentro do wrapper. Você vai fazer as alterações de rota usando o auxiliar.
Nota:
A barra de endereços vai ficar diferente, algo como
localhost:4200/home(navbar:home)
Onde localhost:4200/home
é a rota do outlet primário e navbar:home
é a rota dos outlets auxiliares
<router-outlet>
é apenas uma marcação para onde os elementos devem aparecer no browser. Todo componente irá aparecer logo abaixo dessa tag. Acredito que você deverá fazer um segundo outlet dentro do wrapper e anexar as trocas de rotas a esse segundo.