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
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.
Hello guys First of all i am learning angular 5 for the first time. What i want is to redirect from page to another using a button.I don't know how to make it work.I am using angular 5. This is my code:
Home.component.html
<div style="text-align:center">
<button (click)="btnClick()">Add Employee</button>
</div>
<br>
<div style="text-align:center">
<button (click)="btnClick()">Employee List</button>
</div>
<br>
Home.component.ts
import { Component, OnInit } from '#angular/core';
import { Router } from '#angular/router';
#Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
constructor(private router: Router) {}
ngOnInit() {
}
btnClick(){
this.router.navigate(['/employees']);
}
}
I don't have route.config but what i have is app.module.ts if i am doing anything wrong please tell me
app.module.ts:
...........
import { HomeComponent} from './home/home.component';
import { RouterModule, Routes } from '#angular/router';
import { EmployeesComponent } from './employees/employees.component';
#NgModule({
declarations: [
AppComponent,
EmployeesComponent,
EmployeeComponent,
EmployeeListComponent,
AppHeaderComponent,
AppFooterComponent,
HomeComponent,
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
ToastrModule.forRoot(),
],
It seems like you need to configure your application's routes first so the router outlet knows what component to load when ['/employees'] is called
there is a good explanation under : https://angular.io/tutorial/toh-pt5
First, you must configure the route
import { HomeComponent} from './home/home.component';
import { RouterModule, Routes } from '#angular/router';
import { EmployeesComponent } from './employees/employees.component';
const routes: Routes = [
{ path: 'home', component: HomeComponent }
{ path: 'employees', component: EmployeesComponent }
{ path: '', redirectTo: 'home', pathMatch: 'full' }
];
#NgModule({
declarations: [
AppComponent,
EmployeesComponent,
EmployeeComponent,
EmployeeListComponent,
AppHeaderComponent,
AppFooterComponent,
HomeComponent,
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
ToastrModule.forRoot()
RouterModule.forRoot(routes),
],
then in your in your AppComponent HTML you need to use the router outlet (assuming you want your employees to show on the app component)
<router-outlet></router-outlet>
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'])
}
I have started a Visual Studio Community 2017 project using the Angular Single Page Application (SPA) template, as described in the .NET Web Development and Tools Blog:
https://blogs.msdn.microsoft.com/webdev/2017/02/14/building-single-page-applications-on-asp-net-core-with-javascriptservices/
2-way data binding using [(ngModel)] is not working.
For example:
In login.component.html:
<input [(ngModel)]="x" name="x"/>
<h1>{{x}}</h1>
In login.component.ts:
export class LoginComponent {
x = 5;
}
Result:
When I change the value in the input box, the text in the h1 tag should change as well. But it doesn't change.
I have already tried importing the FormsModule from #angular/forms and adding FormsModule to the imports for the #NgModule decorator in app.module.ts as noted here: Angular 2 two way binding using ngModel is not working.
More info (added 2017-06-12):
Note that the app module is divided up into three separate files
app.module.shared.ts:
import { NgModule } from '#angular/core';
import { RouterModule } from '#angular/router';
import { AppComponent } from './components/app/app.component'
import { NavMenuComponent } from './components/navmenu/navmenu.component';
import { HomeComponent } from './components/home/home.component';
import { FetchDataComponent } from
'./components/fetchdata/fetchdata.component';
import { CounterComponent } from './components/counter/counter.component';
import { LoginComponent } from './components/login/login.component';
//dcowan: for login page
import { TimeEntryComponent } from
'./components/timeentry/timeentry.component'; //dcowan: for time entry page
export const sharedConfig: NgModule = {
bootstrap: [ AppComponent ],
declarations: [
AppComponent,
NavMenuComponent,
CounterComponent,
FetchDataComponent,
HomeComponent,
LoginComponent, //dcowan: for login page
TimeEntryComponent //dcowan: for time entry page
],
imports: [
RouterModule.forRoot([
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: 'login', component: LoginComponent }, //dcowan: for login page
{ path: 'timeentry', component: TimeEntryComponent }, //dcowan: for time entry page
{ path: 'counter', component: CounterComponent },
{ path: 'fetch-data', component: FetchDataComponent },
{ path: '**', redirectTo: 'home' }
])
]
};
app.module.client.ts:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
//import { FormsModule } from '#angular/forms';
import { FormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import { sharedConfig } from './app.module.shared';
// dcowan: Imports for loading & configuring the in-memory web api
//import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
//import { InMemoryDataService } from './in-memory-data.service';
import { DemoDbService } from './demo-db.service';
#NgModule({
bootstrap: sharedConfig.bootstrap,
declarations: sharedConfig.declarations,
imports: [
BrowserModule,
//FormsModule,
FormsModule,
HttpModule,
...sharedConfig.imports
],
providers: [DemoDbService,//dcowan: Dovico Web API
{ provide: 'ORIGIN_URL', useValue: location.origin }
]
})
export class AppModule {
}
app.module.server.ts:
import { NgModule } from '#angular/core';
import { ServerModule } from '#angular/platform-server';
import { sharedConfig } from './app.module.shared';
import { FormsModule } from '#angular/forms';
#NgModule({
bootstrap: sharedConfig.bootstrap,
declarations: sharedConfig.declarations,
imports: [
FormsModule,
ServerModule,
...sharedConfig.imports
]
})
export class AppModule {
}
I am experiencing the same. Temporarily, I am breaking up 2 way binding into attribute and event binding.
<input [value]="x" (input)="x=$event.target.value">
<h1>{{x}}</h1>
I have this error too. Try to import your FormsModule in the app.module.shared instead of app.module.server and app.module.client
I fixed it like this using (keyup) and [ngModel]
(keyup)="onKey($event)"
[ngModel]="model.input"
in keyup we update model.input
public onKey(event: any) {
this.model.input = event.target.value;
}
If ngModel is used within a form tag, either the name attribute must be set or the form control must be defined as 'standalone' in ngModelOptions.
this code with property name:
<input name="nome" [(ngModel)]="nome" />
this code without property name:
<input [(ngModel)]="nome" [ngModelOptions]="{standalone: true}" />
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/