jeudi 27 septembre 2018

Uncaught Error: Uncaught (in promise): Error: Cannot match any routes

First, sorry for my bad english :)

I started the code for just 6 month on React and now on Angular.

I'm going to build a SPA with Angular 6 in front and NodeJS in back. It's not already done, but I want to check and to start the unit test. It's the first time i'm doing this. (I'm just begin with Angular 1 month ago).

I'haven't code the tests yet, but juste configure them (imports the module, the providers, the reactformModule, browserAnimationModule, ngFormModule, etc...) Everything is ok and all the tests are ok except juste one. In dev mode (with npm start), my SPA is working without any probleme and without any warning in my brower's console

BUT, when I'm doing ng test, I have one probleme :

"[object ErrorEvent] thrown"

When I open the console, I have this error message :

"zone.js:813 Uncaught Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'admin'"

You can see my console here !

I've already loooked for any solution on the web, but either it doesn't work, either I don't understant how I have to code the tests about the routing of my project.

Here my code :

package.json

    {
  "name": "front",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config proxyconfig.json",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.1.7",
    "@angular/cdk": "^6.4.7",
    "@angular/common": "^6.1.0",
    "@angular/compiler": "^6.1.0",
    "@angular/core": "^6.1.0",
    "@angular/forms": "^6.1.0",
    "@angular/http": "^6.1.0",
    "@angular/material": "^6.4.7",
    "@angular/platform-browser": "^6.1.0",
    "@angular/platform-browser-dynamic": "^6.1.0",
    "@angular/router": "^6.1.0",
    "@ng-bootstrap/ng-bootstrap": "^3.0.0",
    "bootstrap": "^4.1.3",
    "core-js": "^2.5.4",
    "font-awesome": "^4.7.0",
    "rxjs": "^6.0.0",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.7.0",
    "@angular/cli": "~6.1.1",
    "@angular/compiler-cli": "^6.1.0",
    "@angular/language-service": "^6.1.0",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1",
    "typescript": "~2.7.2"
  }
}

My app.module.ts

   import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { MatDialogModule, MatSnackBarModule, MatProgressBarModule } from '@angular/material';
import {MatCardModule} from '@angular/material';
import {NgbModule, NgbProgressbarModule} from '@ng-bootstrap/ng-bootstrap';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
import { MatIconModule, MatButtonModule, MatFormFieldModule, MatInputModule, MatRippleModule,  MatFormFieldControl } from '@angular/material';




import { AppComponent } from './app.component';
import { NavbarComponent } from './navbar/navbar.component';
import { BestiaireComponent } from './api/bestiaire/bestiaire.component';
import { VegetalComponent } from './api/vegetal/vegetal.component';
import { DecoComponent } from './api/deco/deco.component';
import { FicheBestiaireComponent } from './fiche-bestiaire/fiche-bestiaire.component';
import { formAdminComponent } from './admin/form-admin/formAdmin.component';
import { PageAdminComponent } from './admin/page-admin/page-admin.component';
import { FormBestiaireComponent } from './admin/form-bestiaire/form-bestiaire.component';
import { ColumnArtisanatComponent } from './home/column-artisanat/column-artisanat.component';
import { MenuComponent } from './home/menu/menu.component';
import { CarouselComponent } from './home/carousel/carousel.component';
import { CardMurielComponent } from './home/card-muriel/card-muriel.component';
import { FormContactComponent } from './home/form-contact/form-contact.component';
import { ModalFicheComponent } from './fiche-bestiaire/modal-fiche/modal-fiche.component';
import { ModalVegetalComponent } from './modal-vegetal/modal-vegetal.component';
import { FormVegetalComponent } from './admin/form-vegetal/form-vegetal.component';
import { NewUserComponent } from './admin/new-user/new-user.component';
import { ForgotPasswordComponent } from './admin/forgot-password/forgot-password.component';
import { UpdatePasswordComponent } from './admin/update-password/update-password.component';
import { FooterComponent } from './footer/footer.component';
import { SearchBarComponent } from './search-bar/search-bar.component';
import { ResultSearchComponent } from './result-search/result-search.component';
import { NavbarMobileComponent } from './navbar-mobile/navbar-mobile.component';




const appRoutes : Routes = [ 
  {path : 'bestiaire', component : BestiaireComponent}, 
  {path : 'bestiaire/:id', component : FicheBestiaireComponent},
  {path : 'vegetal', component : VegetalComponent},
  {path : 'deco', component : DecoComponent},
  {path : 'auth', component : formAdminComponent},
  {path : 'admin', component : PageAdminComponent },
  {path : 'admin/newuser', component : NewUserComponent},
  {path : 'auth/forgotPassword', component : ForgotPasswordComponent},
  {path : 'auth/:token/updatePassword', component : UpdatePasswordComponent},
  {path : 'search', component : ResultSearchComponent}, 
  {path : '', redirectTo:'/', pathMatch:'full'}, 
  {path : '**', redirectTo:'/'}


]

@NgModule({
  declarations: [
    AppComponent,
    NavbarComponent,
    BestiaireComponent,
    VegetalComponent,
    DecoComponent,
    FicheBestiaireComponent,
    formAdminComponent,
    PageAdminComponent,
    FormBestiaireComponent,
    ColumnArtisanatComponent,
    MenuComponent,
    CarouselComponent,
    CardMurielComponent,
    FormContactComponent,
    ModalFicheComponent,
    ModalVegetalComponent,
    FormVegetalComponent,
    NewUserComponent,
    ForgotPasswordComponent,
    UpdatePasswordComponent,
    FooterComponent,
    SearchBarComponent,
    ResultSearchComponent,
    NavbarMobileComponent,
    ],

  imports: [
  BrowserModule,
  HttpClientModule,
  FormsModule,
  MatDialogModule,
  MatCardModule,
  MatButtonModule,
  MatFormFieldModule,
  MatInputModule,
  BrowserAnimationsModule,
  NgbModule,
  ReactiveFormsModule,
  MatIconModule,
  MatSnackBarModule,
  MatProgressBarModule,
  NgbProgressbarModule,
  RouterModule.forRoot(appRoutes)
  ],
  entryComponents:[
    FormBestiaireComponent,
    ModalFicheComponent,
    ModalVegetalComponent,
    FormVegetalComponent,
    SearchBarComponent
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

How I'm suppose to code the tests about the routing in order to dissmiss this error message. I really apreciate if someone could help me in details because, even thanks to the docs on the web, i can't fix it. I don't know where I suppose to look for, which component ? AppModule ? Each component where I use Router (from Angular).

I'v not build my project yet, but I suppose i'll have the same error, so I would like to fix it before building.

Thanks !

hollowspy

Aucun commentaire:

Enregistrer un commentaire