After transitioning from Angular2 RC4 to RC5, I've been facing some issues. I can't tell if these problems are due to my errors or the transition itself. Here's how my app component looks:
import {Component, OnInit} from "@angular/core";
import {SetLocationService} from "./auth/set-location.service";
@Component({
selector : "my-app",
template: `
<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>
`
})
export class AppComponent implements OnInit{
constructor(
private _setLocationService : SetLocationService
){}
ngOnInit() {
this._setLocationService.setLocation();
}
}
Here's the routing:
import {Routes, RouterModule} from '@angular/router';
import {SearchBoxComponent} from "./search/searchBox.component";
import {SearchResultComponent} from "./search/search-result.component";
import {LoginComponent} from "./auth/login.component";
import {SignupComponent} from "./auth/signup.component";
import {LogoutComponent} from "./auth/logout.component";
import {RecoverPasswordComponent} from "./auth/recover-password.component";
import {ProfileComponent} from "./auth/profile.component"
import {AccountComponent} from "./auth/account.component"
const appRoutes: Routes = [
{path : '', component: SearchBoxComponent},
{path : 'login', component: LoginComponent},
{path : 'signup', component: SignupComponent},
{path : 'logout', component: LogoutComponent},
{path : 'profile', component: ProfileComponent},
{path : 'account', component: AccountComponent},
{path : 'user/:uname', component: SearchBoxComponent},
{path : 'recover-password', component: RecoverPasswordComponent},
{path : 'search/:params', component: SearchResultComponent},
{path : '**', component : SearchBoxComponent}
];
export const routing = RouterModule.forRoot(appRoutes);
Regarding the app module:
// @Modules -> Modules
import {BrowserModule} from '@angular/platform-browser';
import {FormsModule} from '@angular/forms';
import {HttpModule} from '@angular/http';
import {LocationStrategy, HashLocationStrategy} from '@angular/common';
import {NgModule} from '@angular/core';
// @Routes -> routes
import {routing} from "./app.routes";
// @Components - > Components
import {AccountComponent} from "./auth/account.component";
import {AppComponent} from './app.component';
import {ChatBoxComponent} from "./chat/chat-box.component";
import {ChatBoxDirective} from "./chat/chat-box.directive";
import {FooterComponent} from "./layout/footer.component";
import {HeaderComponent} from "./layout/header.component";
import {LoginComponent} from "./auth/login.component";
import {LogoutComponent} from "./auth/logout.component";
import {ProfileComponent} from "./auth/profile.component";
import {RecoverPasswordComponent} from "./auth/recover-password.component";
import {SearchBoxComponent} from "./search/searchBox.component";
import {SearchResultComponent} from "./search/search-result.component";
import {SignupComponent} from "./auth/signup.component";
// @providers - > services
import {AuthService} from "./auth/auth.service";
import {SetLocationService} from "./auth/set-location.service";
import {SearchService} from "./search/search.service";
@NgModule({
imports: [
BrowserModule,
FormsModule,
HttpModule,
routing
],
declarations: [
AccountComponent,
AppComponent,
ChatBoxComponent,
ChatBoxDirective,
FooterComponent,
HeaderComponent,
LoginComponent,
LogoutComponent,
ProfileComponent,
RecoverPasswordComponent,
SearchBoxComponent,
SearchResultComponent,
SignupComponent
],
providers : [
AuthService,
SetLocationService,
SearchService,
{provide: LocationStrategy, useClass: HashLocationStrategy}
],
bootstrap: [
AppComponent,
HeaderComponent,
FooterComponent
]
})
export class AppModule {}
One issue I'm facing is that if I don't include HeaderComponent and FooterComponent in the bootstrap of app.module, they don't load when the root route is active (localhost:3000), only the SearchBoxComponent does. I'm confused because I didn't see adding multiple components in bootstrap in the official documentation.
My second issue is similar to the first one. If I embed a component (SearchBoxComponent) into another component like the following code, the SearchBoxComponent doesn't load but the other parts do.
@Component({
selector: "search-result",
template : `
<searchBox></searchBox>
<div class="tag_list">
<p *ngFor = "let tag of result.obj.tags" class = "tag-li" >
<a [routerLink] = "['/search', tag]" (click) = "onSearchCliked($event, tag)"> {{tag}} </a>
</p>
</div>
`
})
I've been stuck on these problems for the past few days, so any help would be greatly appreciated. Thank you!