one to many front angular | Angular Community | Page 1

marsh widget Apr 20, 2023, 12:01 PM

#

//app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { CoreModule } from './core/core.module';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
CoreModule,
RouterModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {

}

#

//Voici mon dossier app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { NotFoundComponent } from './core/components/not-found/not-found.component';
import { MenuListComponent } from './menu/pages/menu-list/menu-list.component';

const routes: Routes = [
{ path: '', redirectTo: '/fastfood', pathMatch: 'full' },
{ path: 'fastfood', loadChildren: () => import('./fastfood/fastfood.module').then(m => m.FastfoodModule) },
{ path: 'menu', loadChildren: () => import('./menu/menu.module').then(m => m.MenuModule) },
{ path: '**', component: NotFoundComponent }
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})

export class AppRoutingModule { }

#

//menu.module
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { MenuRoutingModule } from './menu-routing.module';
import { MenuComponent } from './menu.component';
import { MenuListComponent } from './pages/menu-list/menu-list.component';
import { MenuService } from './services/menu.service';

@NgModule({
declarations: [
MenuComponent,
MenuListComponent
],
imports: [
CommonModule,
MenuRoutingModule
],
providers: [MenuService],
})
export class MenuModule { }

#

// Mon menu-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MenuListComponent } from './pages/menu-list/menu-list.component';
import { NotFoundComponent } from '../core/components/not-found/not-found.component';

const routes: Routes = [
{ path: ':fastfoodid', component: MenuListComponent },
{ path: '**', component: NotFoundComponent }
];

@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class MenuRoutingModule { }

#

// Mon menu-list.component.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Menu } from '../../models/menu';
import { MenuService } from '../../services/menu.service';
import { FastfoodService } from '../../../fastfood/services/fastfood.service';

@Component({
selector: 'app-menu-list',
templateUrl: './menu-list.component.html',
styleUrls: ['./menu-list.component.scss']
})
export class MenuListComponent implements OnInit {

menus: Menu[];
fastfoodId: number;

constructor(
private menuService: MenuService,
private route: ActivatedRoute,
private fastfoodService: FastfoodService
) { }

ngOnInit(): void {
const fastfoodId = this.route.snapshot.paramMap.get('fastfoodid');
console.log('fastfoodId:', fastfoodId);
this.fastfoodService.getFastfoodById(Number(fastfoodId)).subscribe(fastfood => {
this.fastfoodId = fastfood.id;
this.menuService.getMenusByFastFood(this.fastfoodId).subscribe(
menus => {
console.log('menus:', menus);
this.menus = menus;
},
error => {
console.error('Error fetching menus:', error);
}
);
});
}
}

#

gleaming light Apr 20, 2023, 12:13 PM

#

The url is menu/fastfood/1

#

but u dont have such a route configured

marsh widget Apr 20, 2023, 12:19 PM

#

gleaming light but u dont have such a route configured

or informed her?

gleaming light Apr 20, 2023, 12:20 PM

#

marsh widget or informed her?

Excuses me ?

marsh widget Apr 20, 2023, 12:20 PM

#

gleaming light Excuses me ?

Or I have to put the url for it to work, I’ll put it on git if you want to see my files

untold gazelle Apr 20, 2023, 12:22 PM

#

marsh widget Or I have to put the url for it to work, I’ll put it on git if you want to see m...

You have a /fastfood url, a /menu/:fastfoodid url but no /menu/fastfood/:fadtfoodid url defined

#

That's why you end up on your not found url

marsh widget Apr 20, 2023, 12:24 PM

#

untold gazelle You have a /fastfood url, a /menu/:fastfoodid url but no /menu/fastfood/:fadtfoo...

Which file should I add my url to?

untold gazelle Apr 20, 2023, 12:26 PM

#

marsh widget Which file should I add my url to?

You need to define the expectation first: the url used in the browser differs from the routes defined but we don't know which one is right for you

marsh widget Apr 20, 2023, 12:31 PM

#

untold gazelle You need to define the expectation first: the url used in the browser differs fr...

Basically I have a list of fastfood, when I click on a it sends me on the menu list that the fastfood to nottament with the url: /menu/fastfood/1 for example for mcdo for now I test everything locally

untold gazelle Apr 20, 2023, 12:34 PM

#

marsh widget Basically I have a list of fastfood, when I click on a it sends me on the menu l...

You defined 2 different urls: 1 for the link, 1 for the route. If you want help, you need to explain which one is the expected one /menu/fastfoodid/:fastfoodid or /menu/:fastfoodid

marsh widget Apr 20, 2023, 12:34 PM

#

https://github.com/HoverFo/projet-app-fastfood/tree/master/src/app

GitHub

projet-app-fastfood/src/app at master · HoverFo/projet-app-fastfood

Contribute to HoverFo/projet-app-fastfood development by creating an account on GitHub.

#

Oh i use /menu/fastfoodid/:fastfoodid don't use /menu/:fastfoodid

untold gazelle Apr 20, 2023, 12:35 PM

#

Then /fastfood is missing in your route definition.

#

Update the :fastfoodid route to include it

marsh widget Apr 20, 2023, 12:38 PM

#

// menu-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MenuListComponent } from './pages/menu-list/menu-list.component';
import { NotFoundComponent } from '../core/components/not-found/not-found.component';

const routes: Routes = [
{ path: '/fastfood/:fastfoodid', component: MenuListComponent },
];

@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class MenuRoutingModule {}
like this?

untold gazelle Apr 20, 2023, 12:39 PM

#

Without the leading /, as for your other routes

marsh widget Apr 20, 2023, 12:52 PM

#

untold gazelle Without the leading `/`, as for your other routes

It redirects me directly to fastfood/

untold gazelle Apr 20, 2023, 1:03 PM

#

please update your code on github based on those changes

marsh widget Apr 20, 2023, 1:14 PM

#

untold gazelle please update your code on github based on those changes

Its good , refresh this

untold gazelle Apr 20, 2023, 1:19 PM

#

given this.router.navigate(['/menu/fastfood', fastfood.id]);, it can't redirect you to /fastfood

marsh widget Apr 20, 2023, 1:22 PM

#

marsh widget Apr 20, 2023, 1:22 PM

#

untold gazelle given `this.router.navigate(['/menu/fastfood', fastfood.id]);`, it can't redirec...

look this

untold gazelle Apr 20, 2023, 1:23 PM

#

what about the devtools? any error in the console?

marsh widget Apr 20, 2023, 1:24 PM

#

ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(MenuModule)[FastfoodService -> FastfoodService -> FastfoodService -> FastfoodService]:
NullInjectorError: No provider for FastfoodService!
NullInjectorError: R3InjectorError(MenuModule)[FastfoodService -> FastfoodService -> FastfoodService -> FastfoodService]:
NullInjectorError: No provider for FastfoodService!
at NullInjector.get (core.mjs:7509:27)
at R3Injector.get (core.mjs:7930:33)
at R3Injector.get (core.mjs:7930:33)
at R3Injector.get (core.mjs:7930:33)
at R3Injector.get (core.mjs:7930:33)
at ChainedInjector.get (core.mjs:12100:36)
at lookupTokenUsingModuleInjector (core.mjs:3217:39)
at getOrCreateInjectable (core.mjs:3262:12)
at Module.ɵɵdirectiveInject (core.mjs:10057:12)
at NodeInjectorFactory.MenuListComponent_Factory [as factory] (menu-list.component.ts:12:31)
at resolvePromise (zone.js:1214:31)
at resolvePromise (zone.js:1168:17)
at zone.js:1281:17
at _ZoneDelegate.invokeTask (zone.js:409:31)
at core.mjs:23891:55
at AsyncStackTaggingZoneSpec.onInvokeTask (core.mjs:23891:36)
at _ZoneDelegate.invokeTask (zone.js:408:60)
at Object.onInvokeTask (core.mjs:24192:33)
at _ZoneDelegate.invokeTask (zone.js:408:60)
at Zone.runTask (zone.js:178:47)

untold gazelle Apr 20, 2023, 1:26 PM

#

Except you know better, don't inject Services with providers: [MenuService],

#

Update your services with:

@Injectable({providedIn: 'root'})
export class MenuService {

#

It'll make your services available at your app scope, while currently the error is you are only providing the menuService for your MenuModule but your menu-list-component uses fastfoodService too

marsh widget Apr 20, 2023, 1:28 PM

#

ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(MenuModule)[FastfoodService -> FastfoodService -> FastfoodService -> FastfoodService]:
NullInjectorError: No provider for FastfoodService!
NullInjectorError: R3InjectorError(MenuModule)[FastfoodService -> FastfoodService -> FastfoodService -> FastfoodService]:
NullInjectorError: No provider for FastfoodService!

#

:/

untold gazelle Apr 20, 2023, 1:30 PM

#

just follow above instructions

#

and remove providers: [xxx], from your modules

untold gazelle Apr 20, 2023, 1:32 PM

#

marsh widget ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(MenuModul...

as i said, it's about updating your serviceS, not just the example

marsh widget Apr 20, 2023, 1:32 PM

#

//My menu.service.ts
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { Menu } from '../models/menu';
import { environment } from 'src/environments/environment.development';

@Injectable({providedIn: 'root'})
export class MenuService {

constructor(private http: HttpClient) { }

getMenusByFastFood(fastFoodId: number): Observable<Menu[]> {
const url = ${environment.iutApiBaseUrl}/menu/fastfood/${fastFoodId};
return this.http.get<Menu[]>(url);
}

}

marsh widget Apr 21, 2023, 8:01 AM

#

I have push my files : https://github.com/HoverFo/projet-app-fastfood/tree/master/src/app