Angular 2: Child Routes not working by address bar

Question

Hei,

I have a working App. When I move to child components by click it works but when I write the path on the address bar it doesn't work.

RouterModule.forRoot([               
        {
          path:'',
          component:SiteComponent,
          children: [{              
            path:'portafolio/:id',
            component:OutletComponent              
          }
          ]
        },      
        {
          path:'**',
          redirectTo: '',
          pathMatch: 'full'
        },       
        ]),

When I navigate to let's say the first portfolio using router.navigate(['/portafolio', portafolio.id]) it works fine. But when I want to navigate to the first portfolio by writing on the address bar localhost:4200/portafolio/1 it doesn't work. It doesn't show a 404 error. Just shows '...' which is what I have between the <app-root> tags in the index.html. The wildcard works fine because any other wrong address redirects to SiteComponent. How do I solve this in order to be able to open a specific portafolio also by writing the path to the address bar?

UPDATE: I changed the routing config to:

RouterModule.forRoot([               
    {
      path:'',
      component:SiteComponent          
    },
    {  
      path: 'portafolio',
      component:SiteComponent,
      children: [{              
        path:':id',            
        component: OutletComponent
        }]          
    },      
    {
      path:'**',
      redirectTo: '',
      pathMatch: 'full'
    },       
    ])

Same behavior. It works fine till I try to use the address bar to access any portfolio. This is the error I get:

2:19 GET http://localhost:4200/portafolio/inline.bundle.js 
2:19 GET http://localhost:4200/portafolio/polyfills.bundle.js 
2:19 GET http://localhost:4200/portafolio/styles.bundle.js 
2:19 GET http://localhost:4200/portafolio/vendor.bundle.js 
2:19 GET http://localhost:4200/portafolio/main.bundle.js

This is the bootstrapped Component:

import { Component } from '@angular/core';

@Component({
    selector : 'app-root',
    template: '<router-outlet></router-outlet>'
})
export class AppComponent {

} 

This is the OutletComponent definition:

@Component({ 
  templateUrl: './outlet.component.html', 
  styleUrls: ['./outlet.component.css'] 
}) 
export class OutletComponent implements OnInit { 
 portafolios:any; 
 numero:string; 

 constructor(private _router:Router,
             private _activatedRoute:ActivatedRoute, 
             private _formservice : FormService) { 
  _activatedRoute.params.subscribe((parametro:Params) => this.numero = parametro['id']); 
   _formservice.data$.subscribe(data=> { this.portafolios=data }); 
} 

UPDATE 2: I thought maybe there was something wrong with :id so I simplified and created a TestComponent.

import { Component } from '@angular/core';

@Component({
    template: '<h1>Test</h1>',
})

export class TestRoutesComponent {

}

And added another Route

{path: 'testroutes',component: TestRoutesComponent} 

Still when I try to access by address bar http://localhost:4200/testroutes/ I get the same error.

SOLUTION: Ok I created an angular-cli project and this time the route was working with router.navigate(['/testroutes') and ALSO with http://localhost:4200/testroutes/ So I splitted sublime in 2 and carefully looked for a difference and I found this <base href="./"> different to <base href="/"> A simple dot was causing the error. When I cloned the project the dot was there or did I put it there for some weird reason I don't know. Hope this helps someone.

Answer 1

Ok, I created an angular-cli project and this time the route was working with router.navigate(['/testroutes') and ALSO with http://localhost:4200/testroutes/ So I splitted sublime in 2 and carefully looked for a difference and I found this <base href="./"> different to <base href="/"> A simple dot was causing the error. When I cloned the project the dot was there or did I put it there for some weird reason I don't know. Hope this helps someone.