I have two basic two basic NgModules and routing ones as well in this app, core (for header, footer and home pages) and an auth for authentication basically. without using the wildcard the app routes perfectly between components. once I introduce the invalid routing the only component that loads is the home one.
I am routing from my header component, i.e. routerLink="/signin"
any idea why is this happening?
The following is my code,
CoreModule
#NgModule({
declarations: [
HeaderComponent,
FooterComponent,
SidenavLeftComponent,
HomeComponent
],
imports: [
CommonModule,
BrowserModule,
BrowserAnimationsModule,
MDBBootstrapModule.forRoot(),
MDBBootstrapModulePro.forRoot(),
NgbModule.forRoot(),
AppRoutingModule
],
exports: [
HeaderComponent,
FooterComponent,
SidenavLeftComponent,
HomeComponent,
AppRoutingModule
],
schemas: [ NO_ERRORS_SCHEMA ]
})
export class CoreModule { }
AppRoutingModule
const appRoutes: Routes = [
{ path: '', redirectTo: 'home' , pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: 'not-found', component: NotFoundComponent, data: { message: 'We Could Not Serve Your Request!'}},
{ path: '**', redirectTo: '/not-found', pathMatch: 'full'}
];
#NgModule({
imports: [
RouterModule.forRoot(appRoutes, {preloadingStrategy: PreloadAllModules})
],
exports: [RouterModule]
})
export class AppRoutingModule {
}
AuthModule
#NgModule({
declarations: [
SigninFormComponent,
SignupRequestFormComponent,
],
imports: [
CommonModule,
FormsModule,
BrowserModule,
BrowserAnimationsModule,
MDBBootstrapModule,
MDBBootstrapModulePro,
NgbModule,
AuthRoutingModule
]
})
export class AuthModule { }
AuthRoutingModule
const authRoutes: Routes = [
{ path: 'signin', component: SigninFormComponent },
{ path: 'signup', component: SignupRequestFormComponent }
];
#NgModule({
imports: [
RouterModule.forChild(authRoutes)
],
exports: [RouterModule]
})
export class AuthRoutingModule { }
AppModule
#NgModule({
declarations: [
AppComponent,
ErrorPageComponent,
NotFoundComponent,
],
imports: [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
HttpModule,
CoreModule,
AuthModule,
AppRoutingModule
],
providers: [
MDBSpinningPreloader,
UserService,
ConfigService,
AuthGuard,
{ provide: Http, useClass: AuthenticatedHttpService }
],
bootstrap: [AppComponent],
})
export class AppModule { }
AppModule
#NgModule({
.....
imports: [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
HttpModule,
CoreModule,
AuthModule,
AppRoutingModule
],
You are loading CoreModule first, so your AppRoutingModule is loaded first and every invalid routes and the routes which are not defined there are being redirected to your widlcard expression.
const appRoutes: Routes = [
{ path: '', redirectTo: 'home' , pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: 'not-found', component: NotFoundComponent, data: { message: 'We Could Not Serve Your Request!'}},
{ path: '**', redirectTo: '/not-found', pathMatch: 'full'}
];
So either you should load AuthModule before CoreModule in AppModule declarations or remove wildcard expression from AppRoutingModule and put it inside AuthRoutingModule.
Related
Considering the image, I have a component (1) + module (2) + routing (3)(in "app-routing.module.ts"). To avoid too much code in "app-routing.module.ts", I want to move the routing code (3) in other file (suppose "product.routes.ts"). How can I do this considering I'm using Angular 2? Thanks!
This would be the AppComponentRoutingModule which I use, which can be extended with further files, usually that is one routes file per nested routing (to be imported in the corresponding module). The components and routes may vary, but it generally works alike this (guards skipped for the sake of brevity):
Create src/app/routes/app.routes.ts with content alike:
import { Routes } from '#angular/router';
import { ErrorPage } from 'src/app/pages/error/error.page';
export const appRoutes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full' }, // main entry point.
{ path: 'home', loadChildren: () => import('src/app/pages/home/home.module').then(m => m.HomeModule) },
{ path: 'error/:id', component: ErrorPage, pathMatch: 'full' },
{ path: '**', redirectTo: '/error/404' }
];
The nested routes don't look much different, for example src/app/routes/home.routes.ts:
export const homeRoutes: Routes = [{
path: '',
component: HomePage,
children: [
...
]
}];
Create src/app/app.component.routing.module.ts with content alike:
import { NgModule } from '#angular/core';
import { PreloadAllModules, RouterModule } from '#angular/router';
import { appRoutes } from './routes/app.routes';
#NgModule({
imports: [
RouterModule.forRoot(appRoutes,{preloadingStrategy: PreloadAllModules})
],
exports: [ RouterModule ]
})
export class AppComponentRoutingModule {}
Then import AppComponentRoutingModule in app.module.ts:
import { RouterModule } from '#angular/router';
import { AppComponent } from 'src/app/app.component';
import { AppComponentRoutingModule } from 'src/app/app.component.routing.module';
...
#NgModule({
declarations: [ AppComponent ],
imports: [
RouterModule,
AppComponentRoutingModule,
...
],
bootstrap: [ AppComponent ]
})
export class AppModule {}
In order to enable verbose logging, enableTracing: true is your friend.
I want to eager load a component MyComponent.
AppModule imports SharedModule and AppRoutingModule,
SharedModule declares MyComponent,
AppComponent is bootstrapped.
app-routing.module.ts
const routes: Routes = [
{ path: home/comp, component: MyComponent }
{ path: home, loadChildren: () => import('./mymodule/mymodule.module')
.then(x => x.MyModule)},
]
#NgModule({
imports: [
RouterModule.forRoot(routes)
]
MyComponent is also a childroute in MyModule:
#NgModule({
imports: [
SharedModule,
RouterModule.forChild([
{
path: 'home/comp',
component: MyComponent
}
]
}
But MyComponent is not eager loaded. As I am also mixing with lazy loading certain modules, is it possible I am overwriting things?
Official documentation is not too clear to me.
I have tried
adding:
data:{preload:true}
to the paths declared in routermodule
used:
loadChildren: () => import('./mycomponent/mycomponent.cmpnt').then(x => x.MyComponent)
both in AppModule as in MyComponent it was not successful. What am I doing wrong? Thanks
Here i'm using angular2 Here i Register EditEmployeeByIdComponent in EmployeeModule when user Click on that URL its shoud Redirect me to that Componet
EditEmployeeByIdComponent
import { Component } from "#angular/core"
#Component({
templateUrl:'../../ui/employee/EditEmployee.html'
})
export class EditEmployeeByIdComponent {
}
I Registerd EditEmployeeByIdComponent in EmployeeModule
#NgModule({
imports: [RouterModule.forChild(EmployeeRoute), FormsModule, CommonModule, HttpModule],
declarations: [EmployeeComponent, EditEmployeeByIdComponent],
bootstrap: [EmployeeComponent],
providers: [EmployeeService]
})
export class EmployeeModule {
}
From this Im calling
<tr *ngFor="let emp of employee">
<a (click)="GetById(emp.Emp_Id)"> {{emp.EmpName}} </a>
</tr>
GetById(Id:number) {
this._router.navigate(['../editemployeebyidcomponent'], {})
}
you have to provide router outlet in you parent component so allow angular to render child on it so in your example you have to declare a parent component lets say Employee.component.ts and it's equivalent template Employee.component.html and inside .html write that directive don't forget to declare this parent inside your EmployeeModule
const employeeRoutes: Routes = [
{path : 'employee', component: EmployeeComponent,children: [
{path : 'editemployeebyidcomponent', component: EditEmployeeByIdComponent},
];
#NgModule({
imports: [
CommonModule,
RouterModule.forChild(employeeRoutes)
],
declarations: [
EmployeeComponent,EditEmployeeByIdComponent
],
exports :[RouterModule]
})
export class EmployeeModule { }
employee.component.html
<router-outlet></router-outlet>
app.module.ts
const appRouts: Routes = [
{path: 'employee' , component: EmployeeComponent}
];
#NgModule({
imports: [
BrowserModule,
RouterModule.forRoot(appRouts),
],
declarations: [ App ],
bootstrap: [ App ]
})
export class AppModule {}
your navigation route inside parent component should be like that
GetById(Id:number) {
this._router.navigate(['../editemployeebyidcomponent'],{relativeTo: this.currentActivatedRoute})
}
Either you make the route absolute
GetById(Id:number) {
this._router.navigate(['/editemployeebyidcomponent'])
}
Angular2 LazyLoading When i click on Link its Loading Its component,Htmlpages,Modules But not display Html page in <router-outlet>
Masterpage
<a [routerLink]="['Customer/Add']">Customer</a><br />
<a [routerLink]="['Employee/Add']">Employee</a><br />
<router-outlet>
</router-outlet>
CustomerComponent
import { Component } from "#angular/core"
#Component({
templateUrl: '../../ui/customer/customer.html'
})
export class CustomerComponent {
}
CustomerModule
#NgModule({
imports: [RouterModule.forChild(CustomerRoute), ReactiveFormsModule, CommonModule, ReactiveFormsModule, FormsModule, HttpModule],
declarations: [CustomerComponent],
bootstrap: [CustomerComponent]
})
export class CustomerModule {
}
CustomerRoute
import { Component } from "#angular/core"
import { CustomerComponent } from "../components/customer/customercomponent"
export const CustomerRoute = [
{ path: "Add", Component: CustomerComponent}
]
MainRoute
import { Component } from "#angular/core"
import { Routes } from "#angular/router"
import { HomePageComponent } from "../components/homepage/homepage"
export const ApplicationRoutes= [
{ path: '', component: HomePageComponent },
{ path: 'UI/MasterAngularPage.html' ,component: HomePageComponent },
{ path: 'Customer', loadChildren: '../modules/customermodule/customermodule#CustomerModule'},
]
Use following code to redirect on add route.
export const CustomerRoute = [
{ path: "", redirectTo: "Add", pathMatch:"full"},
{ path: "Add", Component: CustomerComponent}
]
Remove bootstrap code from CustomerModule.
#NgModule({
imports: [RouterModule.forChild(CustomerRoute), ReactiveFormsModule, CommonModule, ReactiveFormsModule, FormsModule, HttpModule],
declarations: [CustomerComponent]
})
Hope it will help
I'm usung Angular 2 Universal:
I have a service:
import { Http, Response } from '#angular/http';
import { Observable } from 'rxjs/Observable';
import { Page } from './page';
#Injectable()
export class MyService {
constructor(private http: Http) { }
getPage(id: number): Observable<Page> {
return null;
}
}
Unit test:
import { TestBed, async, inject } from '#angular/core/testing';
import { PageService } from './workflow.service';
describe('Service: Workflow', () => {
beforeEach(() => {
TestBed.configureTestingModule({
providers: [WorkflowService]
});
});
it('should ...', inject([PageService], (service: PageService) => {
expect(service).toBeTruthy();
}));
});
My app module:
#NgModule({
bootstrap: [AppComponent],
declarations: [
AppComponent,
HomeComponent,
WorkflowComponent
],
imports: [
HttpModule,
UniversalModule, // Must be first import. This automatically imports BrowserModule, HttpModule, and JsonpModule too.
RouterModule.forRoot([
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: 'workflow/:id', component: WorkflowComponent }
])
]
})
export class AppModule {
}
When I run unit test I get: Error: No provider for Http!
UniversalModule in app.module should import http module already as indicated in the comments.
I'm using the latest Angular universal.
Should I add http in the test?
This article gave me an idea how to fix it:
http://chariotsolutions.com/blog/post/testing-angular-2-0-x-services-http-jasmine-karma/