Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
My app's routing was just working perfectly, now when i add a new route my paths "notFoundTemplate" and the new path added are redirecting to the home page.Can some one please help.
Here is my routes.js code:
Router.configure({
layoutTemplate: 'layoutMain',
notFoundTemplate: '404'
});
Router.configure({
layoutTemplate: 'layoutLanding'
});
Router.map(function() {
this.route('Home', {
path: '/home',
template: 'home',
layoutTemplate: 'layoutMain'
//onBeforeAction: function(pause){
// this.render('landing_page');
//}
});
this.route('Login', {
path: '/login',
template: 'login',
layoutTemplate: 'layoutMain'
});
this.route('LandingPage',{
path: '/',
template: 'landing_page',
layoutTemplate: 'layoutLanding'
});
this.route('Results',{
path: '/results',
template: 'results',
layoutTemplate: 'layoutMain'
});
this.route('SubmitProperty', {
path: '/submit_property',
template: 'submit_property',
LayoutTemplate: 'layoutMain'
});
});
"L"ayoutTemplate: 'layoutMain' in the last route
Related
I hosted my angular 13 website on Github Pages and after I added i18n I have the following routing problem.
When I go to https://MyRepoName.github.io/base/en-US/ everything is fine and I get redirected to https://MyRepoName.github.io/base/en-US/home as it should.
But when I want to access some other route for example:
https://MyRepoName.github.io/base/en-US/welcome then I got redirected to https://MyRepoName.github.io/base/home
When I go to https://MyRepoName.github.io/base/welcome then everything is fine.
I have this code for routes:
const routes: Routes = [
{
path: 'welcome',
component: WelcomeComponent
},
{
path: 'home',
component: HomeComponent
},
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: '**', redirectTo: 'home', }
];
If someone had the same issue pls help.
I have 1 index/404 file with <base href="/base/">
and folder en-US with index/404 file <base href="/base/en-US">
I also receive this info when I access: https://MyRepoName.github.io/base/welcome
Router Event: Od
NavigationStart(id: 1, url: '/en-US/welcome')
Od {id: 1, url: '/en-US/welcome', navigationTrigger: 'imperative', restoredState: null}
Router Event: qR
RoutesRecognized(id: 1, url: '/en-US/welcome', urlAfterRedirects: '/home', state:Route(url:'', path:'') { Route(url:'home', path:'home') } )
qR {id: 1, url: '/en-US/welcome', urlAfterRedirects: '/home', state: ob}
in routing I have next:
{path: 'modules', component: ..., resolve: { modules: ModulesServiceResolver},
{path: 'modules/:id', component: ...}
and when I return back from child component - resolve not called one more time?
array of modules, which I get from modules resolver can be changed when I am in inner page. I want to get them?
how to call resolver one more time when return from child route?
UPD:
modules I have done as separate module
then in modules.routing done next
{
path: '',
component: ModulesComponent,
resolve: {
projects: ModulesService
},
runGuardsAndResolvers: 'always'
},
{
path: ':id',
loadChildren: () => import('./module/module.module').then(m => m.ModuleModule)
}
now works as needed
modules I have done as separate module then in modules.routing done next {
path: '',
component: ModulesComponent,
resolve: {
projects: ModulesService
},
runGuardsAndResolvers: 'always'
},
{
path: ':id',
loadChildren: () => import('./module/module.module').then(m => m.ModuleModule)
}
This may seems as a silly question but I can't understand this routing
routes.ts:
const APP_ROUTES: Routes = [
{ path: 'home', component: HomeComponent },
{ path: 'articles', component: ArticulosComponent },
{ path: 'article/:id', component: ArticuloComponent },
{ path: '', pathMatch: 'full', redirectTo: 'home' },
{ path: '**', pathMatch: 'full', redirectTo: 'notfound' }
];
When access to localhost:4200/article/6 the router redirects to localhost:4200/#/home but when manually wrote localhost:4200/#/article/6 works fine.
First, note # symbol, why is it there and what different does it cause? And... I specify 'manually' because even through code adding the # symbol to the path (ex. ) keeps redirecting to home
The main question/problem is "Which would be the correct link or rule in other to load the correct component?"
You can remove # from route changing value of useHash in app.module.ts
RouterModule.forRoot(ROUTES, { useHash: false }),
You can add pathMatch: 'full' with home and articles routes
I have been working with Nativescript with Angular 2 and Typescript and understand there are two options for the router outlet. The original angular <router-outlet> directive which can be used to show children routes of a component, and the <page-router-outlet> which is specific to nativescript routing. I have been using the latter and attempting to use the <router-outlet> directive but find that it acts the same. I want for example this scenario.
parent.component.html
<StackLayout>
<Button [nsRouterLink]="['/accounts/edit-account']"><Button>
<Button [nsRouterLink]="['/accounts/new-account']"><Button>
</StackLayout>
<router-outlet></router-outlet>
This has two buttons with nativescript nsRouterlink directive. I want the buttons to remain while the router-outlet updates with the child information.
here are the routes.
module.routing.ts
const Routes: Routes = [
{ path: "accounts", children: [
{path: "", component: ParentComponent },
{ path: "new-account", component: ChildOneComponent},
{ path: "edit-account", component: ChildTwoomponent},
]
},
];
The problem is when I attempt this it replaces the entire screen without leaving the buttons in place as would do the <page-router-outlet> directive.
I've even followed this documentation by Nativescript and the example does not act as the documentation declares.
Can anyone steer me in the right direction?
Following the Nativescript Documentation again works ok. The solution in general is in the routing to change from
const Routes: Routes = [
{ path: "accounts", children: [
{path: "", component: ParentComponent },
{ path: "new-account", component: ChildOneComponent},
{ path: "edit-account", component: ChildTwoomponent},
]
},
];
to
const Routes: Routes = [
{ path: "accounts", component: ParentComponent, children: [
{path: "", redirectTo: "/accounts/new-account", pathMatch: 'full' },
{ path: "new-account", component: ChildOneComponent},
{ path: "edit-account", component: ChildTwoomponent},
]
},
];
Finding this I have a new issue that I will post in a different question and link to this answer later.
My main JS has the following code -
/*global require*/
'use strict';
require.config({
shim: {
backbone:{
deps:[
'underscore',
'jquery'
],
exports: 'Backbone'
},
bootstrap:{deps:['jquery']},
},
paths: {
jquery: '../bower_components/jquery/dist/jquery',
backbone: '../bower_components/backbone/backbone',
underscore: '../bower_components/underscore/underscore',
bootstrap: '../bower_components/bootstrap/dist/js/bootstrap',
text:'../bower_components/requirejs-text/text',
router: 'routes/router'
}
});
require([
'jquery',
'underscore',
'backbone',
'bootstrap',
'router'
//'text!bootstrapCSS'
], function ($, _, Backbone, undefined, mainRouter) {
var router = new mainRouter();
Backbone.history.start();
});
and view.home.js has the following code
define(
[
'jquery',
'underscore',
'backbone',
'bootstrap',
'text!templates/header.html',
'text!/bower_components/bootstrap/dist/css/bootstrap.css'
],
function($, _, Backbone, undefined, header, bootstrapCSS){
var HomeView = Backbone.View.extend({
el: '.header-container',
headerTemplate: _.template(header),
initialize: function(){
console.log("in view-home initialize")
this.render();
},
render: function(){
console.log("render header");
this.$el.html(this.headerTemplate());
console.log("render header complete i guess");
},
events: {},
});
return HomeView;
})
the above code is being used to render header.html in the main html. The header.html is using bootstrap classes for design primarily bootstrap.css. The page on load successfully loads everything including all the libraries but the view does not have the desired display - i.e. it seems to be devoid of bootstrap. Is there something wrong that I'm doing that my loaded html doesn't display bootstrap and how do I include bootstrap.css in my header.html through require.js in backbone.
Please help.