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
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'm going (using routerLink) to a details page of an object, but instead of the ID, it appears undefined, and don't know how to do it correctly, this is my code:
Tab routing
{
path: 'book/:id',
loadChildren: '../book-detail/book-detail.module#BookDetailPageModule',
pathMatch: 'full'
}
Page A (FROM):
...
bookId = null
bookRef: AngularFirestoreDocument
constructor(
private route: ActivatedRoute,
private af: AngularFirestore,
private service: BookService
) { }
...
HTML
<ion-card [routerLink]="['/book/', id]" routerDirection="forward">
Page B (TO):
...
ngOnInit() {
this.bookId = this.route.snapshot.paramMap.get('id');
if (this.bookId) {
this.loadBook(this.bookId);
}
}
loadBook(bookId) {
this.af.collection<Book>('books')
.doc<Book>(bookId)
.valueChanges()
.subscribe(data => {
this.book = data
});
}
...
The error I'm getting is:
ERROR Error: Uncaught (in promise): FirebaseError: [code=not-found]:
No document to update:
projects/books-29320f/databases/(default)/documents/books/undefined
FirebaseError: No document to update:
projects/books-29320f/databases/(default)/documents/books/undefined
On my url on my detailspage of the book it says: http://localhost:8100/book/undefined
UPDATED 2:
Book detail module:
const routes: Routes = [
{
path: '',
component: BookDetailPage
}
];
#NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes)
],
declarations: [BookDetailPage]
})
export class BookDetailPageModule {}
You should add :id to BookDetailPage path in BookDetailPageModule :
const routes: Routes = [
{
path: ':id',
component: BookDetailPage
}
];
#NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes)
],
declarations: [BookDetailPage]
})
export class BookDetailPageModule {}
FINALLY RESOLVED:
I didn't know about it's just to put this code:
<ion-card [routerLink]="['book/', book.id]" routerDirection="forward">
Instead of what I did (see on my question)
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/