Geek Answers Handbook

Unhandled Promise rejection: Cannot find the main way to load Angular2 component

I am trying to implement login functions using angular2 -seed project as a base and referring to angular2 -login-seed. But I get the following error. I looked at other issues related to the same error, but could not understand what was wrong with my code. Please, help.

Unhandled Promise rejection: Cannot find primary outlet to load 'HomeComponent' ; Zone: angular ; Task: Promise.then ; Value: Error: Cannot find primary outlet to load 'HomeComponent'

My app component code:

@Component({
  moduleId: module.id,
  selector: 'sd-app',
  viewProviders: [NameListService, HTTP_PROVIDERS],
  templateUrl: 'app.component.html',
  directives: [ROUTER_DIRECTIVES, NavbarComponent, ToolbarComponent]
})
export class AppComponent {
  constructor() {
     console.log('Environment config', Config);
  }
}

app.component.html code:

<sd-navbar><router-outlet></router-outlet></sd-navbar>

Application Route Configuration:

const routes: RouterConfig = [
  {
    path: 'login',
    component: LoginComponent,
    canActivate: [UnauthenticatedGuard]
  },
  ...HomeRoutes,
];

export const APP_ROUTER_PROVIDERS = [
   provideRouter(routes),UnauthenticatedGuard, HomeComponentGuard
];

HomeRoutes Code:

export const HomeRoutes = [
{
   path: '',
   component: HomeComponent,
   canActivate: [HomeComponentGuard],
   children: [
     { path: '', component: HomeComponent },
     { path: 'home', component: HomeComponent },
     { path: 'about', component: AboutComponent }
   ]
 },
 ];

Home. Component Code:

import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';
import { NameListService } from '../shared/index';

@Component({
  moduleId: module.id,
  selector: 'wrapper',
  templateUrl: 'home.component.html',
  styleUrls: ['home.component.css'],
  directives: [ROUTER_DIRECTIVES]
})
export class HomeComponent {
   newName: string;
   constructor(public nameListService: NameListService) {
      console.log("nameList: " + JSON.stringify(nameListService.get()));
   }

   addName(): boolean {
     this.nameListService.add(this.newName);
     this.newName = '';
     return false;
   }

}
+4
source share
2 answers

, , , ( "LocalizationListComponent" ), , .

<router-outlet></router-outlet>. github https://github.com/angular/angular/issues/10686.

, . , children loadChildren - .

.

+7

templateUrl: 'app.html'

.

import template from './app.html';

@Component({
  selector: 'app',
  template
})
+1

More articles:


All Articles