I want to set login component as a startup component in Angular8. I have routing file where routing of all component is placed. But whenever I implemented the below changes It gives an error.
Previous When It was working fine with default component of Dashboard
export const routes: Routes = [
{
path: '',
redirectTo: 'dashboard',
pathMatch: 'full',
}
when I replaced login with dashboard.
export const routes: Routes = [
{
path: '',
redirectTo: 'login',
pathMatch: 'full',
}
It shows below error.
Error: System.TimeoutException: The Angular CLI process did not start listening for requests within the timeout period
Related
There is a project written in vue 3. When you go to the page through the router-link, there are no problems, but if you knock on the route directly through the url line, it gives an error: Not Found (The requested URL was not found on this server.)
Apache/2.4.53
import {createRouter, createWebHistory} from 'vue-router'
import Main from '../views/Main'
import Users from '../views/Users'
const routes = [
{
path: '/',
name: 'home',
component: Main
},
{
path: '/users',
name: 'users',
component: Users
},
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
That sounds like your web server isn't configured to serve the index.html of you Vue app also on errors like 404. You should set it up via ErrorDocument or FallbackResource.
I am using the #nuxtjs/router module for defining custom routes. Here is my router.js file
import Vue from 'vue'
import Router from 'vue-router'
import News from '~/pages/News'
import Login from '~/pages/auth/Login'
import Signup from '~/pages/auth/Signup'
import Account from '~/pages/Account'
Vue.use(Router)
export function createRouter() {
return new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'Index',
component: News,
},
{
path: '/news',
name: 'News',
component: News,
},
{
path: '/news/:tag',
name: 'TaggedNews',
component: News,
},
{
path: '/news/:id([a-f0-9]{32})/:title',
name: 'NewsItem',
component: News,
},
{
path: '/news/:tag/:id([a-f0-9]{32})/:title',
name: 'TaggedNewsItem',
component: News,
},
{
path: '/login',
component: Login,
},
{
path: '/signup',
component: Signup,
},
{
path: '/account',
component: Account,
},
],
})
}
I want to open the /login route as a modal on Desktop but page on mobile. How do I go about it?
Short answer would be you can't, as for using a modal you need to tell the app what "actual route" you are on - imagine navigating directly to /login on desktop and the issue becomes clear.
My suggestion would be to not add a route for login, but to use a query Param for whether or not the Login modal should be displayed:
query Param would be handled by a LoginModal component on the app root
closing/opening would both trigger and be managed by changes to the query parameter
On mobile, the modal can be styled as a full screen block.
My Vue project works correctly when I build it using dev. However, once I run npm run build and move the files in dist to my webserver, Vue Router doesn't seem to work anymore.
I've tried removing history mode, but this didn't work.
Vue Router
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import axios from 'axios'
Vue.use(Router)
const router = new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/donate',
name: 'donate',
component: () => import('./views/Donate.vue')
},
{
path: '/guildselector',
name: 'guildselector',
meta: {
requiresAuth: true
},
component: () => import('./views/Guildselector.vue')
},
{
path: '/guild/:id',
name: 'guild',
meta: {
requiresAuth: true,
requiresAdmin: true
},
component: () => import('./views/Guildpanel.vue')
}
]
})
export default router
MyWebsite.com/guildselector should show the Guildselector component for example, however I get a
Not Found The requested URL /guildselector was not found on this server.
Only the donate page and landing page work.
This is a very common problem; please read HTML5 History Mode in detail about how to configure your web server to host the files correctly.
Here comes a problem, though: Since our app is a single page client side app, without a proper server configuration, the users will get a 404 error if they access http://oursite.com/user/id directly in their browser.
Simple solution is just comment this line:
mode: 'history',
I have a one page app in vueJS:
let router = new VueRouter({
routes: [
{ path: '/', component: Dis13HomeComponent },
{ path: '**', component: Dis13HomeComponent }
]
});
In main component in mounted() im getting the url param like this:
this.$route.query.token;
But if I open http://www.myapp.com/app.html?token=s56ds6d5d56f6ef6e it does not read the token parameter, becouse vue is adding #/ to the end of url so it looks like http://www.myapp.com/app.html?token=s56ds6d5d56f6ef6e#/
If I open this format of url: http://www.myapp.com/app.html#/?token=s56ds6d5d56f6ef6e then it works, but this path is forbidden on server.
How could I read the token parameter?
Make your router to work with history mode and you will not have the '#' anymore.
const router = new VueRouter({
mode: 'history', // <------------- HERE
routes: [
{ path: '/', component: Dis13HomeComponent },
{ path: '**', component: Dis13HomeComponent }
]
});
i'm trying to use VueRouter 2.2.1 in my Laravel application and for some reason my URL's (although working) show the # symbol in a weird way
http://myapp.dev/admin#/
Instead of
http://myapp.dev/admin/#/
As i would normally expect...
This is my VueRouter configuration
const Router = new VueRouter({
routes: [
{
path: '/',
component: App,
children: [
{
path: 'dashboard',
name: 'dashboard',
component: Dashboard
}
]
}
]
});
And on the PHP side of things i'm just defining a catch all route for the /admin section of the Application
// Catch-all Route, sends GET requests to VueRouter //
Route::get('{all?}', function() {
return view('index');
})->where(['all' => '(.*)'])->name('catchall');
Like this, is there anything i'm doing wrong? It is working but it just kinda bugs me that the # just floats there.
You have to enable history mode, as stated here, I dont see that in your vue-router config.
const Router = new VueRouter({
mode: 'history',
routes: [
{
path: '/',
component: App,
children: [
{
path: 'dashboard',
name: 'dashboard',
component: Dashboard
}
]
}
]
});
You have to do it on server side, just redirect the route to one ended with '/'
As in laravel:
Route::get('{all?}', function() {
return view('index');
})->where(['all' => '^/admin\/$'])->name('catchall');
now just visit /admin/#/