router-outlet issues

[jmls]

I am trying to reproduce the "holy grail" layout , but within a <router-outlet>

if I make my component template empty, and in the main html I have this code

        <router-outlet></router-outlet>

        <div class="containerX">
            <div class="colorNested box" fxLayout="column">
                <header>header</header>
                <div id="main" fxLayout fxFlex >
                    <nav fxFlex="1 6 20%" fxFlexOrder > nav </nav>
                    <article fxFlex="3 1 60%" fxFlexOrder > article </article>
                    <aside fxFlex="1 6 20%" fxFlexOrder > aside </aside>
                </div>
                <footer>footer</footer>
            </div>
        </div>

where the "containerX" html is lifted straight from the demo code, my screen looks like this

so, now I cut the holy grail from the main html,

 <router-outlet></router-outlet>

and paste the holy grail code into the component html

<div class="containerX">
            <div class="colorNested box" fxLayout="column">
                <header>header</header>
                <div id="main" fxLayout fxFlex >
                    <nav fxFlex="1 6 20%" fxFlexOrder > nav </nav>
                    <article fxFlex="3 1 60%" fxFlexOrder > article </article>
                    <aside fxFlex="1 6 20%" fxFlexOrder > aside </aside>
                </div>
                <footer>footer</footer>
            </div>
        </div>

the screen now looks like this

I have tried to add fxLayout="column" to the router-outlet, didn't make a change, so I know I'm missing something obvious ...

I am using the latest git version

thanks

[ThomasBurleson]

Notice the Flex-Layout Demos uses Routing also.

When you route, if you specified a to-be-routed view that is declared in another module, then you must also re-import the FlexLayoutModule.

[jmls]

Hmm, I tried that, added the FlexLayoutModule to my module (as well as the main app module) and now get this :

If I remove the import from my module (and keep it in the app module) then the screen goes back to the "bars" format

Are you aware of any plunker "seed" project for angular-cli and angular-flex so I can try and reproduce my problem in a very simple app ?

[ThomasBurleson]

Try this Plunkr as a template starter: http://plnkr.co/edit/WzfbnAaRBxH8H67B5Di4?p=preview

[ThomasBurleson]

Closing as invalid.

[jefbarn]

This issue is still valid. There is no way to add flex-layout directives to the app host component.
Edit: found #76 which is same issue.

[magnayn]

I don't know if it's helpful, but I had the same issue. Basically if I had

<div fxFlexFill fxLayout="column">
  <header>header</header>
  <div id="main" fxLayout="row" fxLayout.xs="column" fxFlex>
      <nav     fxFlex="1 6 20%" fxFlexOrder fxFlexOrder.xs="2"> nav     </nav>
      <article fxFlex="3 1 60%" fxFlexOrder fxFlexOrder.xs="1"></article>
      <aside   fxFlex="1 6 20%" fxFlexOrder fxFlexOrder.xs="3"> aside   </aside>
  </div>
  <footer>My footer</footer>
</div>

With

<div fxFlexFill fxLayout="column">
  <header>header</header>
  <router-outlet class="foo"></router-outlet>
  <footer>My footer</footer>
</div>

(And the inner "main" div generated by the navigated page), then I was getting all sorts of problems.

The issue seems that any element (or pseudo-element) also gets considered for flexbox layout - in this case the router-outlet. (I.E this isn't specifically an angular flex-layout issue) What I did was to make it

<router-outlet class="foo"></router-outlet>

And add the style

.foo {
    flex: 1 1 auto;
    display: flex;
    overflow: hidden;
  }

Which seems to be working for me.

[yves-pkstd]

I am experiencing the same problem. When I put the layout code outside the (nested)router-outlet then everything works fine. When I copy the layout code and put it a loaded template then the layout is all scrambled and is very difficult to position right. Sadly magnay's fix is not working for me.

The thing is that it does get passed my first router-outlet. I am using child views and different layout paths.

• app.component: only
• layout.component: which is a path that gets loaded, contains the shared flex-layout + another router-outlet for the child views
• childview.component: child view layout and content, using flex-layout

if I replace the router-outlet in layout.component with my childview.component content/layout all works just fine. Do I use the original structure and put the layout in my child view again, then it doesn't.

I am loading the MaterialModule and FlexLayoutModule in every module just to be sure and the flex layout still reacts to flex-layout changes made in the child view, although weirdly. This leads me to believe that loading/import wise all is well.

It is the same problem though. Router outlet being considered for flex-layout when it should be ignored. The thing is, this seems like such a major blocking issue to me so I am surprised not more people are reporting this problem. Which makes me believe I must be doing something wrong :)

Will create a plunker when I have time.

[magnayn]

What worked for me (eventually, and there may be better solutions) was

• in my component (that appears inside router-outlet), I add a style class. E.g:

@Component({
             templateUrl: 'patient.page.html',
             host: {class: 'myClass'},

And inside my global styles.css I added

.myClass {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

I don't think there's much that flex-layout can do - it's essentially providing a nice API to declare flexbox directives, but those ultimately boil down to styles applied to elements. Ultimately, despite the "css separates structure from presentation" cheerleading, it's simply not true, as additional elements break your hard-won flexbox layout.

The other thing that helped was simulating my layout in a static HTML file, and mucking about adding <div>s in the layout simulating what happens in router-outlet.

[yves-pkstd]

@magnayn

Thanks. That fix works very well.

Yeah I agree. I was already doing exactly that. Trying to emulate the bug in a router-outlet free template and try to fix it that way. Big thanks for saving me that time.

[amirshenhav]

@magnayn
I ran into the same issue. Thanks for the fix!