5

I'm trying to reproduce my problem with Angular2 router but i cannot create a working copy of my project in Plunker.

Here is my try: https://plnkr.co/edit/1lpoYP4qlBZLuqZHW7Ft

I used the following line of code in the index.html file to make the routes paths working with the run environment of Plunker and with my '' default paths.

<script>document.write('<base href="' + document.location + '" />');</script>

Why i'm stilling get this error?

smartmouse
  • 13,912
  • 34
  • 100
  • 166

1 Answers1

10

  1. You have a small typo in your plnkr:

    loadChildren: 'app/fist-section.module#FirstSectionModule' }

    might be first ;)

  2. There's still another problem: Even childrens need an empty ''-path. So instead of writing

children: [ { path: 'first-section', loadChildren: 'app/first-section.module#FirstSectionModule' } ] you should add an empty path and redirect to the first-section-path like this:

children: [
    { path: '', redirectTo: 'first-section'},
    { path: 'first-section', loadChildren: 'app/fist-section.module#FirstSectionModule' }
]

Here is the corrected plnkr:

https://plnkr.co/edit/9fMwx0?p=preview

Update Angular 2.4.1:

I noticed that with the latest version of angular (2.4.1) it is not necessary any more to use an empty path for the children routes.

I updated the plunker with the latest angular 2.4.1 version: PLUNKER. The sample is running without an empty path right now.

Philipp Kief
  • 8,172
  • 5
  • 33
  • 43
  • Thank you very much for your support! Anyway as you can see the main app component is loaded twice. Can you have a look again at the (updated) Plunker? https://plnkr.co/edit/AB6ac11Ne50Tj9zuzf57 – smartmouse Oct 19 '16 at 14:41
  • 2
    The problem is, that you have defined the `AppComponent` for your `''`-path. So it will load the childrens into your root `` in which you have your whole app running. You need to create another component, I named it `StartComponent`: See the updated plunker: https://plnkr.co/edit/5f7Q0Pgji64l5GauDqMX?p=preview – Philipp Kief Oct 19 '16 at 14:52
  • What could i change in the paths to make it working without adding a new "container" component? – smartmouse Oct 19 '16 at 15:05
  • In addition, when i click on "Sub Page" i would like to see it under "First Section container"... but it loads at the topper level (it replaces "First Section container" instead of appear under it). – smartmouse Oct 19 '16 at 15:08
  • You cannot get it working without a new container component. If you set the "AppComponent" for the `''`-path, it will replace the current component which is currently loaded into the parent router-outlet. So you replace the whole AppComponent with e.g. the "First Section Comp.". Try it out :) But you will go better to add another component. if you want to see the sub pages under the "First Section container" you have to create childrens again ([plunker](https://plnkr.co/edit/JcMZSrYAH1WDnViP7Mxh?p=preview)). – Philipp Kief Oct 19 '16 at 15:26
  • Thank you for your support, i really appreciate it. I have updated my Plunker (https://plnkr.co/edit/WT9dc6oYOVn5Waw8dmwk) and i added a second section. As you can see the sub-pages of the second section loads the sub-pages of the first section. The paths should be the following: `/first-section/sub-page` and `/first-section/sub-page2` for the First Section and `/second-section/sub-page` and `/second-section/sub-page2` for the Second Section. How to reach this? – smartmouse Oct 20 '16 at 09:39
  • All you need to do is to transform the absolute routes into relative routes (corrected): `export class SecondSectionComponent { menus: Array = [ { title: 'Second Sub Page', path: 'sub-page'}, { title: 'Second Sub Page 2', path: 'sub-page-2'} ] }` I removed the `/` before the paths so the router stays in the current ` and navigates to the `sub-page`. https://plnkr.co/edit/GpCwUzsF08pTlEtGPgNP?p=preview – Philipp Kief Oct 20 '16 at 12:45
  • alternatively you work with absolute routes like this: `path: '/second-section/sub-page'` – Philipp Kief Oct 20 '16 at 12:53
  • Your latest Plunker doesn't work... Second Section doesn't load. – smartmouse Oct 20 '16 at 12:58
  • For me it's working... it needs a moment to load the second section, dont know why it's not working for you... but I postet all of my changes above so you can use this approach. – Philipp Kief Oct 20 '16 at 13:31
  • I solved my problems with this answer, using Angular 6 – artdias90 Jun 14 '18 at 16:09