Here i'm using Angular2 Lazy Loading parameter based Routing Plase help why im Getting Error: Cannot match any routes: 'EditById/1113'
Here i'm passing this Id from Table Like
<tr *ngFor="let emp of employee">
<td>{{emp.EmpName}}</td>
GetById(e, emp) {
debugger;
this.id = emp.Emp_Id;
this._router.navigate(['/EditById/' + this.id])
}
This is My MainRoute.ts
export const ApplicationRoutes:Routes= [
{ path: 'EditById/:id', loadChildren: '../modules/employee/editemployeebyidmdule#EitEmployeeModule' },
EmployeeRoute.ts
import { Routes } from "#angular/router"
import { EditEmployeeByIdComponent } from "../components/employeecomponent/editemployeebyidcomponent"
export const EmployeeRoute=[
{ path: 'id', component: EditEmployeeByIdComponent}
]
It should be,
this._router.navigate(['EditById', this.id])
Related
I created dynamic routes and locally it works perfectly, but when I publish the application it is returning
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
index-d9e4afe8.js:9 TypeError: Failed to fetch dynamically imported module: http://host/sistem/views/reports/reportSales.vue
/sistem/home:1 Uncaught (in promise) TypeError: Failed to fetch dynamically imported module: http://host/sistem/views/reports/reportSales.vue
this is my routes index.js structure
import { createRouter, createWebHistory } from "vue-router";
import TopMenu from "../layouts/top-menu/Main.vue";
import Login from "../views/admin/login/Main.vue";
import Home from "../views/admin/home/Main.vue";
import Exit from "../views/admin/exit/Main.vue";
import hosts from "#/utils/hosts";
async function createRouterInstance() {
var data = await searchRoutes();
let lstRoutes = [
{
path: `${hosts.app}` + "/home",
name: "Home",
component: Home,
},
{
path: `${hosts.app}` + "/exit",
name: "Exit",
component: Exit,
},
];
for (var i = 0; i < data.length; i++) {
let dsPath = `${hosts.app}/${data[i].pagename}`;
let pathComponent =
"../views/" + data[i].path + "/" + data[i].pagename + ".vue";
lstRota.push({
path: dsPath,
name: data[i].pagename,
component: () => import(pathComponent),
});
}
let routes = [
{
path: `${hosts.app}/`,
name: "Login",
component: Login,
},
{
component: TopMenu,
children: lstRota,
},
];
const router = createRouter({
history: createWebHistory(),
routes,
scrollBehavior(to, from, savedPosition) {
return savedPosition || { left: 0, top: 0 };
},
});
return router;
}
export default await createRouterInstance();
previously I had vite 2, but researching the error, I updated to vite 4.0.0-alpha.6 and the same error continued, I also tested changing to createHashWebHistory in my route, but the same error also occurs and why I also tried importing without the .vue extension, but it still persists
I've got Vue app with this router file in it:
const routes = [
{
path: '/',
component: () => import('layouts/MainLayout.vue'),
children: [
{ path: '', component: () => import('pages/IndexPage.vue') },
{ path: '/contacts', component: () => import('pages/ContactsPage.vue') },
{ path: '/settings', component: () => import('pages/GeneralSettings.vue') },
]
},
{
path: '/:catchAll(.*)*',
component: () => import('pages/ErrorNotFound.vue')
}
]
export default routes
Inside the IndexPage I've created this method to show the id in the URL , so I can use it later:
const setURL = (item: Store) => {
const searchURL = new URL(window.location.toString());
searchURL.searchParams.set('itemid', item.id);
window.history.pushState({}, '', searchURL);
}
This method works just fine, but when I try to open eg.: the Contact page the URL looks like this:
http://localhost:8080/?itemid=1#/contacts
This is not working, because the URL should be the following:
http://localhost:8080/#/contacts
Is there any way to remove the itemid when clicking a link?
I'm using Quasar and composition api.
I think the main problem is in the setUrl function.
When using vue-router, I suggest you try not to interfere with the url manually as much as possible.
If you want to add a query to the url without refreshing the page, you can use the router.replace() method.
import { useRouter } from "vue-router"
const router = useRouter()
const setURL = (item: Store) => {
router.replace({ query: { itemId: item.id } })
}
Your routes should work fine when you edit them this way.
i want to use another layout just for the admin
{
path: '/admin',
name: 'admin',
meta: { layout: 'LayoutAdmin' },
component: Admin,
},
in my component Admin i got this
import { useRoute } from 'vue-router'
const route = useRoute()
console.log('router', route.meta) // i got { layout: 'LayoutAdmin' }
how can i use the layoutAdmin? only for this page?
Child Module
const routes: Routes = [
{ path: '', component: ProcComponent,
children:[{
path: '/LoadProcResultsdata/:procResults', component: ProcResultsComponent,
}]
}
];
App.Module.ts
const routes: Routes = [
{ path: 'app', component: AppComponent },
{ path: 'home', component: HomeComponent },
{ path: 'treeview', component: TreeViewComponent },
{path:'Proc', loadChildren:'app/proc/Proc.Module#ProcModule'}
];
My code
this.router.navigate(['/LoadProcResultsdata/'],{ queryParams: { procResults:this.results } });
But I am getting following error.
core.umd.js:3064 EXCEPTION: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'LoadProcResultsdata'
Error: Cannot match any routes. URL Segment: 'LoadProcResultsdata'
There are couple of issues,
remove front / from the path,
children:[{
path: '/LoadProcResultsdata/:procResults', component: ProcResultsComponent,
}]
Also you need to use route params rather query params, so you can use below,
this.router.navigate(['/LoadProcResultsdata', this.results]);
I am assuming this.results is some ID, so the resulting url becomes
/LoadProcResultsdata/<id>
Read more abour route parmeters here.
Update:
you can do that but not with route params, just with queryParams, remove :procResults, and use similar code like below,
let extra: any = ['abc','xyz'];
let navigationExtras: NavigationExtras = {
queryParams:extra
};
this.router.navigate(['/LoadProcResultsdata'],navigationExtras);
and in the navigted component subscribe to ActivatedRoute queryParams,
constructor( private route: ActivatedRoute) {
route.queryParams.subscribe(params => {
console.log(params);
})
}
Check this Plunker!!
another Plunker with Lazy loaded module.
I am new to Angular2 Native script Programming... i need to navigate one page to another. i am stuck with the typeError:"undefined is not an object (evaluating 'this.router')" plz help me out..
my code is given..
//page1.ts
public constructor(private router: Router) { }
getMyDrawing(args) {
let pad = this.DrawingPad.nativeElement;
let img: Image = this.signImage.nativeElement;
let drawingImage;
pad.getDrawing().then
(
(data) => {
console.log(data);
drawingImage = data;
img.src=data;
this.router.navigate(['page2']);
}
);
}
//routing.ts
import { DrawingPadExample } from "./app.component";
import { Page2Component } from "./app.page2";
export const routes = [
{ path: "drawing-pad-example", component: DrawingPadExample},
{ path: "page2", component: Page2Component }
];
export const navigatableComponents = [
DrawingPadExample,
Page2Component
];
//module.ts
import { NgModule, NO_ERRORS_SCHEMA } from "#angular/core";
import { NativeScriptModule } from "nativescript-
angular/nativescript.module";
import { DrawingPadExample } from "./app.component";
import { routes, navigatableComponents } from "./app.routing";
import { NativeScriptRouterModule } from "nativescript-
angular/router";
#NgModule({
bootstrap: [
DrawingPadExample
],
imports: [
NativeScriptModule,
NativeScriptRouterModule,
NativeScriptRouterModule.forRoot(routes)
],
declarations: [
DrawingPadExample,
...navigatableComponents
],
schemas: [
NO_ERRORS_SCHEMA
]
})
export class AppModule { }
When you say navigation is not working, do you nothing at all happens and no errors are generated?
I would advice you try putting the callback within a zoneCallback.
public constructor(private ngZone: NgZone, private router: Router){
}
public getMyDrawing(args) {
let pad = this.DrawingPad.nativeElement;
let img: Image = this.signImage.nativeElement;
let drawingImage;
pad.getDrawing().then((data) => {
this.ngZone.run(() => {
console.log(data);
drawingImage = data;
img.src=data;
this.router.navigate(['page2']);
});
});
}
Add instance in constructor for router.
constructor(private router : Router){}
because as error stated typeError:"undefined is not an object (evaluating 'this.router')" you are trying to access
this.router which is not initilized yet
#JBR, No, I mean dependency injection using constructor, for example,
constructor(private router: Router) {}
add that line to you page1 component.
Update
replace this
function(data) {
console.log(data);
drawingImage = data;
img.src=data;
this.router.navigate(['page2']);
}
with arrow function
(data) => {
console.log(data);
drawingImage = data;
img.src=data;
this.router.navigate(['page2']);
}
I got this bug when I was passing a function between two components.
In the first component, I imported Router, but in the second I didn't. Make sure that you import all necessary libraries when you are using callback functions.