Application stops loading when routing is added

I'm trying a new Angular-Cli application, and for some reason, when I add the routes, the main page (dashboard) stops loading.

Here's the component I'm adding the route to:

import { Component, OnInit } from '@angular/core';
import { OrganizationService } from './shared/organization.service';
import {Organization} from "./shared/organization";
import { Router, ActivatedRoute } from '@angular/router';

@Component({
selector: 'app-organization',
templateUrl: './organizations.component.html',
styleUrls: ['./organizations.component.scss']
})

export class OrganizationsComponent implements OnInit {
title: string;
organization: Organization = new Organization();
constructor(
private organizationService: OrganizationService,
private router: Router,
private route: ActivatedRoute
) { }
ngOnInit() {
var id = this.route.params.subscribe(params => {
var id = params['id'];
this.title = id ? 'Edit Faq Organization' : 'Create Faq Organization';
if (!id)
return;
this.organizationService.getOrganization(id)
.subscribe(
organization => this.organization = organization,
response => {});
});
}
save() {
var result;
if (this.organization.id){
result = this.organizationService.updateOrganization(this.organization);
} else {
result = this.organizationService.addOrganization(this.organization);
}
result.subscribe(data => this.router.navigate(['/']));
}
}


This is the model:

export class Organization {
id: number;
nome: string;
sigla: string;
cnpj: string;
}


And this is my service:

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/catch';
import { Observable } from 'rxjs/Rx';

@Injectable()
export class OrganizationService {
private url: string = "http://localhost:3000/organizations";
constructor(private http: Http) { }
getOrganizations(){
return this.http.get(this.url)
.map(res => res.json());
}
getOrganization(id){
return this.http.get(this.url + '/' + id)
.map(res => res.json());
}
addOrganization(organization){
return this.http.post(this.url, {'organization': organization})
.map(res => res.json());
}

updateOrganization(organization){
return this.http.put(this.url + '/' + organization.id, {'organization': organization})
.map(res => res.json());
}
deleteOrganization(id){
return this.http.delete(this.url + '/' + id)
.map(res => res.json());
}
}


And the route:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { ModuleWithProviders } from '@angular/core';


//Layouts
import { OrganizationsComponent } from './organizations/organizations.component';
import { FullLayoutComponent } from './layouts/full-layout.component';


export const routes: Routes = [
{
path: '',
redirectTo: 'dashboard',
pathMatch: 'full',
},
{
path: '',
component: FullLayoutComponent,
data: {
title: 'Página Inicial'
},
children: [
{
path: 'dashboard',
loadChildren: './dashboard/dashboard.module#DashboardModule'
},
]
},
//THIS IS THE PART THAT MAKES THE PAGE NOT LOAD
{ path: 'organizations/new', component: OrganizationsComponent},
{ path: 'organizations/:id', component: OrganizationsComponent},
{ path: 'organizations/:id/edit', component: OrganizationsComponent},
];


export const routing: ModuleWithProviders = RouterModule.forRoot(routes);
@NgModule({
imports: [ RouterModule.forRoot(routes) ],
exports: [ RouterModule ]
})
export class AppRoutingModule {}


My app.module:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LocationStrategy, HashLocationStrategy } from '@angular/common';

import { AppComponent } from './app.component';
import { BsDropdownModule } from 'ng2-bootstrap/dropdown';
import { TabsModule } from 'ng2-bootstrap/tabs';
import { NAV_DROPDOWN_DIRECTIVES } from './shared/nav-dropdown.directive';

import { SIDEBAR_TOGGLE_DIRECTIVES } from './shared/sidebar.directive';
import { AsideToggleDirective } from './shared/aside.directive';
import { BreadcrumbsComponent } from './shared/breadcrumb.component';

// Routing Module
import { AppRoutingModule } from './app.routing';

//Layouts
import { FullLayoutComponent } from './layouts/full-layout.component';
import { OrganizationsComponent } from './organizations/organizations.component';
import { OrganizationService } from './organizations/shared/organization.service';

@NgModule({
imports: [
BrowserModule,
AppRoutingModule,
BsDropdownModule.forRoot(),
TabsModule.forRoot(),
],
declarations: [
AppComponent,
FullLayoutComponent,
NAV_DROPDOWN_DIRECTIVES,
BreadcrumbsComponent,
SIDEBAR_TOGGLE_DIRECTIVES,
AsideToggleDirective,
// OrganizationsComponent
],
providers: [OrganizationService,
{
provide: LocationStrategy,
useClass: HashLocationStrategy
}],
bootstrap: [ AppComponent ]
})
export class AppModule { }


// Dependências do Angular 2
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

// Adicionamos o arquivo routing
import { routing } from './app.routing';

Continue reading...