I have a problem with a simple application. I already have it in production, but when I access a URL directly, I get an error:
In firefox:
In chrome:
But if I access localhost:8080, it is redirected to /home correctly:
I am using the following code:
In app.routes.ts
import { RouterModule, Routes } from '#angular/router';
import { HomeComponent } from './components/home/home.component';
import { AboutComponent } from './components/about/about.component';
import { HeroesComponent } from './components/heroes/heroes.component';
import { HeroeComponent } from './components/heroe/heroe.component';
import { BuscarComponent } from './components/buscar/buscar.component';
const ROUTES: Routes = [
{ path: 'home', component: HomeComponent },
{ path: 'about', component: AboutComponent },
{ path: 'heroes', component: HeroesComponent },
{ path: 'heroe/:id', component: HeroeComponent },
{ path: 'buscar/:palabra', component: BuscarComponent },
{ path: '**', pathMatch: 'full', redirectTo: 'home' }
];
export const APP_ROUTING = RouterModule.forRoot(ROUTES);
In app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { APP_ROUTING } from './app.routes';
import { HeroesService } from './servicios/heroes.service';
import { AppComponent } from './app.component';
import { NavbarComponent } from './components/shared/navbar/navbar.component';
import { HomeComponent } from './components/home/home.component';
import { AboutComponent } from './components/about/about.component';
import { HeroesComponent } from './components/heroes/heroes.component';
import { HeroeComponent } from './components/heroe/heroe.component';
import { BuscarComponent } from './components/buscar/buscar.component';
import { HeroeTarjetaComponent } from './components/heroe-tarjeta/heroe-tarjeta.component';
#NgModule({
declarations: [
AppComponent,
NavbarComponent,
HomeComponent,
AboutComponent,
HeroesComponent,
HeroeComponent,
BuscarComponent,
HeroeTarjetaComponent
],
imports: [
BrowserModule,
APP_ROUTING
],
providers: [
HeroesService
],
bootstrap: [AppComponent]
})
export class AppModule { }
I try to change { path: '**', pathMatch: 'full', redirectTo: 'home' } to { path: '', pathMatch: 'full', redirectTo: 'home' } or anything and nothing, not solve.
I tried the application with the NodeJS http-server module.
Related
I am having problem with angular 12 sub routes. I can navigate to the sub routes just fine but when I refresh the page I lose context. I am running it locally on the localhost:4200
here is the image of what I am getting in network tab and on the screen when I refresh
enter image description here
here is a link for source code: https://github.com/Stanmozolevskiy/Portfolio
Here is routing component:
import { SinglePortfolioComponent } from './portfolio/single-portfolio/single-portfolio.component';
import { HomeComponent } from './home/home.component';
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { ContactComponent } from './contact/contact.component';
import { AboutComponent } from './about/about.component';
import { PortfolioComponent } from './portfolio/portfolio.component';
const routes: Routes = [
{path: '', component: HomeComponent},
{path: 'contact', component: ContactComponent},
{path: 'about', component: AboutComponent},
{path: 'about/portfolio', component: AboutComponent},
{path: 'portfolio', component: PortfolioComponent},
{path: 'portfolio/:query', component: SinglePortfolioComponent},
];
#NgModule({
imports: [RouterModule.forRoot(routes, {scrollPositionRestoration: 'enabled'})],
exports: [RouterModule]
})
export class AppRoutingModule { }
Here is app module:
import { AngularFireModule } from '#angular/fire';
import { AngularFireFunctionsModule } from '#angular/fire/functions';
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { FontAwesomeModule } from '#fortawesome/angular-fontawesome';
import { ContactComponent } from './contact/contact.component';
import { ReactiveFormsModule } from '#angular/forms';
import { AboutComponent } from './about/about.component';
import { GetintouchComponent } from './getintouch/getintouch.component';
import { PortfolioComponent } from './portfolio/portfolio.component';
import { SinglePortfolioComponent } from './portfolio/single-portfolio/single-portfolio.component';
import { HeaderComponent } from './common/header/header.component';
import { NgbModule } from '#ng-bootstrap/ng-bootstrap';
import { AsideComponent } from './common/aside/aside.component';
import { ParagraphComponent } from './common/paragraph/paragraph.component';
#NgModule({
declarations: [
AppComponent,
HomeComponent,
ContactComponent,
AboutComponent,
GetintouchComponent,
PortfolioComponent,
SinglePortfolioComponent,
HeaderComponent,
AsideComponent,
ParagraphComponent
],
imports: [
AppRoutingModule,
BrowserModule,
FontAwesomeModule,
ReactiveFormsModule ,
AngularFireFunctionsModule,
NgbModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
I will be happy to try any suggestions, thank you in advance!
Solution to this problem:
Change your webserver configurations to match your location strategy or use HashLocationStrategy as follow: imports: [RouterModule.forRoot(appRoutes, {scrollPositionRestoration: 'enabled', useHash: true})]
And please change all href attributes over your code base to routerLink directive as follow:
<a routerLink="/portfolio" class="btn btn-lg edit_hover_class custom-btn">
<fa-icon [icon]="faBriefcase"></fa-icon> My portfolio
</a>
I assume you're talking about the index.html fallback that doesn't work on the production like it works locally while in development.
You can fix your issue by looking at the docs here https://angular.io/guide/deployment#routed-apps-must-fallback-to-indexhtml.
Just know what is your online server and do the solution specific for it.
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' }
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 { }