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
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
