FEHLER: Keine übereinstimmung keine Routen, die URL-Segment-Winkel-2

Ich bin ein relativ neuer Entwickler und ich habe einige Schwierigkeiten mit einer route, die ich erstellt habe in meiner MEAN-stack-Anwendung. Jede Hilfe würde geschätzt werden. Ich bin immer noch lernen, nicht so 100% sicher, ob das der entsprechende code, aber lassen Sie mich wissen, wenn ich etwas verpasst, dass wird hilfreich sein, um herauszufinden dieses heraus. Danke!

Console Fehler beim navigieren zu /createplan

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'createplan'
Error: Cannot match any routes. URL Segment: 'createplan'
    at ApplyRedirects.push../node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError (router.js:1382)
    at CatchSubscriber.selector (router.js:1363)
    at CatchSubscriber.push../node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchSubscriber.error (catchError.js:33)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
    at TapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/tap.js.TapSubscriber._error (tap.js:61)
    at ApplyRedirects.push../node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError (router.js:1382)
    at CatchSubscriber.selector (router.js:1363)
    at CatchSubscriber.push../node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchSubscriber.error (catchError.js:33)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
    at TapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/tap.js.TapSubscriber._error (tap.js:61)
    at resolvePromise (zone.js:814)
    at resolvePromise (zone.js:771)
    at zone.js:873
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:3816)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:595)

Routen: users.js

const express = require('express');
const router = express.Router();
const passport = require('passport');
const jwt = require('jsonwebtoken');
const config = require('../config/database');
const User = require('../models/user');
const Plan = require('../models/plan');
const mongoose = require('mongoose');

//Register
router.post('/register', (req, res, next) => {
    let newUser = new User({
        name: req.body.name,
        email: req.body.email,
        username: req.body.username,
        password: req.body.password
    });

    User.addUser(newUser, (err, user) => {
        if(err){
            res.json({success: false, msg: 'Failed to register user.'});
        } else {
            res.json({success: true, msg: 'User registered.'})
        }
    });
});

//Authenticate
router.post('/authenticate', (req, res, next) => {
    const username = req.body.username;
    const password = req.body.password;

    User.getUserByUsername(username, (err, user) => {
        if(err) throw err;
        if(!user){
            return res.json({success: false, msg: 'User not found.'});
        }

        User.comparePassword(password, user.password, (err, isMatch) => {
            if(err) throw err;
            if(isMatch){
                const token = jwt.sign({data: user}, config.secret, {
                expiresIn: 604800 //1 week
                });

                res.json({
                    success: true,
                    token: token,
                    user: {
                        id: user._id,
                        name: user.name,
                        username: user.username,
                        email: user.email
                    }
                });
            } else {
                return res.json({success: false, msg: 'Wrong password.'});
            }
        });
    });
});

//Profile
router.get('/profile', passport.authenticate('jwt', {session: false}), (req, res, next) => {
    res.json({user: req.user});
});

//Create Plan
router.post('/createplan', (req, res, next) => {
    let planMembers = req.body.members.split(",").map(item => item.trim());
    let newPlan = new Plan({
        id: mongoose.Types.ObjectId(),
        name: req.body.name,
        description: req.body.description,
        begin_date: req.body.begin_date,
        end_date: req.body.end_date,
        members: planMembers
    });

    User.addPlan(newPlan, (err, plan) => {
        if(err){
            res.json({success: false, msg: 'Failed to create plan.'});
        } else {
            res.json({success: true, msg: 'Plan created.'})
        }
    });
});

module.exports = router;

app.- Modul.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule, Routes } from '@angular/router'; 
import { JwtModule } from '@auth0/angular-jwt';

import { AppComponent } from './app.component';
import { NavbarComponent } from './components/navbar/navbar.component';
import { LoginComponent } from './components/login/login.component';
import { RegisterComponent } from './components/register/register.component';
import { HomeComponent } from './components/home/home.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import { ProfileComponent } from './components/profile/profile.component';

import { ValidateService } from './services/validate.service';
import { AuthService } from './services/auth.service';
import { FlashMessagesModule, FlashMessagesService } from 'angular2-flash-messages';
import { AuthGuard } from './guards/auth.guard';
import { CreateplanComponent } from './components/createplan/createplan.component';

const appRoutes: Routes = [
  {path: '', component: HomeComponent},
  {path: 'register', component: RegisterComponent},
  {path: 'login', component: LoginComponent},
  {path: 'dashboard', component: DashboardComponent, canActivate:[AuthGuard]},
  {path: 'profile', component: ProfileComponent, canActivate:[AuthGuard]},
  {path: 'createplan', component: CreateplanComponent, canActivate:[AuthGuard]}
]

export function tokenGetter() {
  return localStorage.getItem('id_token');
}


@NgModule({
  declarations: [
    AppComponent,
    NavbarComponent,
    LoginComponent,
    RegisterComponent,
    HomeComponent,
    DashboardComponent,
    ProfileComponent,
    CreateplanComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    RouterModule.forRoot(appRoutes),
    FlashMessagesModule,
    JwtModule.forRoot({
      config: {
        tokenGetter: tokenGetter
      }
    })
  ],
  providers: [ValidateService, FlashMessagesService, AuthService, AuthGuard],
  bootstrap: [AppComponent]
})
export class AppModule { }
  • hinzufügen pathMatch: ‚full‘ her die erste: {path: „, Komponente: HomeComponent, pathMatch: „voll“},



One Reply
  1. 0

    Ihre erste '' route wird passend für alle Routen, die derzeit.

    Versuchen:
    {path: '', pathMatch: 'full', component: HomeComponent},

    Ich bin überrascht, die Sie immer, dass Fehler obwohl. Ich würde erwarten, dass dies nur für die Weiterleitung aller Pfade zu Ihren HomeComponent.

    • Das behoben, aber ich habe immer noch den gleichen Fehler. :/ Alle meine Routen arbeiten mit diesem feinen Ausnahme.
    • Ich habe gerade bemerkt, dass es sieht aus wie Sie eine route /createplan in Ihrem Winkel und Routen auf (was ich vermute ist) API für diese app. Ist dieser Fehler beim navigieren durch das Winkel-client-Anwendung machen oder ein server POST Anfrage?
    • Nur wenn in der app navigieren der route. Habe nicht versucht, eine POST Antrag noch nicht, da dies hielt mich in meine tracks ein bisschen, aber ich werde Postbote, um zu versuchen, dass als gut.
    • Ausprobiert das senden einer POST Anfrage an die Strecke und ich bekam eine 404 nicht gefunden Fehler. Hmm. Bin ich irgendwo anders, wo eine route erstellt werden muss innerhalb einer MEAN-stack-Anwendung?
    • Ihr backend sollte nicht beeinflussen, wie eckig die erste route (würde ich persönlich empfehlen, Sie hosten Ihre client und API-auf unterschiedliche Basis-Routen halten Sie Ihr Leben einfach!) – Ich habe eine vereinfachte version des Angular-app auf stackblitz -, welche gut funktioniert, versuchen Sie, Ihre Logik Stück für Stück, bis es bricht stackblitz.com/edit/angular-jm3hv8
    • Was bedeutet der code für das template und die Komponente, die Sie navigieren vom Aussehen? Sie erwähnen, dass dies nur Auftritt, wenn Sie navigieren.
    • Ich im Grunde nur lief durch eine MEAN-stack-tutorial zu erstellen, die die Grundlage für diese app und habe schon länger meinen eigenen code auf der Oberseite der, dass das erstellen einer demo von einem persönlichen app-Projekt. Nicht ganz sicher, wie man über das hosting der backend-und frontend getrennt, wie die. Das beiseite, vielen Dank dafür, ich werde versuchen, die Integration einiger, dass code und Bericht zurück!
    • Ich sagte navigieren, aber ich meinte, dass ich nur mit der Adresse, die bar zu gehen, um die Strecke zu testen.
    • Eckige version 2. Können Sie aktualisieren, was Sie derzeit für Ihre Routen und screenshot der browser? Auch, gibt es einen Grund Sie nicht, indem Sie Ihren API-Ressourcen, wie mit /api?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.