Manage different base layouts in Angular2 - javascript

In my angularjs application with ui.router I can do following:
$stateProvider
.state('app', {
url: '',
abstract: true,
template: '<div data-ui-view></div>'
})
.state('app.auth', {
url: '',
abstract: true,
controller: 'AuthShellController as vm',
templateUrl: 'views/auth/auth-shell-view.html'
})
.state('app.ui', {
abstract: true,
templateUrl: 'views/ui-shell-view.html',
controller: 'ShellController as vm'
and my angular2 application routes config:
const appRoutes:Routes = <Routes>[
{
path: '',
component: DashboardComponent,
},
{
path: 'login',
component: LoginComponent,
},
{
path: 'presentation',
children: [{
path: 'new',
component: PresentationComponent
}, {
path: ':id',
component: PresentationComponent
}]
},
];
In angularjs I can resolve same url by states, so if I have authorization state I render just login form without header, sidebar.
If I have application state I render shell with header, footer, sidebar and so on.
Question
How can I manage base layouts in angular2 router?

I found a way that works for me to manage base layouts: https://stackblitz.com/github/jbojcic1/angular-routing-example?file=src%2Fapp%2Flayout%2Flayout-routing.module.ts
In this example I have featureA and featureB modules which use base layout with header and sidebar and login feature which doesn't use any base layout.
The only thing I don't like here is that each time you add a new module which uses some base layout, you need to modify routing file for that base layout, because this violates open/closed principle.

Related

Angular check if particular route path in URL

http://localhost:4200/dsc-ui/#message and if I type in the URL (remove #message and type application-management)
http://localhost:4200/dsc-ui/application-management (/application-management), it should redirect me to http://localhost:4200/dsc-ui/#/application-management. For any other route stay on http://localhost:4200/dsc-ui/#message.
How can i achieve this using angular?
You can set a new route in your Routes array in your router module, e.g.:
{ path: '/application-management', redirectTo: '/message', pathMatch: 'full' }
Are you want to add dynamic routing in your project ?
Or If you want to redirect you system if url is not existing in your system
then find below code
{ path: '', pathMatch: "full", redirectTo: "/yourdefaultcomponent" },
{ path: '404', component: NotFoundComponent },
{ path: '**', redirectTo: '404' }

Nuxt2 Router.js

I have a stupid simple question that I basically failed to find a good answer for.
I have a nuxt2 project that has a #nuxtjs/router module on it. I have added the module on the buildModules on nuxt.config.js and created router.js on the src folder.
this is my nuxt.config.js file :
ssr: true, // tauri
target: 'static', // tauri
server : {
host:"127.0.0.1",
port: 8001
},
// Global page headers: https://go.nuxtjs.dev/config-head
head: {
...
},
env:{
MEDIA_API:process.env.VUE_APP_MEDIA_API,
API_URL: process.env.API_URL
},
// Global CSS: https://go.nuxtjs.dev/config-css
css: [
],
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [
...
],
// Auto import components: https://go.nuxtjs.dev/config-components
components: true,
// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
buildModules: [
'#nuxtjs/router'
],
// Modules: https://go.nuxtjs.dev/config-modules
modules: [
...
'#nuxtjs/router',
...
],
// Build Configuration: https://go.nuxtjs.dev/config-build
build: {
extractCSS: true,
plugins: [ // to import jQuery :"
new webpack.ProvidePlugin({
jQuery: 'jquery',
$: 'jquery',
'window.jQuery': 'jquery',
'window.$': 'jquery',
}),
],
standalone: true
},
router: {
middleware: ['auth']
},
auth: {
...
}
and here is my router.js file :
import { parseHTML } from 'jquery';
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
// this is just a function to help me not writing the full path of each page
const page = (path) => () => import(`~/pages/${path}`).then(m => m.default || m)
const routes = [
{path: '/', name: 'home', component: page('index.vue')},
{path: '/login', name: 'login', component: page('login.vue')},
{path: '/players', name: 'allPlayers', component: page('players/index.vue')},
{path: '/players/:id', name: 'singlePlayer', component: page('players/view.vue')},
{path: '/plans', name: 'allPlans', component: page('plans/index.vue')},
{path: '/plans/new', name: 'newPlan', component: page('plans/new.vue')},
{path: '/activities', name : 'allActs', component: page ('activities/index.vue')},
{path: '/activities/new', name: 'newAct', component: page('activities/new.vue')},
{path: '/activityPlayer/:id', name: 'viewActivityPlayer', component: page('activities/viewActivityPlayer')},
{path: '/auth/login', name: 'auth.login', component: page('auth/login')},
{path: '/superAdmin/', name: 'superAdmin', component: page('superAdmin/index.vue')},
{path: '/superAdmin/viewAll', name: 'viewAdmins', component: page('superAdmin/viewAdmins.vue')},
];
export function createRouter() {
return new Router({
routes,
mode: 'history'
})
}
I want to generate full static build to deploy my nuxt app on a tauri build. I was able to successfully deploy a nuxt app that does NOT has that router.js file. The build generate just generate all routes by default in the dist folder.
How can I generate the routes ?
I've tried with the /login path and it's working great as shown in this commit, there was a typo in the path tho (I did tried only for that one since it was an obvious one for me).
I also removed the useless package-lock.json since you use yarn in your project (could be vice-versa of course) and since you should not use both at the same time. Added a few explicit keys in the nuxt.config.js file too.
Commented #nuxtjs/auth-next, ran yarn generate && yarn start and I have successfully access to the given path.
The generated route files are maybe not that friendly (because of their hash) but they are still available in the dist directory. There is a way to make them prettier, you could search for that on Stackoverflow/Google.
Update: it works with the auth middleware too actually.

VueJs dynamic component chunks (laravel-mix/webpack) loading url changes after i go to a subpage

i am developing a multipage web application using Laravel and VueJs.
resources are compiled using Laravel-mix (webpack wrapper)
i am lazy loading components in vuejs route
{
path: "/auth",
component: () => import(/* webpackChunkName: "site" */'./components/Site'),
children: [
{
name: "login",
path: "login",
component: () => import(/* webpackChunkName: "login" */'./components/auth/Login'),
meta: {
title: "Login to your account",
breadcrumbs: [{ name: "Login", active: true }]
}
},
{
name: "register",
path: "register",
component: () => import(/* webpackChunkName: "register" */'./components/auth/Register'),
meta: {
title: "Register",
breadcrumbs: [{ name: "Register", active: true }]
}
}
]
},
my webpack.mix.js is as follows,
mix.webpackConfig({
output: {
publicPath: "public/",
chunkFilename: mix.inProduction() ? "js/chunks/[name].[chunkhash].js" : "js/chunks/[name].js"
},
});
i am getting the chunks in my projectfolder/public/js/chunks/ which is right.
but my problem is, after loading home/root page,
i go to http://projecturl/auth/login that works fine. because the login.js chunk is loading from http://projecturl/public/js/chunks/login.js
but then when i go to http://projecturl/auth/register it doesnt work !
because the register.js chunk is loading from http://projecturl/auth/public/js/chunks/login.js
it seems the chunk loading url changes every time i go to a any subpage. and that subpage url becomes the chunk public path.
Please help.

How to do redirect and load the same component in Vue Router

I am trying to create a route structure that would allow me to do the following.
Home.vue has one router view
/home/clients should load the Clients component
home/campaigns should load the Campaigns component
home/clients/:id should redirect to /home/clients/:id/campaigns and load the same Campaigns component.
I do not want to introduce another router view inside Clients component to handle the campaigns part. I was trying to get it done with following routes but really can't get it to work.
These are children routes to /home.
UPDATE: I got it working literally writing down every path that I may encounter. Is there a way I can elegantly solve this?
{
path: '/home',
name: 'Home',
component: Home,
beforeEnter(to, from, next) {
if (!store.getters.isLoggedIn) {
next({
path: '/login',
query: {
redirect: to.fullPath
}
});
} else {
next();
}
},
children: [
{
path: 'clients',
component: Clients
},
{
path: 'clients/:clientId',
redirect: 'clients/:clientId/campaigns'
},
{
path: 'clients/:clientId/campaigns',
component: Campaigns
},
{
path: 'clients/:clientId/campaigns/:campaignId',
redirect: 'clients/:clientId/campaigns/:campaignId/ads'
},
{
path: 'clients/:clientId/campaigns/:campaignId/ads',
component: Ads
},
{
path: 'clients/:clientId/campaigns/:campaignId/ads/:adId',
redirect: 'clients/:clientId/campaigns/:campaignId/ads/:adId/postings'
},
{
path: 'clients/:clientId/campaigns/:campaignId/ads/:adId/postings',
component: Postings
},
{
path: 'campaigns',
component: Campaigns
},
{
path: 'campaigns/:campaignId',
redirect: 'campaigns/:campaignId/ads'
},
{
path: 'campaigns/:campaignId/ads',
component: Ads
},
{
path: 'campaigns/:campaignId/ads/:adId',
redirect: 'campaigns/:campaignId/ads/:adId/postings'
},
{
path: 'campaigns/:campaignId/ads/:adId/postings',
component: Postings
},
{
path: 'ads',
component: Ads
},
{
path: 'ads/:adId',
redirect: 'ads/:adId/postings'
},
{
path: 'ads/:adId/postings',
component: Postings
},
{
path: 'postings',
component: Postings
}
]
}

Angular 2 RC5 and above - How to show an error page when no route matches?

My current Route config looks like this
{
path: '',
redirectTo: 'register/account',
pathMatch: 'full'
},
{
path: 'register/account',
component: AccountRegisterComponent
},
{
path: 'register/auto/:Id',
component:AutoregisterComponent
},
If a user tries to navigate to '/register/auto'. Currently I see a blank page and an error in the console.
How can I show a 404 error or a message saying that this page is not available globally?
See angular2 cheatsheet
You can do something like this:
{path: '**', redirectTo: '/404' }
So for example you would have something probably like this:
{path: '/404', component: NotFoundComponent},
{path: '**', redirectTo: '/404' }
Hope that helps

Categories

Resources