Develop Reference

opening page in new tab getting 404 error

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.

VueJS 3 Router behaves differently in Dev and Production

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..

Angular Routes: Problem defining a NotFoundComponent with multiple routings files

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.

Router not correctly loading default route on application load

I've been struggling with this issue for the past day and a half and still have made no progress. Currently, I am attempting to load my angular app and have it default to a particular page when the application is bootstrapped. Unfortunately, it redirects to a different route.
I'm trying to go to:
https://clwd0002278/ControlTower/NICK/UI/#/
When I initially load, though, it goes to https://clwd0002278/ControlTower/NICK/UI/#/ControlTower/NICK/UI/, which results in the 404 page being hit.
I'll also try to go to https://clwd0002278/ControlTower/NICK/UI/ with the same result as above.
Here's the code so someone can try to make sense of this:
const routes: Routes = [
{path: '', redirectTo: 'patients', pathMatch: 'full'},
{path: 'dashboard', component: DashboardComponent},
{path: 'notifications', component: NotificationsComponent},
{path: 'patients', component: PatientListComponent},
{path: '404', component: NotFoundComponent},
{path: '**', component: NotFoundComponent},
];
#NgModule({
imports: [
RouterModule.forRoot(routes, {useHash: true})
],
exports: [RouterModule]
})
export class AppRoutingModule {
}
Here's the base-href on the html page:
<base href="#">
I have tried changing base-href and deploy-url in the build script, as well as omitting them entirely. I'm just not sure what I'm missing at this point.
Any help would be appreciated, and just ask if you need more information.
Edit:
The application exists at https://clwd0002278/ControlTower/NICK/UI/ and NOT at https://clwd0002278/.

Add
<head>
<base href="/ControlTower/NICK/UI">
...
</head>
to your index.html
or provide int in AppModule like
import { APP_BASE_HREF } from '#angular/common';
...
providers: [{APP_BASE_HREF, useValue: '/ControlTower/NICK/UI'}]
See also
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
https://angular.io/api/common/APP_BASE_HREF

Always your default route must be at the before the path "**".
{path: '404', component: NotFoundComponent},
{path: '', redirectTo: 'patients', pathMatch: 'full'},
{path: '**', component: NotFoundComponent},
Refer
https://angular.io/guide/router

So, it turns out that there was some code from ngrx that was pulled in from our base project package that kept throwing the location.pathname onto the end of the url for the angular/ngrx routing packages. I'm so frustrated and yet so relieved to have finally resolved this issue.
I commented out the reducers and initial state related to this to solve my issue. So, be careful of how ngrx interacts with your url!

Angular 4 lazy load module doesn't work with named child outlet

I am trying to implement lazy loading for a module. This module has a bunch of child routes with a unique outlet name. This doesn't seem to work when I try to visit the routes.
This can be seems from this example that I saved: https://plnkr.co/edit/NNXAoZItM00RIIxzemts?p=preview
You can see that I have the child route set to
{ path: 'list', component: HeroListComponent, outlet: 'abc' },
in hero-routing.module.ts
and router outlet to:
<router-outlet name="abc"></router-outlet>
in hero.component.ts
I should be able to visit localhost:3000/heroes/(abc:list) when I am running it locally, but it doesn't seem to work.
Note: You can run the plunker example locally by download the zip file and running npm install then npm start.

The child routes do not seem to work with default unamed routes.
Change the lazy loaded module routes to include a redirect from default unamed route to a named route.
const routes: Routes = [
{ path: '', redirectTo: 'start', pathMatch: 'full' },
{ path: 'start', component: HeroComponent,
children: [
{ path: 'list', component: HeroListComponent, outlet: 'abc' },
{ path: ':id', component: HeroDetailComponent }
]
}
];
Finally change the navigation link for 'heroes' lazy loaded module to include the named outlet information. Be sure to specify the complete url as '/heroes/start', do not leave it to the default '/heroes'.
<a [routerLink]="['/heroes/start',{outlets: {abc:['list']}}]"
routerLinkActive="active">Heroes</a>