When I go to localhost:4200, I'm expecting to be directed to AboutComponent (on the /home path), and am also expecting /home to be appended to the URL, but instead I'm getting redirected to the PageNotFoundComponent, and /home is not being appended to the URL. Any ideas what I'm doing wrong? Thank you!
app-routing.module.ts
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
import { AppComponent } from './app.component';
import { AboutComponent } from './about/about.component';
import { SignupComponent } from '../signup/signup.component';
const routes: Routes = [
{path: 'signup', component: SignupComponent },
{path: '' , redirectTo: '/home', pathMatch: 'full'},
{path: '**', component: PageNotFoundComponent}
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
app.module.ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { Router } from '#angular/router';
import { AppComponent } from './app.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
import { AdminModule } from './admin/admin.module';
import { AppRoutingModule } from './app-routing.module';
import { AboutModule } from './about/about.module';
#NgModule({
imports: [
BrowserModule,
FormsModule,
AboutModule,
AppRoutingModule
],
declarations: [
AppComponent,
PageNotFoundComponent
],
providers: [CookieService],
bootstrap: [AppComponent]
})
export class AppModule {
constructor(router: Router) {
}
}
about-routing.module.ts
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { AboutComponent } from './about.component';
import { PageNotFoundComponent } from '../page-not-found/page-not-found.component';
const aboutRoutes: Routes = [
{path: 'home', component: AboutComponent}
{path: '**', component: PageNotFoundComponent}
];
#NgModule({
imports: [RouterModule.forChild(aboutRoutes)],
exports: [RouterModule]
})
export class AboutRoutingModule { }
about.module.ts
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { AboutRoutingModule } from './about-routing.module';
import { AboutComponent } from './about.component';
#NgModule({
declarations: [AboutComponent],
imports: [
CommonModule,
AboutRoutingModule
]
})
export class AboutModule { }
App-routing module is the parent whereas about-routing module is child, So when you will get triggered with '/home' you need to tell the parent to load the child routes that will be done like
const routes: Routes = [
{path: 'signup', component: SignupComponent },
{path: '' , redirectTo: '/home', pathMatch: 'full'},
{
path: 'home',
loadChildren: './About/about.module.ts#AboutModule'
},
{path: '**', component: PageNotFoundComponent}
];
when we will provide 'loadChildren' in routes, then the parent will load the child module(About module), and routes forchild is called, then will work.
why it is failing because there no route is mentioned for '/home' in parent so it choose the
{path: '**', component: PageNotFoundComponent}
so pageNotFoundComponent is loaded
the problme is the
order
of your routing defintion array .. try this:
const routes: Routes = [
{path: '' , redirectTo: '/home', pathMatch: 'full'}, // as first
{path: 'signup', component: SignupComponent },
{path: '**', component: PageNotFoundComponent} // always as last
];
Related
I tried to create a 404 page on my Web Application, so I create the component and add the routes to the app-rouging.module.ts but the website is always redirected to the 404 page even if I enter "/home" in the URL.
The not-found component is in the public module, attached to a not-found module :
import { NgModule } from '#angular/core';
import { SharedModule } from 'src/app/shared/shared.module';
import { NotFoundComponent } from './not-found/not-found.component';
#NgModule({
declarations: [NotFoundComponent],
imports: [
SharedModule
]
})
export class NotFoundModule { }
public.module.ts :
import { NgModule } from '#angular/core';
import { PublicRoutingModule } from './public-routing.module';
import { SharedModule } from '../shared/shared.module';
import { MainPageComponent } from './main-page/main-page.component';
import { CookieInformationComponent } from './cookie-information/cookie-information.component';
import { LegaleInformationComponent } from './legale-information/legale-information.component';
import { MapComponent } from './map/map.component';
import { AgmCoreModule } from '#agm/core';
import { InnerHTMLComponent } from './inner-html/inner-html.component';
import { NotFoundModule } from './not-found/not-found.module';
#NgModule({
declarations: [MainPageComponent, CookieInformationComponent, LegaleInformationComponent, MapComponent, InnerHTMLComponent],
imports: [
SharedModule,
PublicRoutingModule,
AgmCoreModule,
NotFoundModule
]
})
export class PublicModule { }
I have 3 files for routing : app-routing, private-routing and public-routing :
app-routing.module.ts :
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { NotFoundComponent } from './public/not-found/not-found/not-found.component';
const APP_ROUTES: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: '**', component: NotFoundComponent }
];
#NgModule({
imports: [RouterModule.forRoot(APP_ROUTES)],
exports: [RouterModule]
})
export class AppRoutingModule { }
public-routing.module.ts
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { MainPageComponent } from '../public/main-page/main-page.component'
import { LegaleInformationComponent } from './legale-information/legale-information.component';
import { CookieInformationComponent } from './cookie-information/cookie-information.component';
const APP_ROUTES_PUBLIC: Routes = [
{ path: 'home', component: MainPageComponent },
{ path: 'legal', component: LegaleInformationComponent },
{ path: 'cookie', component: CookieInformationComponent }
];
#NgModule({
imports: [RouterModule.forChild(APP_ROUTES_PUBLIC)],
exports: [RouterModule]
})
export class PublicRoutingModule { }
private-routing.module.ts
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { AdminComponent } from './admin/admin/admin.component';
import { UploadFileComponent } from './admin/upload-file/upload-file.component';
import { QRCreateComponent } from './admin/qr-code-management/create/create.component';
import { QRUpdateComponent } from './admin/qr-code-management/update/update.component';
const APP_ROUTES_PRIVATE: Routes = [
{ path: 'admin', component: AdminComponent },
{ path: 'admin/upload-file', component: UploadFileComponent },
{ path: 'admin/qr-code-management/create', component: QRCreateComponent },
{ path: 'admin/qr-code-management/update', component: QRUpdateComponent }
];
#NgModule({
imports: [RouterModule.forChild(APP_ROUTES_PRIVATE)],
exports: [RouterModule]
})
export class PrivateRoutingModule {
Look at your app routing module declaration:
const APP_ROUTES: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: '**', component: NotFoundComponent }
];
If someone goes to, for example 'http://localhost:3000/', you redirect him to 'http://localhost:3000/home'. But you don't have route declaration for 'home' path, so router will display NotFoundComponent.
You need to add declaration for 'home' path. For example:
const APP_ROUTES: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: 'home',
loadChildren: () => import('./public.module').then(m => m.PublicModule) },
{ path: '**', component: NotFoundComponent }
];
Note 1: you need to have route with path: '' in PublicModule to make it work. Probably you have to change path 'home' to simple empty path.
Note 2: I'm assuming you want to lazy load your modules. You can read more about it: https://angular.io/guide/lazy-loading-ngmodules
I'm creating an application with Angular 9 where I've created a separate routing module for the admin purpose and calling it in app.module to initialize. But for some reason the routes are not getting called and and the below error is coming in the console.
ERROR Error
Angular 11
resolvePromise
resolvePromise
scheduleResolveOrReject
invokeTask
onInvokeTask
invokeTask
runTask
drainMicroTaskQueue
invokeTask
invoke
timer
core.js:3872
I've created child modules like this in previous versions of Angular and it worked perfectly. You can check my github repository if you want to https://github.com/tridibc2/sample-angular. Have a look at my modules below
AdminModule:
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { Routes, RouterModule } from '#angular/router';
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
import { AdminComponent } from '../admin/admin.component';
import { SignupComponent } from '../signup/signup.component';
import { LoginComponent } from '../login/login.component';
import { ManageBlogsComponent } from '../manage-blogs/manage-blogs.component';
const routes: Routes = [
{ path: 'signup', component: SignupComponent },
{ path: 'login', component: LoginComponent },
{ path: 'admin', component: AdminComponent },
{ path: 'admin/blog', component: ManageBlogsComponent }
];
#NgModule({
declarations: [
AdminComponent,
SignupComponent,
LoginComponent,
ManageBlogsComponent
],
imports: [
RouterModule.forChild(routes),
CommonModule,
FormsModule,
ReactiveFormsModule
],
exports: [RouterModule]
})
export class AdminModule { }
app.module.ts:
import { BrowserModule } from '#angular/platform-browser';
import { HttpClientModule } from '#angular/common/http';
import { CommonModule } from '#angular/common';
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { NgbModule } from '#ng-bootstrap/ng-bootstrap';
import { RouterModule } from '#angular/router';
import { ClientModule } from './client/client-routing/client.module';
import { AdminModule } from './admin/admin-routing/admin.module';
import { AppRoutingModule } from './app.routing';
import { AppComponent } from './app.component';
#NgModule({
declarations: [
AppComponent ],
imports: [
BrowserModule,
CommonModule,
NgbModule,
ClientModule,
AdminModule,
AppRoutingModule,
FormsModule,
RouterModule ],
bootstrap: [AppComponent]
})
export class AppModule { }
app.routing.ts:
import { NgModule } from '#angular/core';
import { CommonModule, } from '#angular/common';
import { BrowserModule } from '#angular/platform-browser';
import { Routes, RouterModule } from '#angular/router';
import { BlogHomeComponent } from './client/blog-home/blog-home.component';
const routes: Routes =[
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', component: BlogHomeComponent }
];
#NgModule({
imports: [
CommonModule,
BrowserModule,
RouterModule.forRoot(routes,{
useHash: true
})
],
exports: [
],
})
export class AppRoutingModule { }
Simple example for routing of eager loaded module.
Ref of atleast one component is required in parent module and which is mostly a component that has router-outlet tag to render child module routes.
...
const routes: Routes = [
{
path: '',
component: CompWhichHasRouterOutletTag,
children:[
{path: '', redirectTo: 'signup', pathMatch: 'full'},
{ path: 'signup', component: SignupComponent },
{ path: 'login', component: LoginComponent },
{ path: 'admin', component: AdminComponent },
{ path: 'admin/blog', component: ManageBlogsComponent }]
}
];
#NgModule({
declarations: [
CompWhichHasRouterOutletTag,
AdminComponent,
SignupComponent,
LoginComponent,
ManageBlogsComponent
],
imports: [
RouterModule.forChild(routes),
CommonModule,
FormsModule,
ReactiveFormsModule
],
exports: [RouterModule, CompWhichHasRouterOutletTag]
})
export class AdminModule { }
app.routing.ts file
const routes: Routes = [
{ path: '', redirectTo: '/home/', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: 'contact', component: ContactComponent },
{ path: 'admin-route', component: CompWhichHasRouterOutletTag },
]
#NgModule({
imports: [
...
RouterModule.forRoot(routes),
...
]
})
When I select the initial component of the upload in my function module GalleryModuleModule this component GalleryComponent
I get this error:
Invalid configuration of route '': Array cannot be specified (all components are in the GalleryModuleModule). Tell me what am I doing wrong and how to solve this problem?
app.module:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
import { GalleryModuleModule } from './gallery-module/gallery-module.module';
#NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
GalleryModuleModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
}
app.component.html:
<div class="container">
<router-outlet></router-outlet>
</div>
gallery-module.module:
import {NgModule} from '#angular/core';
import {CommonModule} from '#angular/common';
import {GalleryComponent} from "./gallery/gallery.component";
import {GalleryAddComponent} from './gallery/gallery-add/gallery-add.component';
import {RouterModule, Routes} from "#angular/router";
const appRoutes: Routes = [
{path: '', redirectTo: '/gallery', pathMatch: 'full'},
{path: 'gallery-add', component: 'GalleryAddComponent'},
];
#NgModule({
imports: [
CommonModule,
RouterModule.forRoot([
appRoutes,
{enableTracing: true}
])
],
declarations: [GalleryComponent, GalleryAddComponent],
exports: [GalleryComponent, GalleryAddComponent RouterModule],
})
export class GalleryModuleModule {
}
You did {path: '', redirectTo: '/gallery', pathMatch: 'full'}, while in fact you dont have a path named gallery that should be redirected to.
For exemple changing your route configuration to:
const appRoutes: Routes = [
{path: '', redirectTo: '/gallery', pathMatch: 'full'},
{path: 'gallery', component: GalleryComponent},
{path: 'gallery-add', component: GalleryAddComponent},
];
and removing the extra array inside RouterModule.forRoot() (https://angular.io/api/router/RouterModule#forRoot) (as mentioned by #Suresh ) should work !
PS: do not forget to import the components listed in your route config (they should not be quoted as strings)
See, RouterModule.forRoot() needs to be defined only in App.module.ts which is the root router module. But you are defining those root routes in Your Child Module 'GalleryModuleModule' which is imported in to app.module.ts.
import {NgModule} from '#angular/core';
import {CommonModule} from '#angular/common';
import {GalleryComponent} from "./gallery/gallery.component";
import {GalleryAddComponent} from './gallery/gallery-add/gallery-add.component';
import {RouterModule, Routes} from "#angular/router";
const appRoutes: Routes = [
{path: '', redirectTo: '/gallery', pathMatch: 'full'},
{path: 'gallery-add', component: 'GalleryAddComponent'},
];
#NgModule({
imports: [
CommonModule,
RouterModule.forRoot(
appRoutes,
{enableTracing: true}
)
],
declarations: [GalleryComponent, GalleryAddComponent],
exports: [GalleryComponent, GalleryAddComponent RouterModule],
})
export class GalleryModuleModule {
}
Using angular 4, I am redirecting the route with an empty path to navbar component. So I have added pathMatch: full and I placed this entry at the top in routes array.
But I still get the following error:
zone.js:522 Unhandled Promise rejection:
Invalid configuration of route '': Array cannot be specified ;
Zone: root ;
Task: Promise.then ;
Value: ZoneAwareError {
__zone_symbol__error: Error: Invalid configuration of route '': Array
cannot be specified
at Zone.run (http://localhost:4200/polyfills.bundle.js:6405:43) [ => angular]
route.component.ts
import {Route} from '#angular/router';
import { AppComponent } from './app.component';
import {NavbarComponent} from './navbar/navbar.component';
import {RegistrationComponent} from './registration/registration.component';
export const appRoutes:Route =[
{
path: '',
redirectTo: 'navbar',
pathMatch: 'full'
}, {
path: 'home',
component: NavbarComponent
}, {
path: 'navbar',
component: NavbarComponent
}, {
path: 'registration',
component: RegistrationComponent
}
];
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import { RouterModule } from '#angular/router';
import { AppComponent } from './app.component';
import {NavbarComponent} from './navbar/navbar.component';
import {RegistrationComponent} from './registration/registration.component';
import { appRoutes } from './app.route';
#NgModule({
declarations: [
AppComponent,
NavbarComponent,
RegistrationComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
RouterModule.forRoot([appRoutes])
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Just change
From
RouterModule.forRoot([appRoutes])
To
RouterModule.forRoot(appRoutes)
export const appRoutes: Route[] = [
instead of
export const appRoutes:Route =[
The problem is when directly redirecting to
http://localhost:4200/about working fine but after pushing into
nginx server, when I try to redirect to www.webpage.com/about
getting error(nginx 404 error).
But its working fine when you redirect to www.webpage.com and then click on about.
Getting error only I am trying to open direct url as www.webpage.com/about or www.webpage.com/contact or
www.webpage.com/blog
import { NgModule } from '#angular/core';
import { HttpModule } from '#angular/http';
import { RouterModule } from "#angular/router";
import { BrowserModule } from '#angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
import { AppComponent } from './app.component';
import { appRoutes } from "./app-routing.module";
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { BlogComponent } from './blog/blog.component';
import { ClientsComponent } from './clients/clients.component';
import { ContactComponent } from './contact/contact.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
#NgModule({
declarations: [
AppComponent,
HomeComponent,
AboutComponent,
BlogComponent,
ClientsComponent,
ContactComponent,
PageNotFoundComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpModule,
FormsModule,
ReactiveFormsModule,
RouterModule.forRoot(appRoutes)
],
providers: [
],
bootstrap: [AppComponent]
})
export class AppModule {
}
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
import { ClientsComponent } from './clients/clients.component';
import { ContactComponent } from './contact/contact.component';
import { BlogComponent } from './blog/blog.component';
export const appRoutes: Routes = [
{ path: '', redirectTo: '/', pathMatch: 'full' },
{ path: '', component: HomeComponent },
{ path: 'about', component: AboutComponent },
{ path: 'clients', component: ClientsComponent },
{ path: 'contact', component: ContactComponent },
{ path: 'blog', component: BlogComponent },
{ path: 'page-not-found', component: PageNotFoundComponent },
{ path: '**', component: HomeComponent }
];
#NgModule({
imports: [
RouterModule.forRoot(appRoutes)
],
exports: [
RouterModule
]
})
export class AppRoutingModule {
}
You will need to configure your web server to redirect all unknown (404) requests to index.html, which will allow the Angular application to then route your user to the desired route/view.
You can try something like this :
error_page 404 =200 /index.html;
Source : How do I force redirect all 404's (or every page, whether invalid or not) to the homepage?
try_files $uri $uri/ /index.html;
This line has to be added in the nginx.conf incase of Windows server or in /etc/nginx/sites-enabled/default in case of ubuntu server.
That piece of code will look for angular paths before throwing a 404 error.
angular deployment check this out