Children routing is not working on browser refresh in angular4. Please anybody help me.
Main Routing :
{
path: 'todo',
loadChildren: 'app/todo/todo.module#TodoModule',
canActivate: [AuthGuard],
data: {
required_scope: "todo"
}
}
}
Child Routing :
import { Routes, RouterModule } from "#angular/router";
import { ModuleWithProviders } from "#angular/core";
import { TodoComponent } from "./todo.component";
import { TodoDetailsComponent } from "./todo-details/todo-details.component";
const routes: Routes = [
{
path: '',
component: TodoComponent,
children: [{
path: ':id',
component: TodoDetailsComponent
}]
}
];
export const TodoRouting: ModuleWithProviders = RouterModule.forChild(routes);
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.
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 have the following url structure:
http://localhost:4200/foo/:fooId/(bar:barId//baz:bazId)
And the following router config:
{
path: 'foo',
children: [
{
path: ':fooId',
component: fooComponent,
children: [
{
path: ':fooId',
component: FooComponent
},
{
path: ':barId',
component: BarComponent,
outlet: 'bar'
},
{
path: ':bazId',
component: BazComponent,
outlet: 'baz'
}
]
}
]
}
If I am at http://localhost:4200/foo/0/(bar:1//baz:2), inside the BazComponent, how can I retrieve the barId parameter from the bar outlet?
import { ActivatedRoute } from '#angular/router';
params: any[] = [];
constructor(private route:ActivatedRoute) {
this.route.parent.children.forEach(children => {
this.params.push(children.snapshot.params);
});
}
ngOnInit() {
console.log(params);
}
// This returns:
// [
// { bar: barId },
// { baz: bazId }
// ]
Use this:
import {ActivatedRoute} from '#angular/router';
constructor(private route:ActivatedRoute){}
barId:number;
ngOnInit(){
// 'bar' is the name of the route parameter
this.barId = this.route.snapshot.params['bar'];
}
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/