Angular 2 - Components are not loaded into router-outlet on apache server (with no errors)

[Tomas Katz]

Im developing an Angular 2 app and all is OK while using the lite-server that is used in the official tutorials in the angular 2 site.

The problem occurs when im loading the app using apache/xamp.

On lite-server:

The initial page loads the AppComponent and its nested component (Groups) correctly.

On xamp (Apache):

Everything loads except the contents of router-outlet (Groups)

The AppComponent view:

<div #header></div>
<div class="contentWrapper">
    <div #nav></div>
    <div class="main">
        <router-outlet>
            Loadin...
        </router-outlet>
    </div>
</div>

The AppComponent router:

import {
    Component
    DynamicComponentLoader,
    ElementRef,
    OnInit
} from "angular2/core";
import {Header} from "../header.component/header.component";
import {Navigation} from "../navigation.component/navigation.component";
import {Groups} from "../groups.component/groups.component";
import {
    Route,
    RouteConfig,
    ROUTER_DIRECTIVES,
    ROUTER_PROVIDERS
} from "angular2/router";

@Component({
    selector:"something-somethig",
    templateUrl:"app/views/AppComponent.component.html",
    directives:[
        ROUTER_DIRECTIVES
    ],
    providers:[
        ROUTER_PROVIDERS
    ]
})
@RouteConfig([
    {path:"/",name:"Index",component:Groups},
    {path:"/groups",name:"Groups",component:Groups}
])

export class AppComponent implements OnInit{
    constructor(private _dcl:DynamicComponentLoader,private _elmRef:ElementRef){

    }
    ngOnInit(){
        //noinspection TypeScriptValidateTypes
        this._dcl.loadIntoLocation(Header,this._elmRef,"header");
        this._dcl.loadIntoLocation(Navigation,this._elmRef,"nav");
    }
}

Groups HTML:

<div #mainheader></div>
<div class="row topButtons">
    <div class="left">
        <div #groupsactions></div>
    </div>
    <div class="right">
        <div #search></div>
    </div>
</div>
<div #statistics></div>
<div #datatable></div>

Groups component:

/**
 * Created by Tomas.Katz on 3/10/2016.
 */

import {
    Component,
    OnInit,
    ElementRef,
    DynamicComponentLoader
} from "angular2/core";

import {DataTable} from "../dataTable.component/dataTable.component";
import {Statistics} from "../statistics.component/statistics.component";
import {GroupsActions} from "../groupsActions.component/groupsActions.component";
import {SBoxSearch} from "../search.component/search.component";
import {MainHeader} from "../mainHeader.component/mainHeader.component";

@Component({
    selector:"sbox-groups",
    templateUrl:"app/views/groups.component.html"
})

export class Groups implements OnInit{
    constructor(private _dcl:DynamicComponentLoader, private __elmRef:ElementRef){

    }
    ngOnInit(){
        this._dcl.loadIntoLocation(DataTable,this.__elmRef,"datatable");
        this._dcl.loadIntoLocation(Statistics,this.__elmRef,"statistics");
        this._dcl.loadIntoLocation(GroupsActions,this.__elmRef,"groupsactions");
        this._dcl.loadIntoLocation(SBoxSearch,this.__elmRef,"search");
        this._dcl.loadIntoLocation(MainHeader,this.__elmRef,"mainheader");
    }
}

Steps I tried to fix this:

1) I checked that the problem is not with the components and bootstrapped components straight to the index.html and they all work.

2) Looking for related questions asked. I did find similar problems regarding multi level routing (e.g /users/profile/thirdRoute/) that is problamatic with apache.

3) Tried implementing the HashLocationStrategy which did not resolve my issue (but did resolve inital server requests to sub routes e.g http://domain/route)

Recating the issue/bug:

1) load components into router-outlet using apache server and not lite-server

Notes: 

* Everything works fine using lite-server.

* No error messages given by browser or compiler.

* <base href=""> is defined as shown in the angular 2 tutorials.

Specs:

Angular 2 2.0.0-beta.8

[Günter Zöchbauer]

I guess http://stackoverflow.com/questions/31415052/angular-2-0-router-not-working-on-reloading-the-browser

...

[Charul Chavda]

I have the exact issue on Angular 5.2. I have exhausted all the solutions found by googling.

Were you able to resolve the issue.

Any help is greatly appreciated.

Regards,

Charul

[Charul Chavda]

I have the exact same issue, none of the approaches i found on google resolve this issue.

Were you able to resolve the issue?

I would really appreciate your response.

Regards,

Charul

On Sunday, March 13, 2016 at 9:04:15 AM UTC-7, Tomas Katz wrote:

[mia avery]

Hello Folks,

       A component is a simplified version of a directive. It cannot do dom manipulation (not link or compile methods) and "replace" is gone too. Components are "restrict: E" and they are configured using an object (not a function). In an AngularJS context, modularization is an organization by function instead of type.

Using Components

Now that we know how to create components, let's refactor the HTML page to make use of our newly acquired skill.

go to the home page

app/index.html:

<html ng-app="phonecatApp">

<head>

  ...

  <script src="bower_components/angular/angular.js"></script>

  <script src="app.js"></script>

  <script src="phone-list.component.js"></script>

</head>

<body>

  <!-- Use a custom component to render a list of phones -->

  <phone-list></phone-list>

</body>

</html>

app/app.js:

// Define the `phonecatApp` module

angular.module('phonecatApp', []);

app/phone-list.component.js:

// Register `phoneList` component, along with its associated controller and template

angular.

  module('phonecatApp').

  component('phoneList', {

    template:

        '<ul>' +

          '<li ng-repeat="phone in $ctrl.phones">' +

            '<span>{{phone.name}}</span>' +

            '<p>{{phone.snippet}}</p>' +

          '</li>' +

        '</ul>',

    controller: function PhoneListController() {

      this.phones = [

        {

          name: 'Nexus S',

          snippet: 'Fast just got faster with Nexus S.'

        }, {

          name: 'Motorola XOOM™ with Wi-Fi',

          snippet: 'The Next, Next Generation tablet.'

        }, {

          name: 'MOTOROLA XOOM™',

          snippet: 'The Next, Next Generation tablet.'

        }

      ];

    }

  });

  

  

  A