Few days ago everything worked, then I created few more routes and since that moment Angular stopped rendering templates. There is no errors, it navigates URL in browser but no template..
Here is the routing module:
const AppRoutes: Routes = [
{ path: '', component: BlogListComponent },
{ path: ':id', component: BlogDetailComponent },
{ path: 'new', component: BlogAddComponent },
{ path: ':id/edit', component: BlogEditComponent },
{ path: 'register', component: RegisterComponent },
{ path: 'login', component: LoginComponent }
];
#NgModule({
imports: [
CommonModule,
RouterModule.forRoot(AppRoutes)
],
exports: [
RouterModule
],
declarations: []
})
export class RoutingModule { }
App module:
#NgModule({
declarations: [
AppComponent,
HeaderComponent,
BlogDetailComponent,
RegisterComponent,
LoginComponent,
BlogListComponent,
BlogAddComponent,
BlogEditComponent
],
imports: [
BrowserModule,
RoutingModule,
NgbModule.forRoot(),
HttpClientModule,
FormsModule,
ReactiveFormsModule
],
exports: [
RouterModule
],
providers: [RouterModule, AuthService, PostService],
bootstrap: [AppComponent]
})
export class AppModule { }
I believe there is problem with forms. I tried to change this.formBuilder.group to new FormGroup but it doesn't change anything.
Related
On the left-side menu I need to have the links highlighted when the user on them. Now it works but my root path 'li' of the menu is highlighted as well.
I cannot set up a child routing Module.
left-side-menu html
<ul class='side-menu'>
<li *ngFor='let item of menu' routerLinkActive='active-side-menu-item'><a routerLink='{{ item.link }}' class="menu-item-feed">{{ item.title }}</a></li>
</ul>
app.routing.module ts
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { FeedComponent } from './feed/feed.component';
const routes: Routes = [
{ path: '', pathMatch: 'full', component: FeedComponent },
{ path: 'shoes', pathMatch: 'full', component: FeedComponent },
{ path: 'coats', pathMatch: 'full', component: FeedComponent },
{ path: 'shirts', pathMatch: 'full', component: FeedComponent },
{ path: 'pants', pathMatch: 'full', component: FeedComponent },
{ path: 'item/:id', component: FeedComponent },
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
That's how I tried to implement my childRoutingModule but it throws the error in the console: core.js:15724 ERROR Error: Uncaught (in promise): TypeError: undefined is not a function
TypeError: undefined is not a function
at Array.map ()
app.routing.module
const routes: Routes = [
{ path: '', pathMatch: 'full', loadChildren: './feed/feed.module#FeedModule' }
];
feed-routing.module
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { FeedComponent } from './feed.component';
const routes: Routes = [
{ path: '', pathMatch: 'full', component: FeedComponent },
{ path: 'shoes', pathMatch: 'full', component: FeedComponent },
{ path: 'coats', pathMatch: 'full', component: FeedComponent },
{ path: 'shirts', pathMatch: 'full', component: FeedComponent },
{ path: 'pants', pathMatch: 'full', component: FeedComponent },
{ path: 'item/:id', component: FeedComponent },
];
#NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class FeedRoutingModule { }
I want to have a separate routing module for each gross section on the site and I need link react to the url and indicate which module is active at the moment.
I would appreciate any other hints and best practices!
To setup feature route you have to import FeedRoutingModule into the module you want to use thoose route.
Below is my example
I have app.routing.ts (Main route)
export const routes: Routes = [
{ path: "", redirectTo: "home", pathMatch: "full" },
{ path: "home", component: HomeComponent },
//{ path: "**", redirectTo: "account", pathMatch: "full" },
//lazy load feature module
{ path: "account", loadChildren: "./account/account.module#AccountModule" },
{ path: "portal", loadChildren: "./portal/portal.module#PortalModule", canActivate: [AuthGuardService] },
{ path: "**", redirectTo: "account", pathMatch: "full" },
];
and app.module.ts
#NgModule({
declarations: [],
imports: [
RouterModule.forRoot(routes)
],
providers: [],
bootstrap: []
})
export class AppModule {}
So when I define child route in my feature module I have to done the same like app.module but using RouterModule.forChild
export const accountRoutes: Routes = [
{
path: "",
component: AccountComponent,
children: [
{ path: "login", component: LoginComponent },
{ path: "register-account", component: RegisterComponent }
]
}
];
import { NgModule } from "#angular/core";
import { CommonModule } from "#angular/common";
import { FormsModule, ReactiveFormsModule } from "#angular/forms";
import { RouterModule } from "#angular/router";
import { RegisterComponent } from "./register/register.component";
import { LoginComponent } from "./login/login.component";
import { AccountComponent } from "./account/account.component";
import { accountRoutes } from "./account.routing";
#NgModule({
declarations: [],
imports: [
RouterModule.forChild(accountRoutes) // use forChild
],
exports: [],
providers: []
})
export class AccountModule {}
Your paranet component need have tag: < router-outlet>< /router-outlet> then he knows will have a child component + route;
Here a exemple where i management childRoutes.
{
path: 'utente',
component: CenterViewComponent,
children: [
YYY_ROUTE,
XXX_ROUTE
...
]
}
Hope help u!
I have an Angular 4 application with login and registration page and then we I have this interface to manage my employees and stuff like that.
I want to launch my application on a specific page which is login page, like:
http://localhost:4200/login
How to make login page appear once Angular is started and the URL contains /login segment in it ?
here is my app.module.ts file:
import { UserService } from './user.service';
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { HttpModule } from '#angular/http';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { MatButtonModule, MatCardModule, MatMenuModule, MatToolbarModule, MatIconModule, MatInputModule,MatAutocompleteModule } from '#angular/material';
import { MatFormFieldModule } from '#angular/material';
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
import { AppComponent } from './app.component';
import { UserComponent } from './user/user.component';
import { RouterModule } from '#angular/router';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';
// Define the routes
#NgModule({
declarations: [
AppComponent,
UserComponent,
HomeComponent,
LoginComponent
],
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
HttpModule ,
RouterModule.forRoot([
{
path: 'home',
component: HomeComponent
},
{
path: 'users',
component: UserComponent
}
{
path: 'login',
component: LoginComponent
}
]),
BrowserAnimationsModule,
MatButtonModule,
MatCardModule,
MatMenuModule,
MatToolbarModule,
MatIconModule,
MatInputModule,
MatFormFieldModule,
MatAutocompleteModule
],
providers: [UserService],
bootstrap: [AppComponent]
})
export class AppModule { }
Use Empty-path route configurations
Add
{path: '' , redirectTo:'/login',pathMatch:'full'} to your routes.
Try this in to your routes
{ path: '**', redirectTo: '/login', pathMatch: 'full' }
I'm having a problem with Angular Universal, although all guides are different (the official one seems outdated aswell) I've managed to run node.js server with server side rendering.
There's still a huge problem which I can't solve, because I actually have no idea on what's going on
This is the app.module.ts
#NgModule({
declarations: [
AppComponent
],
imports: [
HttpClientModule,
BrowserModule.withServerTransition({
appId: 'ta-un-certificate'
}),
RouterModule.forRoot([{
path: '', loadChildren: './page/page.module#PageModule'
}], {
enableTracing: false,
useHash: false
}),
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
})
],
providers: [
SeoService,
DataService, {
provide: HTTP_INTERCEPTORS,
useClass: HttpErrorInterceptor,
multi: true
}],
bootstrap: [
AppComponent
]
})
It simply loads another module, PageModule with its components and stuff
#NgModule({
imports: [
CommonModule,
TranslateModule,
RouterModule.forChild([{
path: ':name/:id', component: PageComponent
}, {
path: '', pathMatch: 'full', component: RedirectComponent
}])
],
declarations: [
RedirectComponent,
PageComponent,
BannerComponent,
BodyComponent,
FooterComponent
]
})
export class PageModule {
}
For the server part, I made another module, app.server.module.ts which is the one used by node.js
#NgModule({
imports: [
AppModule,
ServerModule,
ModuleMapLoaderModule,
ServerTransferStateModule
],
providers: [
SeoService
],
bootstrap: [AppComponent],
})
export class AppServerModule {
}
The problem is that if I try to call a route from node.js server, eg. http://localhost:4000/foo/bar, the node.js server console prints out a huge error, starting with this:
Error: Uncaught (in promise): ReferenceError: navigator is not defined
[...]
(it's really huge, if u need something please ask)
And page doesn't get rendered, as from cURL I get only <app-root><router-outlet></router-outlet></app-root> inside html body.
I think I've checked so many guides that I've completely lost the right way to do it, but cloning Angular Universal Starter seems doing what I'm expecting from Universal
Searching on compiled server.js script, the one executed by node, it seemed like there was an error inside Translator. So I focused searching for issues between html rendering and Translation pipe, but then I've just found a navigator.language.split inside a service (app wasn't built by me). Moved that control inside a isPlatformServer block solved my issue.
This was the breaking part of code
private _language = navigator.language.split('-')[0];
constructor(private _http: HttpClient) {
}
Which I edited as following
private _language;
constructor(#Inject(PLATFORM_ID) private platformId,
private _http: HttpClient) {
if (isPlatformServer(this.platformId)) {
this._language = 'en';
} else {
this._language = navigator.language.split('-')[0];
}
}
Fixed the issue
Please help me check the code...There is no compilation error or else output in the cli after npm start .But the brower appears to be a blank page.
I have checked over and over again,but still can't find what's wrong.
PS:im a freshman in angular2...
app.module
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AdminModule,
WaiterModule,
CookModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app-routing.module
const appRoutes: Routes = [
{
path: "",
redirectTo: "/admin",
pathMatch:"full"
}
];
#NgModule({
imports: [
RouterModule.forRoot(appRoutes, { enableTracing: true })
],
exports: [RouterModule]
})
export class AppRoutingModule { }
app.component.html
<div style="text-align:center">
<h1>
Welcome to Angular2
</h1>
</div>
<router-outlet></router-outlet>
admin.module
#NgModule({
declarations: [
AdminComponent,
DishBoardComponent,
UserBoardComponent,
StatisticsBoardComponent,
AdminSiderBarComponent
],
imports: [
CommonModule,
AdminRoutingModule
]
})
export class AdminModule { }
admin-routing.module
const adminRoutes: Routes = [
{
path: "admin",
component: AdminComponent,
children: [
{ path: "", redirectTo: "/checkout",pathMatch:"full" },
{ path: "checkout", component: CheckoutBoardComponent },
{ path: "dish", component: DishBoardComponent },
{ path: "user", component: UserBoardComponent },
{ path: "statistics", component: StatisticsBoardComponent }
]
}
];
#NgModule({
imports: [
RouterModule.forChild(adminRoutes)
],
exports: [RouterModule]
})
export class AdminRoutingModule { }
admin.component.html
<p>
admin works!
</p>
<a routerLink="/checkout">Checkout</a>
<a routerLink="/user">User</a>
<a routerLink="/dish">Dish</a>
<a routerLink="/statistics">Statistics</a>
<router-outlet></router-outlet>
<br>
footer
It seems like you are not defining admin route and its children inside your app.routing.module.
You should get it to work with
app.module.ts:
No need to import other modules here. just import AppRoutingModule.
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
/** App Modules **/
import { AppRoutingModule } from './app.routing.module';
/** App Components**/
import { AppComponent } from './app.component';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.routing.module.ts:
Load admin.module routes and pass them to admin route.
import { NgModule } from '#angular/core';
import { RouterModule } from '#angular/router';
/** App Modules**/
import { AdminModule} from './admin/admin.module';
export function exportAdminModule() {
return AdminModule;
}
const appRoutes: Routes = [
{
path: 'admin',
loadChildren: exportAdminModule
},
{
path: '',
redirectTo: '/admin',
pathMatch: 'full'
},
{
path: '**',
redirectTo: '/admin'
}
];
#NgModule({
imports: [
RouterModule.forRoot(appRoutes, { enableTracing: true })
], exports: [RouterModule]
})
export class AppRoutingModule { }
admin.module.ts:
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
// Import your components
/** App Routing **/
import { AdminRoutingModule} from './admin.routing.module';
#NgModule({
declarations: [
// your components
// your admin.component
],
imports: [
CommonModule,
AdminRoutingModule
]
})
export class AdminModule { }
admin.routing.module.ts:
Set up an empty path as base route ''.
import { NgModule } from '#angular/core';
import { RouterModule } from '#angular/router';
// Import your components
#NgModule({
imports: [
RouterModule.forChild([
{
path: '',
component: AdminComponent,
children: [
{ path: '', redirectTo: '/checkout', pathMatch: 'full' },
{ path: 'checkout', component: CheckoutBoardComponent },
. . .
]
}
])
], exports: [RouterModule]
})
export class AdminRoutingModule{ }
If you want to have more sub routes, for instance, nested router-outlet just replicate what I shown on app.module.routing with the export and the loadchildren.
I'm not quite sure that you want to achieve what you've shown on your app.routing.module. Are you sure you want to redirect everything to admin?
Something like:
#NgModule({
imports: [
RouterModule.forRoot([
{
path: 'login',
component: LoginPageComponent,
canActivate: [PreventLoggedInAccess]
},
{
path: 'admin',
loadChildren: exportAdminModule
},
{
path: '',
redirectTo: '/login',
pathMatch: 'full'
},
{
path: '**',
redirectTo: '/login'
}
], { useHash : true })
], exports: [RouterModule]
})
where PreventLoggedInAccess authguard prevents you to go to login if you are already logged in and
#NgModule({
imports: [
RouterModule.forChild([
{
path: '',
component: AdminComponent,
canActivateChild: [AuthGuardService],
children: [
. . .
]
}
])
], exports: [RouterModule]
})
with AuthGuardService allowing accessing to child routes only if you are logged in would make much more sense in my opinion.
Here you can read more about authguards.
I looked everywhere and could not find what I was doing wrong. I am using angular 2 to send a GET request to my node servers api and get information which it displays with databinding in my component called trade. The error occurs on the webbrowser when i try to view my angular app. Both my nodejs app and angular2 app are running on the same server.
Service:
https://hastebin.com/ileqekites.js
Component:
https://hastebin.com/agopopadus.cs
Do you have HttpModule imported into one of your Angular modules?
Here is one of mine as an example:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { HttpModule } from '#angular/http'; // <- HERE
import { RouterModule } from '#angular/router';
import { AppComponent } from './app.component';
import { WelcomeComponent } from './home/welcome.component';
/* Feature Modules */
import { ProductModule } from './products/product.module';
#NgModule({
imports: [
BrowserModule,
HttpModule, // <- HERE
RouterModule.forRoot([
{ path: 'welcome', component: WelcomeComponent },
{ path: '', redirectTo: 'welcome', pathMatch: 'full' },
{ path: '**', redirectTo: 'welcome', pathMatch: 'full' }
]),
ProductModule
],
declarations: [
AppComponent,
WelcomeComponent
],
bootstrap: [ AppComponent ]
})
export class AppModule { }