I have an Angular application that navigates to two routes:
http://localhost:8080/ /* Landing page */
http://localhost:8080/details/:id /* Result page */
Whenever I navigate to, for example, http://localhost:8080/details/4235. I'm met with the error: Cannot GET /details/4235
Here is how I setup my routes, in my:
app-routing.module.ts
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { LandingPage } from './components/landingpage/landingpage.component';
import { ResultPage } from './components/resultpage/resultpage.component';
import { TitleService } from './services/title.service';
const routes: Routes = [
{ path: '', component: LandingPage },
{
path: 'details/:id', component: ResultPage, pathMatch: 'full'
}
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
providers: [TitleService]
})
export class AppRoutingModule { }
Which I import into my:
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { HttpModule } from '#angular/http';
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms'; // <-- NgModel lives here
import { RouterModule, Routes } from '#angular/router';
import { AppComponent } from './app.component';
import { LandingPage } from './components/landingpage/landingpage.component';
import { ResultPage } from './components/resultpage/resultpage.component';
import { AppRoutingModule } from './app-routing.module';
#NgModule({
declarations: [
AppComponent,
LandingPage,
ResultPage
],
imports: [
BrowserModule,
FormsModule, // <-- import the FormsModule before binding with [(ngModel)]
HttpModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
I'm having trouble finding a working Angular 2 method of dealing with direct-linking to a url.
How can I setup direct linking in Angular 2, so that when I load, say, http://localhost:8080/details/4235 it loads my ResultPage component.
edit:
Loading http://localhost:8080/#/details/4235 , is valid, but it re-loads the LandingPage component. And I am trying to load the ResultPage component when there is an extended url.
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { LandingPage } from
'./components/landingpage/landingpage.component';
import { ResultPage } from
'./components/resultpage/resultpage.component';
import { TitleService } from './services/title.service';
const routes: Routes = [
{ path: '', component: LandingPage },
{
path: 'details/:id', component: ResultPage
}
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
providers: [TitleService]
})
export class AppRoutingModule { }
here you're loading the empty path first. Then the other paths will load. Update the empty path route. Keep it at last in the hierarchy.
Updated Code:
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { LandingPage } from '
./components/landingpage/landingpage.component';
import { ResultPage } from
'./components/resultpage/resultpage.component';
import { TitleService } from './services/title.service';
const routes: Routes = [
{
path: 'details/:id', component: ResultPage
},
{ path: '', component: LandingPage } //<-- here
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
providers: [TitleService]
})
export class AppRoutingModule { }
EDIT:
Also there might be problem that your browser doesn't support HTML5 pushState. I'm referring some SO links that might help out.
Configure history.pushState for Angular 2
enter link description here
Angular 2.0 router not working on reloading the browser
Related
I created a new component with 'ng generate component', but after pressing navigating the url the target view doesn't load, I don't know why. The url will be changed correctly but the view will be not changed.
export class AppComponent {
title = 'Overview';
constructor(private router: Router) { }
onPressStart($event){
this.router.navigate(['/start']);
}
}
app.module.ts:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { StartComponent } from './start/start.component';
#NgModule({
declarations: [
AppComponent,
StartComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app-routing.mdoules.ts:
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { StartComponent } from './start/start.component';
import {AppComponent} from './app.component';
const routes: Routes = [ {path: "", component:AppComponent}, {path: "start", component: StartComponent} ];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
The AppComponent and StartComponent should not be siblings like you did.
AppComponent is bootstrapped, that means it's your root component and you should not try to load it with a route.
So just put a <router-outlet></router-outlet> inside AppComponent which will act as a placeholder for route-loaded components.
Then remove AppComponent from the routes, and all of your routes will work.
i am facing this problem while creating the new project on MDB angular .
I have created multiple modules like public , tutor and student . public module is not lazy loaded while others are lazy loaded . public module is working perfect .
import { BrowserModule } from '#angular/platform-browser';
import { BrowserAnimationsModule } from '#angular/platform-
browser/animations';
import { NgModule, NO_ERRORS_SCHEMA } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { AgmCoreModule } from '#agm/core';
import { AppComponent } from './Main/app.component';
import { SharedModule } from './shared/shared.module';
import { AppRoutingModule } from './app-routing.module';
import { PublicModule } from './public/public.module';
import { PageNotFoundComponent } from './Main/page-not-found/page-not-
found.component';
import { ToastModule } from 'ng-uikit-pro-standard';
import { CoreModule } from './core/core.module';
#NgModule({
declarations: [
AppComponent,
PageNotFoundComponent
],
imports: [
PublicModule,
CoreModule,
AppRoutingModule,
BrowserModule,
ToastModule.forRoot(),
BrowserAnimationsModule,
FormsModule,
SharedModule,
AgmCoreModule.forRoot({
// https://developers.google.com/maps/documentation/javascript/get-api-
key?hl=en#key
apiKey: 'Your_api_key'
})
],
bootstrap: [AppComponent],
schemas: [ NO_ERRORS_SCHEMA ]
})
export class AppModule { }
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { PageNotFoundComponent } from './Main/page-not-found/page-not-
found.component';
const routes: Routes = [
{ path: 'tutor', loadChildren: './tutor/tutor.module#TutorModule' },
// { path: 'admin', loadChildren: './admin/admin.module#AdminModule' },
// { path: '**', component: PageNotFoundComponent}
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
import { NgModule } from '#angular/core';
import { TutorRoutingModule } from './tutor-routing.module';
import { SharedModule } from '../shared/shared.module';
import { TutorLayoutComponent } from './tutor-layout/tutor-
layout.component';
#NgModule({
declarations: [TutorLayoutComponent],
imports: [
SharedModule,
TutorRoutingModule
]
})
export class TutorModule { }
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { TutorLayoutComponent } from './tutor-layout/tutor-
layout.component';
const routes: Routes = [
{path: '', component: TutorLayoutComponent}
];
#NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class TutorRoutingModule { }
I want to lazy load all modules except my public module.But i don't know why it is showing me the message that Browser Module Is already loaded . i have already tried multiple tries to solve it .
I'm experimenting with Angular Lazy Load, I have a strange error, while one of the route work flawlessly, while the other (similar structure and implementation) give me an error.
Here is my simple code:
in app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { AppComponent } from './app.component';
const routes: Routes = [
{
path: 'customers',
loadChildren: 'app/customers/customers.module#CustomersModule'
},
{
path: 'orders',
loadChildren: 'app/orders/orders.module#OrdersModule'
},
{
path: '',
redirectTo: '',
pathMatch: 'full'
}
];
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
RouterModule.forRoot(routes)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
while in orders.module.ts
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { OrdersRoutingModule } from './orders-routing.module';
import { OrderListComponent } from './order-list/order-list.component';
#NgModule({
imports: [
CommonModule,
OrdersRoutingModule
],
declarations: [OrderListComponent]
})
export class OrdersModule { }
and in orders-routing.module.ts
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { OrderListComponent } from './order-list/order-list.component';
const routes: Routes = [
{
path: '',
component: OrderListComponent
}
];
#NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class OrdersRoutingModule { }
when i go to localhost:4200/orders everything works flawlessly, i.e. no error, and the lazy loading feature works as expected.
while in customers.module.ts
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { CustomersRoutingModule } from './customers-routing.module';
import { CustomerListComponent } from './customer-list/customer-list.component';
#NgModule({
imports: [
CommonModule,
CustomersRoutingModule
],
declarations: [CustomerListComponent]
})
export class CustomersModule { }
and in customers-routing.module.ts
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { CustomerListComponent } from './customer-list/customer-list.component';
const routes: Routes = [
{
path: '',
component: CustomerListComponent
}
];
#NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class CustomersRoutingModule { }
But when i go to localhost:4200/customers it will give me an error:
Error: Component CustomerListComponent is not part of any NgModule or the module has not been imported into your module.
Why is this happening only on customers route? How to fix this?
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 =[
I found a project ng2-admin from https://github.com/akveo/ng2-admin , and this is online demo http://akveo.com/ng2-admin/
I am confused about PagesModule bootstrap process. Default AppModule bootstrap, how did it contine show /#/pages/dashboard content?
In app.module.ts:
import { NgModule, ApplicationRef } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import { RouterModule } from '#angular/router';
import { NgbModule } from '#ng-bootstrap/ng-bootstrap';
import { TranslateService } from '#ngx-translate/core';
/*
* Platform and Environment providers/directives/pipes
*/
import { routing } from './app.routing';
// App is our top level component
import { App } from './app.component';
import { AppState, InternalStateType } from './app.service';
import { GlobalState } from './global.state';
import { NgaModule } from './theme/nga.module';
import { PagesModule } from './pages/pages.module';
// Application wide providers
const APP_PROVIDERS = [
AppState,
GlobalState
];
export type StoreType = {
state: InternalStateType,
restoreInputValues: () => void,
disposeOldHosts: () => void
};
/**
* `AppModule` is the main entry point into Angular2's bootstraping process
*/
#NgModule({
bootstrap: [App],
declarations: [
App
],
imports: [ // import Angular's modules
BrowserModule,
HttpModule,
RouterModule,
FormsModule,
ReactiveFormsModule,
NgaModule.forRoot(),
NgbModule.forRoot(),
PagesModule,
routing
],
providers: [ // expose our Services and Providers into Angular's dependency injection
APP_PROVIDERS
]
})
export class AppModule {
constructor(public appState: AppState) {
}
}
I know this file is app entrance.
in app.routing.ts file:
import { Routes, RouterModule } from '#angular/router';
import { ModuleWithProviders } from '#angular/core';
export const routes: Routes = [
{ path: '', redirectTo: 'pages', pathMatch: 'full' },
{ path: '**', redirectTo: 'pages/dashboard' }
];
export const routing: ModuleWithProviders = RouterModule.forRoot(routes, { useHash: true });
It only tell browser redirec to "#pages/dashboard", but there is no related component here.
In app.component.ts, the template is:
template: `
<main [class.menu-collapsed]="isMenuCollapsed" baThemeRun>
<div class="additional-bg"></div>
<router-outlet></router-outlet>
</main>
`
There is no other custom tags except router-outlet.
I am confused how to make main AppModule work with PagesModule in application.
Thanks very much.