Angular2 rc5 component> not loading

Question

I recently switched to Angular2 RC5 with RC4. Since then I have encountered two problems. I am not sure if these problems are mine due to a flaw or a transition. My application component is as follows:

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(); } } 

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); 

application 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'; // import {RouterModule} from '@angular/router'; // @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 {} 

My first problem is that if I do not add 1.HeaderComponent, 2.FooterComponent to bootstrap from app.module, none of them (1.HeaderComponent, 2.FooterComponent) loads with the active root route (localhost: 3000) but SearchBoxComponent. I am a little confused since I have not seen adding a few components to bootstrap in the white paper.

My second problem is almost the same as the first. If I insert the component (seachBoxConmponent) into another component, such as the following code, the seachBoxConmponent component does not load, but the other parts.

 @Component({ selector: "search-result", template : ` <seachBox></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 was wondering if anyone could help me, I have been working on this issue for the last couple of days, but still I am stuck here.

Answer 1

Verify that the module declaring the component is exporting it. Otherwise, this component will not be visible to other components trying to use it.

I would suggest creating separate modules for discrete tasks such as search, registration, chat, etc. and following the template below to share your components.

I noticed that Angular2 fails when the component used is not included in the scope. You add the component to the template, and it simply will not be displayed, without errors. Prior to RC5, this usually meant that you did not specify the desired component in the directives: [] array. With RC5, this probably means that you are not exporting a component from a module that declares it and / or imports into a module that wants to use it.

FooModule declares and exports a FooComponent, providing it for use by other components (potentially in other modules):

 @NgModule({ declarations: [FooComponent], imports: [BrowserModule, FormsModule], exports: [FooComponent] }) export class FooModule {} 

FooComponent:

 @Component({ selector: 'foo', template: `FOO` }) export class FooComponent {} 

BarModule imports FooModule, gaining access to the components that it provides (namely FooComponent):

 @NgModule({ declarations: [BarComponent], imports: [FooModule, FormsModule], exports: [BarComponent] }) export class BarModule {} 

BarComponent can access the FooComponent and use it in the template:

 @Component({ selector: 'bar', template: `<foo></foo>BAR` }) export class BarComponent {} 

Answer 2

I'm having problems with all kinds of migration to RC5, but only the AppComponent should be in your bootstrap. If you only get to the component through the router, then this component should not be in the ads. But this component should use the default export class ComponentName.

the way I attacked this is to comment everything and add components and services one at a time.

Answer 3

Thanks guys for the help. Finally, I solved the problem. I actually included ROUTER_DIRECTIVES in the HeaderComponent and FooterComponenet. These are places where conflicts occur. This is because the "RouterModule" implicitly exposes ROUTER_DIRECTIVES. Therefore, we should not include the directive again in any component. I removed this directive and fixed my problem after almost a week. I also had to change the old-fashioned routerLike style according to the docs.

@Alex Sartan: Thanks so much for explaining the details of the problem. I fix the problem without creating separate modules for discrete tasks. But it is better to leave all problems separate. I appreciate your help.