I impementing dynamic import of my components in my router in vuejs after when i load the page the bootstrap not loaded.
//.babelrc
"plugins": [
"dynamic-import-webpack"
],
//.route.js
const myRoutes = [
{
path: '/admin, component: RouterViewComponent,
children: [
{ path: '/', component: () => import('../components/myComponent.vue'), name: 'my-component' }
]
}
]
Related
i started a new project with nativescript-angular (8.20.4). I'm facing an issue regarding the use of modules lazy loading. I managed to only get the first page (login) displayed using lazy loading. The bottom nav bar is displayed but the pages inside it are not loaded or displayed.
app-routing.module.ts
const routes: Routes = [
{ path: "", redirectTo: "/login", pathMatch: "full" },
//{ path: "", redirectTo: "/bottomnav", pathMatch: "full" },
//{ path: "login", component: LoginComponent},
{ path: "login", loadChildren: () => import('./modules/login/login.module').then(m => m.LoginModule)},
{ path: "bottomnav", loadChildren: () => import('./modules/bottomnav/bottomnav.module').then(m => m.BottomnavModule)},
];
#NgModule({
imports: [NativeScriptRouterModule.forRoot(routes, { enableTracing: true })],
exports: [NativeScriptRouterModule]
})
I probably forgot a declaration or something else but i can't figure it out.
The sample project is available on github : https://github.com/npmnewbie/ns-bottomnav-withlogin/
bottomnav-routing.module.ts
const routes: Routes = [
{ path: "", redirectTo: "bottomnav", pathMatch: "full" },
{ path: "bottomnav", redirectTo: "/(browse:browse//search:search)", pathMatch: "full" },
{
path: "browse",
component: NSEmptyOutletComponent,
outlet: "browse", loadChildren: () => import('../browse/browse.module').then(m => m.BrowseModule)
},
{
path: "search",
component: NSEmptyOutletComponent,
outlet: "search" , loadChildren: () => import('../search/search.module').then(m => m.SearchModule)
},
];
#NgModule({
imports: [NativeScriptRouterModule.forChild([{path: "", component: BottomnavComponent, children: routes}]),],
exports: [NativeScriptRouterModule]
})
export class BottomnavRoutingModule { }
bottomnav.module.ts
#NgModule({
declarations: [BottomnavComponent],
imports: [
BottomnavRoutingModule,
NativeScriptCommonModule,
],
exports: [NativeScriptRouterModule],
schemas: [NO_ERRORS_SCHEMA]
})
export class BottomnavModule { }
Thanks in advance for your help.
Image Login page
Image Tab nav bar empty page
Edit : my project is based on playground based project
I have app-routing.module.ts
const routes: Routes = [
{ path: "", redirectTo: "/fp", pathMatch: "full" },
{ path: "home", loadChildren: "~/app/home/home.module#HomeModule" },
{ path: "login", loadChildren: "~/app/accounts/login/login.module#LoginModule" },
{ path: "register", loadChildren: "~/app/accounts/registers/registers.module#RegistersModule" },
{ path: "fp", loadChildren: "~/app/accounts/first_page/first_page.module#FirstPageModule" },
];
export const routing = NativeScriptRouterModule.forRoot(routes, {preloadingStrategy: PreloadAllModules});
In Home Component I have home-routing.module.ts
const routes: Routes = [
{ path: "", component: HomeComponent }
];
In LoginComponent I have login-routing.module.ts
const routes: Routes = [
{ path: "", component: LoginComponent }
];
In RegisterComponent I have resgister-routing.module.ts
const routes: Routes = [
{ path: "", component: RegistersComponent }
];
In RegisterComponent I have first_page-routing.module.ts
const routes: Routes = [
{ path: "", component: FirstPageComponent }
];
I create a authguard like this:
canActivate(): boolean {
if (this.auth.isAuthenticated()) {
console.log('true')
return true;
}
this.router.navigate(['/login']);
console.log('false')
return false;
}
My question is, how to use AuthGuard in my routing?
You can try and add the guard in the app routing module:
const routes: Routes = [
{ path: '', redirectTo: '/fp', pathMatch: 'full' },
{ path: 'home', loadChildren: '~/app/home/home.module#HomeModule' },
{
path: 'login',
loadChildren: '~/app/accounts/login/login.module#LoginModule'
},
{
path: 'register',
loadChildren:
'~/app/accounts/registers/registers.module#RegistersModule'
},
{
path: 'fp',
loadChildren:
'~/app/accounts/first_page/first_page.module#FirstPageModule',
canActivate: [AuthGuard],
canActivateChild: [AuthGuard],
}
];
... assuming you only want to protect the fp path.
This is my dashboard.module.ts
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import {JwtModule} from '#auth0/angular-jwt';
import {AuthService} from '../services/auth.service';
import {dashboardComponent} from './dashboard.component';
import { foodPollComponent } from '../modules/foodPoll/foodPoll.component';
import { dashboardModuleRoutingModule } from './dashboard.routing.module';
#NgModule({
imports: [
CommonModule, dashboardModuleRoutingModule
],
declarations: [
dashboardComponent,
foodPollComponent
],
providers: [JwtModule, AuthService]
})
export class dashboardModule { }
This is my dashboard.routing.module.ts
import { NgModule } from '#angular/core';
import { Routes,
RouterModule } from '#angular/router';
import { dashboardComponent } from './dashboard.component';
import { foodPollComponent } from '../modules/foodPoll/foodPoll.component';
const routes: Routes = [
{
path: 'dashboard',
component:dashboardComponent
},
{
path: 'dashboard/:id',
component: dashboardComponent,
children: [
{
path: 'foodPoll',
component: foodPollComponent,
outlet: "details"
}
]
}
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class dashboardModuleRoutingModule {}
This is my dashboard.component.html
<div class="dashboard">
<header>Random header text</header>
<router-outlet name="details"></router-outler>
</div>
But when I change from localhost:4200/dashboard to localhost:4200/dashboard/foodPoll, nothing renders in the router outlet view. The view still remains the same as dashboard page.
Where I am doing wrong? Any help would be appreciated.
Thanks
path: 'dashboard/:id',
component: dashboardComponent,
children: [
{
path: 'foodPoll',
component: foodPollComponent,
outlet: "details"
}
]
dashboardComponent would be on url: "dashboard/...anything.../"
foodPollComponent would be on url: "dashboard/...anything.../foodPoll"
:id - is dynamic parameter for dashboardComponent
I have an issue with routing in NativeScript 3.4 that drives me nuts. The idea of this test project is that the root app component is using a <page-router-outlet> and then using nested angular routing using <router-outlet> it loads a login parent and child, through which I am navigating to a main page which has two child routes.
If I route from the login.child.ts to the main parent/child with this.router.navigate(['/main']); then everything works fine and I continue alternating between the two children.
However, if I route to the main with clearing history this.router.navigate(['/main'],{ clearHistory: true });, which is what I want because after login I don’t want the user to be able to “go back” to the login, then I am correctly reaching the main parent with the first child, but then am unable to navigate to the other child.
Any ideas as to what I am doing wrong?
This is the routing I am using:
const routes: Routes = [
{ path: "", redirectTo: "login", pathMatch: "full" },
{ path: "login", component: LoginParent,
children: [
{ path: "", redirectTo: "loginchild", pathMatch: "full" },
{ path: "loginchild", component: LoginChild },
]
},
{ path: "main", component: MainParent,
children: [
{ path: "", redirectTo: "mainchild", pathMatch: "full" },
{ path: "mainchild", component: MainChild },
{ path: "otherchild", component: OtherChild },
]
}
];
Edit: when I wrap the main route in a component that contains a <page-router-outlet> like below then it all start working. It seems however a bit cumbersome. I would be happy to understand how this can be more neat (perhaps the changes in NativeScript 4 allow for easier handling)?
const routes: Routes = [
{ path: "", redirectTo: "login", pathMatch: "full" },
{ path: "login", component: LoginParent,
children: [
{ path: "", redirectTo: "loginchild", pathMatch: "full" },
{ path: "loginchild", component: LoginChild },
]
},
{ path: "main", component: AppComponent,
children: [
{ path: "", component: MainParent,
children: [
{ path: "", redirectTo: "mainchild", pathMatch: "full" },
{ path: "mainchild", component: MainChild },
{ path: "otherchild", component: OtherChild },
]
}
]
}
];
I am using components with <img src> inside routes.
import myImg from './img.png'
<img src={myImg}>
Webpacks build move all files to thedist` folder, including images from components.
The problem is it moves images to the root of dist e.g. dist/img.png.
But also webpack rewrite images paths in HTML with component routes e.g.
<img src="/path/img.png">.
It bring all images from nested routes to 404.
I need to force webpack move images accordingly its routes or write src path in HTML without routes.
How should I do that?
router
const router = (
<BrowserRouter>
<Route path='/'
component={App}/>
</BrowserRouter>
);
ReactDOM.render(
router,
document.getElementById('root')
);
webpack.config.js
module.exports = {
watch : true,
entry : {
app: [
'babel-polyfill',
path.resolve(__dirname, 'src/index.jsx')
]
},
resolve: {
extensions: ['.js', '.jsx']
},
output : {
filename: 'bundle-[hash].js',
path : path.resolve(__dirname, 'dist'),
},
plugins: [
new ExtractTextPlugin('[name]-[hash].css'),
],
module : {
rules: [
{
test : /\.jsx?$/,
exclude: /node_modules/,
use : 'babel-loader',
include: path.join(__dirname, 'src')
},
{
test: /\.(less|css)$/,
use : ExtractTextPlugin.extract(
{
use: [
{loader: 'css-loader'},
{loader: 'resolve-url-loader'},
{loader: 'less-loader'},
]
}
),
},
{
test: /\.(png|jpg|jpeg|gif)$/,
use : [
'file-loader?hash=sha512&digest=hex&name=[name]-[hash].[ext]',
'image-webpack-loader?bypassOnDebug&optimizationLevel=7&interlaced=false'
],
},
]
}
}