I am trying to open page in new tab, in local it was working fine when deployed to server getting error as below:
Oops, looks like the page is lost.
This is not a fault, just an accident that was not intentional.
Below is my code:
Router:
const routes: Routes = [
{ path: ' ', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: 'resource', component: ResourceDetailsComponent },
{ path: 'careers', component: CareerComponent }
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
In component:
<a class="view" (click)="redirect(a)"
>VIEW MORE VACANCIES</a
>
redirect(){
localStorage.removeItem("selectedCareer");
window.open("/careers", '_blank');
}
In local page is redirecting and working fine, anything i have missed in my code please let me know.
You are probably trying to access some suburl like yourhomepage.com/resource right?
Your local Development Server will always serve the index.html per default and you probably want to configure your deployment server the same way. You need the index.html file to be served for your angular spa to work. Without knowing your Provider/Server there is no real way to help you with that.
Most Webservers are configured to always return the file you are accessing through the url or the index.html if you provide no suburl.
So if your file tree looks like this:
index.html
angular.js
yourhomepage.com and yourhomepage.com/index.html will return the index.html
and yourhomepage.com/angular.js will return the js file.
BUT yourhomepage.com/ressouces will not return anything because there is no corresponding file. But you can configure your Webserver to also return the index.html in that case.
This is what you probably have to do.
Related
I have a problem. I'm doing a software project for university but they want us to use python. Front end in javascript is allowed though and since this is a special course for non CompSci people or programmers even I decided to use the CDN version of vue and vue-router to avoid npm, node, etc to make it easier for them.
So now I have my routes defined like this in index.html inside a script tag defined below everything,
<script src="views/dashboard/dashboard.js"></script>
<script src="views/input/input.js"></script>
<script src="views/info/info.js"></script>
<script src="views/settings/settings.js"></script>
const routes = [
{ path: '/', component: Dashboard },
{ path: '/input', component: Inputpage },
{ path: '/info', component: Infopage },
{ path: '/settings', component: Settingspage },
{ path: '/index.html', redirect: '/' } //default route. Leave this as such to
];
and Dashboard/Inputpage/.. etc are .js files I import. Info.js looks like this for example
var Infopage = {
template: '<h1>This page is for information</h1>'
};
And that displays just fine. However, when I add anything else like a p or something simpler like a second heading, a paragraph or an input, nothing happens. What can I do to have it display more than just a heading?
EDIT 1: I tried
var Infopage = {
template:`<div id='info_page'>
<h1>This page is for information</h1>
</div>`
};
And now I get the error [Vue warn]: Error in nextTick: "InvalidCharacterError: String contains an invalid character".
I'm pretty new to VueJS and have a problem I can't grasp right now.
I coded a little App which works absolutely fine under vue serve, but when I build it and upload the dist folder to my webserver I'm experiencing a weird problem.
I have the following Routes:
/home
/overview
/listing
/detail
I start at home, click on a button go to overview, from there to listing and from there to detail. Every template has a a "Go Back" Link which works with
#click="$router.back()"
When testing locally with Vue Serve it behaves as expected.
When I built it and upload the dist folder I get the weird error that when I'm on "Detail" and go back, it goes to "Overview" instead of "listing". I notice that the address in the browser is always one level "off". For example if I go back from overview to home, it shows the home-template but the addressbar shows /listing.
Does anyone have an idea what I'm doing wrong? Thanks a lot!
I already tried $router.go(-1), which results in the same error..
My router file looks pretty standard I'd say:
{
path: '/home',
name: 'Home',
component: Home
},
{
path: '/overview',
name: 'Overview',
component: Overview
},
{
path: '/listing',
name: 'Listing',
component: Listing
},
{
path: '/detail',
name: 'Detail',
component: Detail
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
It works great in vue serve mode, but just not when using the dist folder online..
I am creating a NotFoundComponent so that every non-existing url, a friendly page will apear to the user.
My Angular 6 project has 5 features(CRUDL):
CompanyComponent,
EmployeeComponent,
BranchComponent,
BenefitsComponent,
MainComponent
Each component have it own .module and .routing, for example the company.routing.ts defines the route like this:
export const routes: Routes = [
{
path: "branch",
component: EmptyComponent,
}
...
#NgModule({
imports: [
RouterModule.forChild(routes),
...
it also defines its childrens, like path: "branch/:id".
So, i have no problem with the way i built the routing.
The problem I am facing now is the way I can define a path to the NotFoundComponent.
Because I don't have a single file where I define my routes, if I put the definition of the /404 page on the on the bottom of routers definition in the main.routing.ts, every other route defined on the features(like the company.routing.ts) will be redirected to the /404, since angular uses the first match strategy.
Things i tried so far:
on the main.routing.ts:
export const routes: Routes = [
{
path: "main",
component: MainComponent,
},
{
path: "404",
resolve: {
routeTitle: TitleResolver,
},
component: NotFoundComponent,
},
{
path: "",
pathMatch: "full",
redirectTo: "/main",
},
{
path: "**",
redirectTo: "/404",
}
if I put this way, when I try accessing the route /company (defined in the company.routing.ts) it will be redirected to the /404.
I also tried defining it on any a routing of one of my features, like on the company.routing.ts
{
path: "**",
redirectTo: "/404",
}
Than, a funny thing happened, if I define this piece of code on the benefits.routing.ts, i can access /benefits but /branch, /employee and the rest of the routes will be redirected to /404.
if I define it on branch, I can access /benefits, /branch but /employee and the rest of the routes will be redirected to /404.
I could just place this code on the last feature loaded and it would work but I would like to know if I can solve this with another approach, can't I define a route that I want to be the last one loaded?
thanks in advance.
My site works fine on the dev server but when I publish it to production on GitHub pages it has a strange error. Entering the URL (yanshuf0.github.io/portfolio) brings up the page fine, however when I type in yanshuf0.github.io/portfolio/home the page fails to load and produces the following console log.
It seems to be an error at home but I don't get it since the base URL redirects to the home URL where there are no problems...
RouterModule.forRoot([
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: 'blog', component: BlogComponent},
{ path: 'blog-post', component: BlogPostComponent},
{ path: '**', redirectTo: 'home' }
])
Anyone have any idea what could be the issue?
Edit: to clarify this issue doesn't occur on the development server.
Edit2: the error doesn't occur when I enter yanshuf0.github.io/portfolio/home/ with the trailing slash.
You need to set your "base href" in your index.html to portfolio, or whatever your project name is.
<base href="/portfolio/">
I'm building a site with MEAN stack, and overall this is my structure:
root
app
auth
auth.routes.ts
auth.service.ts
app.component.html
app.component.ts
app.routing.ts
On my app.routung.ts I have this code:
const APP_ROUTES: Routes = [
{ path: '', redirectTo: '/main_url', pathMatch: 'full' },
{ path: 'main_url', component: MainComponent, canActivate: [AuthenticationGuard] },
{ path: 'cars', component: CarsComponent },
{ path: 'auth', component: AuthenticationComponent, children: AUTH_ROUTES },
];
Then, in my app.js main file I have these routes:
app.use('/main_url', mainRoutes);
app.use('/cars', carRoutes);
app.use('/', appRoutes);
The content of appRoutes is this:
var express = require('express');
var router = express.Router();
router.get('/', function (req, res, next) {
res.render('index');
});
module.exports = router;
The index file, renders an html with a menu on the left sidebar. In the content part, I have a <my-app>Loading...</my-app>, which loads the app.component.ts and all the logic there.
The question here is, how can I secure my index.html main route, with a login page, when I don't want to include it inside my <my-app>Loading...</my-app>?
I'm I doing something wrong? Or there is a good way to do that?
UPDATE
A brief description of my problem:
I have a node router, which only has a get method, then, is redirected to index:
... code ...
res.render('index');
index.html, is a template with a header, sidebar menu, footer and content. In the content, I have this: <my-app>Loading...</my-app>, this line triggers my angular component, which uses my Angular Routes (APP_ROUTES), the one I posted before.
All at this point works fine, but, how can I prevent to trigger the index.html from my res.render('index'), when the user is not logged in and send it to a complete separated login.html page/code? I think I have to change something because always I'm going to be redirected to index, no matter what, because it is the entry point.
Please try Angular's HashLocationStrategy, which puts a '#' in the URL to separate the bit's the server responds to from the bits Angular responds to (to put it crudely).
Ng-book gives a good description, the essentials are
import {LocationStrategy, HashLocationStrategy} from '#angular/common';
#NgModule({
declarations: [
...
],
imports: [
...
],
providers: [
provide(LocationStrategy, {useClass: HashLocationStrategy})
]
Please also see the answer to this SO question, which mentions server configuration (as an alternative).
Ensure your server is configured to support HTML5 pushState. This just
means that the server returns index.html for requests to unknown
resources.
Here is another good reference Location Strategies in Angular Router, probably the best I can find to describe the problem.