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
Related
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'm using Next.js and trying to implement incremental static regeneration. My pages structure is:
pages
- [primary]
- article
- [...slug.js]
and my [...slug.js]
import Head from 'next/head'
export default function Article({ post }) {
if (!post) {
return 'loading'
}
const data = post[0];
return (
<div className="container mx-auto pt-6">
<Head>
<title>{`${data.title.rendered}`}</title
</Head>
<main>
<div>{data.content.rendered}</div>
</main>
</div >
)
}
export async function getStaticPaths() {
return {
paths: [{ params: { primary: '', slug: [] } }],
fallback: true,
};
}
export async function getStaticProps({ params }) {
const slug = params.slug[0];
const res = await fetch(`https://.../?slug=${slug}`)
const post = await res.json()
return {
props: { post },
revalidate: 1,
}
}
This works locally when I pass route like: localhost:3000/dance/article/lots-of-dancers-dance-in-unison, it correctly passes the slug and I can query the CMS no problem. But when I run build I get:
Error: Requested and resolved page mismatch: //article /article at normalizePagePath
This is because the static path you are providing for primary is '' (empty).
For empty string value for primary, the static path becomes //article which resolves to /article. This is what the error says.
Though this works in development, it will give the said error in Prod build.
Add a value to the path and it should work!
paths: [{ params: { primary: 'abc', slug: [] } }],
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])
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 have just upgraded from router-deprecated to "#angular/router": "3.0.0-alpha.8". I have everything working inside the application but it's not working when I navigate to a URL.
For example, I use this routerLink:
<a [routerLink]="['/app/dashboard']">DashBoard</a>
which produces this URL:
http://localhost:54675/app/dashboard
And that view loads with no problem.
However, if I just enter that URL in the browser and press return I get a blank white page. Nothing in the console and the source is empty.
I am using the default HTML5 locationStrategy - not the hash (#).
This worked with router-deprecated.
I can't figure out what I could be doing wrong since everything else is working.
When I navigate to a fill URL I notice that I get a 404 error in the console. That's because nothing on the server matches this URL, but it needs to load the app then route to that URL.
Here are my route files:
app.routes.ts:
export const routes: RouterConfig = ([
{ path: '', component: SplashComponent },
{ path: 'login', component: SplashComponent },
...MainRoutes
]);
export const APP_ROUTER_PROVIDERS = [
provideRouter(routes)
];
main.routes.ts
export const MainRoutes: RouterConfig = [
{
path: 'app',
component: MainLayoutComponent,
children: [
{ path: 'dashboard', component: DashboardComponent},
{ path: '', component: DashboardComponent },
{ path: 'user', component: AccountEditComponent },
{ path: 'admin', component: ManageComponent }
]
}
];
My Angular2 app was hosted in an DotNet Core application. I had to configure it to redirect to index.html on URLs that returned 404s. I followed this article:
http://asp.net-hacker.rocks/2016/04/04/aspnetcore-and-angular2-part1.html