We Keep Coding

Routes from frontend shown as insecure in https website

I created a webpage using vue.js and on backend node.js.
When I access the main page ( https://example.test ) I got secure info on my browser, but once I go to other links ( https://example.test/dashboard ) I got an insecure connection.
"devServer": {
allowedHosts: ['example.test'],
host: "0.0.0.0",
port: 443,
server : {
type: "https",
options: {
key: fs.readFileSync('/usr/app/key.pem'),
cert: fs.readFileSync('/usr/app/cert.pem')
}},
hot: true
}
Is there any configuration that I'm missing in vue.config.js or I'm missing something in router/index.js?
Vue.use(VueRouter)
const routes = [
{
path: "/sign-in",
name: "signIn",
component: SignIn,
meta: {
requiresNotAuth: true
}
},
{
path: "/dashboard",
name: "dashboard",
component: Dashboard,
meta: {
requiresAuth: true
}
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
UPDATE
security in https://example.test:
Security in https://example.test/dashboard:

Vue Router production issues

I have a project on Vue.js, and there is some issue with production mode and vue router. On development version I have no issues, but if I compile it and run on production mode, and go to some link - it show me 404 error code
Here is my route js file:
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '*',
name: 'Agents',
component: Agents
},
{
path: '/agents',
name: 'Agents',
component: Agents
},
{
path: '/compare-agents',
name: 'Compare',
component: Compare
},
{
path: '/input',
name: 'InputFields',
component: InputFields
},
{
path: '/check-pay',
name: 'CheckPay',
component: CheckPay
},
{
path: '/success',
name: 'Success',
component: Success
},
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
For example, I wanna go to Agents page, by link like http::/localhost:8080/agents and it's works (dev verison), but if I compile, it's getting 404 error
Website is localted in core directory.
I can visit homepage, use nginx server, and here it's conf file:
worker_processes 4;
events { worker_connections 1024; }
http {
server {
listen 80;
root /usr/share/nginx/html;
index index.html
include /etc/nginx/mime.types;
location / {
try_files $uri $uri/ /index.html;
}
}
}

Angular : Lazy load multiple Modules with the same route

I have an app where i want to lazy load two modules in the same moment with the same route path.
My routing module would look like this :
{
path: 'mypath',
loadChildren: () => HomeModule,
canLoad: [HomeGuard]
},
{
path: 'mypath',
loadChildren: () => AdvisorModule,
canLoad: [AdvisorGuard]
},
but this lead to load only the first one
i cant' find anyway to do it like this for example :
{
path: 'mypath',
loadChildren: () => HomeModule, advisor module // ??
canLoad: [// ??]
},
I don't want also to import one of them in the other , as like this , only one module would be lazy loaded and the other automatically
How may it do it ??

You could rework things like this:
const routes: Routes = [
{
path: 'mypath/home',
loadChildren: () => HomeModule,
canLoad: [HomeGuard]
},
{
path: 'mypath/advisor',
loadChildren: () => AdvisorModule,
canLoad: [AdvisorGuard]
},
]
In other words move the route path to your module outside to the parent module, in this case I assume those are 'adviser' and 'home'
And then just start in the module routing with a redirect solution and/or a path like so:
Home module routing:
const routes: Routes = [
{
path: '', // <-- in your current solution probably 'home'
component: HomeParentComponent,
children: [
{ path: '', redirectTo: 'childOne', pathMatch: 'full' },
{ path: 'childOne', component: HomeChildComponentOne },
],
},
];
Advisor module routing:
const routes: Routes = [
{
path: '', // <-- in your current solution probably 'advisor'
component: AdvisorParentComponent,
children: [
{ path: '', redirectTo: 'childOne', pathMatch: 'full' },
{ path: 'childOne', component: AdvisorChildComponentOne },
],
},
];
This works nicely, you should be able to navigate to:
'/mypath/home' and end up inside your HomeParentComponent with router outlet of HomeChildComponent one.
'/mypath/advisor' and end up inside your AdvisorParentComponent with router outlet of AdvisorChildComponent one.
In case you don't want a child component inside your router outlet it is even simpler, you can just remove the child routes and redirect.
Note: If this solution doesn't resolve your issue, then please share more details on your module routing so I can get a better picture of your desired route configuration.

You need to re-arrange your routes by one level and you also need to add auxiliary routes for the extra components you want to load.
This works with Angular 9 (probably with 8 too)
{
path: 'home',
component: HostingComponentWithOutlets,
children: [
{
path: 'featureOne',
loadChildren: () => import('xxxxx').then(m => m.FeatureOneModule),
canLoad: [featureOneGuard]
},
{
path: 'featureTwo',
outlet: 'outletAux1',
loadChildren: () => import('yyyyy').then(m => m.FeatureTwoModule),
canLoad: [featureTwoGuard]
},
// you can even load more components to different outlets from the same module
// and update redirectTo and routerLink accordingly
//{
// path: 'featureThree',
// outlet: 'outletAux2',
// loadChildren: () => import('yyyyy').then(m => m.featureTwoModule),
// canLoad: [featureTwoGuard]
//},
{
path: '',
redirectTo:
'/absolute/path/to/home(featureOne/path-to-featureOne-component//outletAux1:featureTwo/path-to-featureTwo-component)',
pathMatch: 'full'
}
]
},
{ path: '', redirectTo: 'home', pathMatch: 'full' }
Hitting the 'home' route will lazy load all required modules.
In your HostingComponentWithOutlets html template where you need to link to 'featureOne':
<a [routerLink]="featureOne/path-to-featureOne-component"
and if you want to go straight to the full route with the auxiliary routes from a template:
<a [routerLink]="['.', { outlets: { 'primary': ['featureOne', 'path-to-featureOne-component'], 'outletAux1': ['featureTwo', 'path-to-featureTwo-component'] } }]"
FeatureOneModule should define 'path-to-featureOne-component' and FeatureTwoModule should define 'path-to-featureTwo-component' in their equivalent route definitions.

Angular auxiliary route with an empty path on child

I'm trying to use the auxiliary route on an empty path. For example:
{
path: 'users',
children: [
{
path: '',
component: UsersComponent,
},
{
path: 'user-details',
outlet: 'list',
component: UserDetailsComponent
},
]
},
And my UsersComponent template:
<router-outlet></router-outlet>
<router-outlet name="list"></router-outlet>
But when I'm trying to navigate to the following URLs:
1. http://localhost:4200/users(list:user-details)
2. http://localhost:4200/(users//list:user-details)
I'm getting this error:
Cannot match any routes. URL Segment: 'users'

You are getting that error because you have no component loading for 'users' which you set as your first route. the 'users' route should be defined in your main routing module like this
{ path: 'users', loadChildren: './users/user.module#UserModule' }
and your current code needs to look like this
const userRoutes: Routes = [
{
path: '', component: UsersComponent, children: [
{
path: 'user-details',
outlet: 'list',
component: UserDetailsComponent
}
]
}
and that will make the firs route 'users'

Vue.js routes serving from subdirectory

I would like to serve my Vue.js app from a subdirectory on a staging server. For example: http://url.com/subdir/app/
Right now if I do this and set up the build config assetsPublicPath to serve from that folder, all the assets are served fine but my app does not get routed correctly. The "home" page gets routed to the 'catch-all', and any further routes simply show the normal white-page 404.
Here is my router:
export default new Router({
mode: 'history',
routes: [
{
path: '/',
component: ContentView,
children: [
{
path: '/',
name: 'DataTable',
component: DataTable,
meta: { requiresAuth: true }
},
// ===================================
// Login
// ===================================
{
path: '/login',
name: 'AppLogin',
component: AppLogin,
meta: { checkAlreadyLoggedIn: true }
},
{
path: '/logout',
name: 'AppLogout',
component: AppLogout,
meta: { requiresAuth: true }
}
]
},
{
path: '*',
component: ContentView,
children: [
{
path: '/',
name: 'NotFound',
component: NotFound
}
]
}
]})
And here is the necessary config/index.js changes: assetsPublicPath: '/subdir/app/'
In local development the routes work fine. But on the staging server all static assets, the built JS and CSS etc all serve fine. However the home route shows the catch-all. I am assuming it's because my routes are not set up correctly, or because I need to do something to serve from a subdirectory in production.

The assetsPublicPath config is just for webpack assets. For vue-router, you need to set the base option in the constructor.
See docs: https://router.vuejs.org/en/api/options.html#base

I have been able to solve this, using the base property of vue-route.
In the case of the example it would look like this:
export default new Router({
mode: 'history',
base: '/subdir/app/',
routes: [
{
path: '/',
component: ContentView,
children: [
My question now is how can I make this subdirectory dynamically.
Imagine a single server, and 2 different urls pointing to this server.
www.dominio / app1
www.dominio / app2