CODEWITHSUNDEEP
javascriptangular
user2085143
user2085143

Reputation: 4232

App only breaks when certain page set as default in Angular 2 (Chrome Only)

Edit: This is actually only occurring in Google Chrome.

I have my routes set up like so

@RouteConfig([
  {path:'/login',           name: 'Login',       component: LoginComponent},
  {path:'/products',        name: 'Products',    component: ProductComponent,useAsDefault:true},
  {path:'/register',        name: 'Register',    component: RegisterComponent},
  {path:'/checkout',        name: 'Checkout',    component: CheckoutComponent},
  {path:'/movie/:id',       name: 'View',        component: ViewmovieComponent},
  {path:'/profile/',        name: 'Profile',     component: ProfileComponent}
])

When setting /products as my default page, the entire app seems to fail silently. However, if I set another page as the home page it works perfectly (including the products page)

I am not seeing any error messages in the console so unsure as to how I can debug the problem. My product component looks like this 

import {Component} from 'angular2/core';
import {ProductService} from './product.service';
import {OnInit} from 'angular2/core';
import {ROUTER_DIRECTIVES} from 'angular2/router';

@Component({
  selector    : 'product',
  templateUrl : './templates/product.tpl.html',
  directives: [ROUTER_DIRECTIVES] 
})

export class ProductComponent implements OnInit {

  public products: Product[];
  constructor(private _productService: ProductService){
    console.log('fired');
  }

  //////////

  letsGo() {
    $('html,body').animate({
      scrollTop: $('.movies').offset().top - 45
    });
  }

  getProducts(){
    this._productService.getProducts()
      .subscribe(
        data => this.products = data.message,
        error => console.log(error);
      );
  }

  ngOnInit():any{
    this.getProducts();
  }


}

Any advice would be great.

Upvotes: 0

Views: 39

Answers (2)

Steven Luke
Steven Luke

Reputation: 521

I have seen errors when initializing injected instances get eaten: never get reported. My guess is there is some problem with your ProductService. I would look into it, either putting console.log() statements to see where it gets to or by surrounding the body of each function (including the constructor and any code executed from the constructor) in try { ... } catch(e) { console.error(e); }.

Upvotes: 0

moessi774
moessi774

Reputation: 1099

Have you tried to redirect from / to your product component instead of setting a route default? Maybe that works.

Ex:

@RouteConfig([
{path:'', redirectTo: '/products', pathMatch: 'full'},
{path:'/login',           name: 'Login',       component: LoginComponent},
{path:'/products',        name: 'Products',    component: ProductComponent},
{path:'/register',        name: 'Register',    component: RegisterComponent},
{path:'/checkout',        name: 'Checkout',    component: CheckoutComponent},
{path:'/movie/:id',       name: 'View',        component: ViewmovieComponent},
{path:'/profile/',        name: 'Profile',     component: ProfileComponent}

])

Upvotes: 2

Related Questions