Related
I'm having problems developing a route as default... if you put sitename.com ... it assumes the default Login route, getting sitename.com/login, so far so good....
My problem is that if I go to the page through a sitename.com/home shortcut... I don't see any page, as if I couldn't find the path... I wanted to put this shortcut on the default page. .. Login.
To do this do I have to configure the routes or do I have to do something else?
Can anyone help me?
app.module.ts
import { RouterModule, Routes } from '#angular/router';
imports: [
RouterModule.forRoot(routes, { relativeLinkResolution: 'legacy' }),
],
const routes: Routes = [
{ path: '', redirectTo: 'login', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
];
You can try
RouterModule.forRoot(routes, {useHash: true})
and Login page will be accessed by direct URL as sitename.com/#/login
I am working on angular 7 application. When i navigate the page from one to another using routerlink option, it is working fine.
<a class="dropdown-item pt-3 pb-3 border-bottom" routerLink="/proposals">Proposals</a>
<a class="dropdown-item pt-3 pb-3 border-bottom" routerLink="/datapartners">Data Partners</a>
it will redirect to specific page and render the corresponding component. but when i refresh the page / enters the different URL in browser, automatically it will direct to home page for all the cases. that means routing working fine via router link not through browser URL.
It is working fine in all the cases for local environment.the issue happening only in deployed server.
https://localhost:4200/proposals - working fine in all the cases locally.
https://x.com/app/proposals - working only via router link not through browser URL.
I had tried to set the basehref="/app/" attribute in index.html but no luck.
Below is the routing component code snippet.
const routes: Routes = [
{
path: '',
redirectTo: 'home', // Core Framework will handle this route path - /login. If there's any change App Team can update accordingly!
pathMatch: 'full',
canActivate: [LoginGuard]
},
{
path: 'proposals',
component: ProposalsComponent,
runGuardsAndResolvers: 'always',
//pathMatch: 'full',
// canActivate: [EMSGuard],
canActivate: [LoginGuard]
},
{
path: 'about',
component: AboutComponent,
pathMatch: 'full',
// canActivate: [EMSGuard],
canActivate: [LoginGuard]
},
{
path: 'home',
component: HomeComponent,
pathMatch: 'full',
// canActivate: [EMSGuard],
canActivate: [LoginGuard]
},
{
path: 'whatisnew',
component: WhatisnewComponent,
pathMatch: 'full',
// canActivate: [EMSGuard],
canActivate: [LoginGuard]
},
{
path: 'datapartners',
component: DatapartnersComponent,
pathMatch: 'full',
// canActivate: [EMSGuard],
canActivate: [LoginGuard]
},
// #route4: wild card route
{
path: '**',
component: PageNotFoundComponent
}
];
#NgModule({
imports: [RouterModule.forRoot(routes, { onSameUrlNavigation: 'reload' })],
exports: [RouterModule]
})
export class AppRoutingModule { }
Try to use LocationStrategy
providers: [{
provide: LocationStrategy,
useClass: HashLocationStrategy
}]
Angular 7 - Browser Refresh always redirecting to homepage
This need to be at the bottom of the array , since it works on first match principal
{
path: '',
redirectTo: 'home', // Core Framework will handle this route path - /login. If there's any change App Team can update accordingly!
pathMatch: 'full',
canActivate: [LoginGuard]
},
When running ng serve with a successful compilation in my Angular app, I started getting the following error in the browser console.
AppComponent_Host.ngfactory.js? [sm]:1 ERROR Error: Arguments array must have arguments.
at injectArgs (core.js:1412)
at core.js:1491
at _callFactory (core.js:8438)
at _createProviderInstance (core.js:8396)
at resolveNgModuleDep (core.js:8371)
at NgModuleRef_.push../node_modules/#angular/core/fesm5/core.js.NgModuleRef_.get
(core.js:9064)
at resolveDep (core.js:9429)
at createClass (core.js:9309)
at createDirectiveInstance (core.js:9186)
at createViewNodes (core.js:10406)
This as far as I can tell from Main.ts platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.log(err));
I have deleted the node modules folder and reinstalled and I'm having trouble with the lack of explanation the error gives. Plus, I'm somewhat new to Angular.
Any help would be greatly appreciated.
EDIT
I ran ng serve --aot and got the following error
ERROR in : Error: Internal error: unknown identifier []
at Object.importExpr$$1 [as importExpr] (C:\Users\kg\Documents\ang2\ad\UI\node_modules\#angular\compiler\bundles\compiler.umd.js:21731:27)
at C:\Users\kg\Documents\ang2\ad\UI\node_modules\#angular\compiler\bundles\compiler.umd.js:9988:37
at Array.map (<anonymous>)
at InjectableCompiler.depsArray (C:\Users\kg\Documents\ang2\ad\UI\node_modules\#angular\compiler\bundles\compiler.umd.js:9954:25)
at InjectableCompiler.factoryFor (C:\Users\kg\Documents\ang2\ad\UI\node_modules\#angular\compiler\bundles\compiler.umd.js:10018:36)
at InjectableCompiler.injectableDef (C:\Users\kg\Documents\ang2\ad\UI\node_modules\#angular\compiler\bundles\compiler.umd.js:10037:42)
at InjectableCompiler.compile (C:\Users\kg\Documents\ang2\ad\UI\node_modules\#angular\compiler\bundles\compiler.umd.js:10047:106)
at C:\Users\kg\Documents\ang2\ad\UI\node_modules\#angular\compiler\bundles\compiler.umd.js:21576:90
at Array.forEach (<anonymous>)
at AotCompiler._emitPartialModule2 (C:\Users\kg\Documents\ang2\ad\UI\node_modules\#angular\compiler\bundles\compiler.umd.js:21576:25)
at C:\Users\kg\Documents\ang2\ad\UI\node_modules\#angular\compiler\bundles\compiler.umd.js:21569:48
at Array.reduce (<anonymous>)
at AotCompiler.emitAllPartialModules2 (C:\Users\kg\Documents\ang2\ad\UI\node_modules\#angular\compiler\bundles\compiler.umd.js:21568:26)
at AngularCompilerProgram._emitRender2 (C:\Users\kg\Documents\ang2\ad\UI\node_modules\#angular\compiler-cli\src\transformers\program.js:364:31)
at AngularCompilerProgram.emit (C:\Users\kg\Documents\ang2\ad\UI\node_modules\#angular\compiler-cli\src\transformers\program.js:236:22)
at AngularCompilerPlugin._emit (C:\Users\kg\Documents\ang2\ad\UI\node_modules\#ngtools\webpack\src\angular_compiler_plugin.js:846:49)
ngModule
#NgModule({
declarations: [
AppComponent,
LoginComponent,
ItemDashboardComponent,
UnprotectedSearchComponent,
HomeComponent,
UnprotectedResultsComponent,
DashboardComponent,
TrackingListComponent,
ListItemComponent,
ActionItemComponent,
ActionListComponent,
ItemInfoTableComponent,
TrackingInfoTableComponent,
FilterPipe,
RegisterItemsComponent,
RegisterPackageComponent,
AddItemsPackageComponent,
ChangeCustodyComponent,
CheckTempComponent,
RemoveItemsComponent,
ScannerComponent,
ContainerDashboardComponent,
SoldComponent
],
imports: [
NgQrScannerModule,
MatTabsModule,
AngularFontAwesomeModule,
MatListModule,
MatFormFieldModule,
BrowserAnimationsModule,
MatMenuModule,
MatProgressBarModule,
BrowserModule,
MatIconModule,
MatGridListModule,
AngularFontAwesomeModule,
FormsModule,
AppRoutingModule,
HttpClientModule,
RouterModule.forRoot([
{
path: 'home',
component: HomeComponent
},
//{path: 'openSearch', component: LoginComponent},
{
path: 'item',
component: ItemDashboardComponent,
canActivate: [AuthGuard, ManufacturerAuthGuardService]
},
{
path: 'dashboard',
component: DashboardComponent,
canActivate: [AuthGuard]
},
{
path: 'unprotectedResults',
component: UnprotectedResultsComponent,
canActivate: [AuthGuard]
},
{
path: 'trackingList/'+environment.config.itemWorkflow+'/:contractId',
component: ItemDashboardComponent,
canActivate: [AuthGuard]
},
{
path: 'trackingList/'+environment.config.packageWorkflow+'/:contractId',
component: ContainerDashboardComponent,
canActivate: [AuthGuard]
},
{
path: 'trackingList',
component: TrackingListComponent,
canActivate: [AuthGuard]
},
{
path: 'actions',
component: ActionListComponent,
canActivate: [AuthGuard]
},
{
path: 'publicResults/:contractId',
component: UnprotectedResultsComponent
},
{
path: 'registerItems',
component: RegisterItemsComponent,
canActivate: [AuthGuard]
},
{
path: 'addItemsToPackage',
component: AddItemsPackageComponent,
canActivate: [AuthGuard]
},
{
path: 'registerPackage',
component: RegisterPackageComponent,
canActivate: [AuthGuard]
},
{
path: 'changeCustody/:contractId',
component: ChangeCustodyComponent,
canActivate: [AuthGuard]
},
{
path: 'changeCustody',
component: ChangeCustodyComponent,
canActivate: [AuthGuard]
},
{
path: 'checkTemp',
component: CheckTempComponent,
canActivate: [AuthGuard]
},
{
path: 'removeItems',
component: RemoveItemsComponent,
canActivate: [AuthGuard]
},
{
path: 'sellItems',
component: SoldComponent,
canActivate: [AuthGuard]
},
]),
UiModule
],
providers: [
AuthGuard,
{
provide: HTTP_INTERCEPTORS,
useClass: MyInterceptor,
multi: true
},
MockBackend,
fakeBackendProvider,
BaseRequestOptions,
AuthGuard,
AdminAuthGuard,
AdalService,
SoldComponent
],
bootstrap: [AppComponent]
})
AppComponent Constructor
constructor(private api: ApiService, private adalService: AdalService, private _http: HttpClient, private router: Router, public authService: AuthService) {
this.adalService.init(environment.config);
if (!this.adalService.userInfo.authenticated) this.router.navigate(['/']);
}
First, try building/serving the app with ng serve --aot flag. Chances are some warning/error will be shown at the compile time.
As far as I can think, can you search in your project, if you are importing any component/module
like this import {something} from "../node_modules/#somepackage/adfas"; instead of import {something} from "#somepackage/adfas";
Also can you please share what you have in #NgModule({}) decorator, and in AppComponent constructor();
I think the angular is not able to provide all the injected dependencies.
I had the same error because of a circular dependency in my code:
Service1 > Service2 > Service1
i had the same issue, just tried to start app again and it worked.
In my case I was missing the injected type in the constructor :/
This Typescript snippet demonstrates a scenario which causes this error.
...
export class AClassImportingAService {
constructor(private _importedService) {
// ERROR: notice there is no type on _importedService
// It should read 'private _importedService: ImportedService'
}
...
}
I had same error, when #Injectable decorator and export keyword were not used for a dependency.
I received this error due to having a circular dependency. I had a store which depended on some initial state which was provided by a service that depended on my store.
I resolved the issue by extracting the initial state, which was a constant object, to its own constants file.
I made a typo instead of ":" I used "," in the constructor and had this error:
constructor(private myService, Myservice) {
}
//instead of
constructor(private myService: Myservice) {
}
I have a problem with Angular routing. I have main app routing module and sub module with its own routing module and router-outlet but routes defined in this submodule are shown using root router outlet and not the child one.
My folder structure:
My code listings
app-routing.module.ts
const routes: Routes = [
{ path: '', component: HomeComponent, pathMatch: 'full' }
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
app.component.html
<router-outlet></router-outlet>
home-routing.module.ts
const routes: Routes = [
{ path: '', component: LandingPageComponent},
{ path: 'register', component: RegisterComponent },
{ path: 'login', component: LoginComponent }
];
#NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class HomeRoutingModule { }
home.component.html
...
<div class="inner cover">
<router-outlet></router-outlet>
</div>
...
That's what I get when I use empty path - it opens home component properly.
But when i enter /register i get plain html from login.component.html without template in home.component.html file
EDIT
I added name to child outlet
<router-outlet name="home"></router-outlet>
Changed route names to:
const routes: Routes = [
{ path: '', component: LandingPageComponent, outlet: 'home'},
{ path: 'register', component: RegisterComponent, outlet: 'home' },
{ path: 'login', component: LoginComponent, outlet: 'home' }
];
Now I got that error:
EDIT 2
I try to access those routes in 2 ways:
A link(which may be incorrect):
<a routerLink="/login">Log In</a></li>
Or typing manually:
localhost:4200/login
In Angular 2, router outlets can be named:
<router-outlet>
<router-outlet name="children"></router-outlet>
</router-outlet>
App:
const routes: Routes = [
{ path: '', component: HomeComponent, pathMatch: 'full' }
];
Home:
const routes: Routes = [
{ path: '', component: LandingPageComponent, outlet: 'children'},
{ path: 'register', component: RegisterComponent, outlet: 'children' },
{ path: 'login', component: LoginComponent, outlet: 'children' }
];
You can even define child routes:
const routes: Routes = [
{ path: '',
component: HomeComponent,
pathMatch: 'full', children: [
{ path: '', component: LandingPageComponent, outlet: 'children'},
{ path: 'register', component: RegisterComponent, outlet: 'children' },
{ path: 'login', component: LoginComponent, outlet: 'children' }
]
}
];
http://onehungrymind.com/named-router-outlets-in-angular-2/
If you want those 3 components to be rendered inside of the HomeComponent in a named outlet, then you need to define the following routes:
const routes: Routes = [
{ path: '',
component: HomeComponent,
pathMatch: 'full'
},
{ path: 'landing', component: LandingPageComponent, outlet: 'children'},
{ path: 'register', component: RegisterComponent, outlet: 'children' },
{ path: 'login', component: LoginComponent, outlet: 'children' }
];
And inside of app.component.html add the named router outlet
....//html template
<router-outlet name="children"></router-outlet>
....//html template
EDIT 1:
To navigate to the named outlets you need to use the following routed links:
//inside of home.component.html
<a [routerLink]="[{ outlets: { children: ['login'] } }]">Take me to login!</a>
The generated link will look like:
root/(children:login)
More info in the following link to the docs
EDIT 2:
I changed the original routes and the component template where the named outlet is added. Why?
it is not possible, as far as I know, to have a named outlet with an empty path (''). The empty path tells angular that the named outlet is empty (no component is currently rendered in it).
I believe your problem has to do with declarations. I can not know for certain since you didn't show the code in your app.module.ts and home.module.ts file and have not tested this fully myself.
A component needs to be declared inside the module connected to the template with the desired routing outlet. In your case the login component would need to be added to "declarations" in your home.module.ts file and removed from "declarations" in the app.module.ts file.
Angular does not seem allow you to reuse the same component in multiple routing-outlets unless they are in the same template, since it would cause an error stating "x component declared in multiple modules".
I'm using Angular 2 routing for my application and it works pretty well but I have no idea how to define the "otherwise" route. So a route that will be displayed if none if the current URL does not correspond to any "supported" route.
Here is an example of my current configuration:
#RouteConfig([
{ path: '/', name: 'Home', component: StoryComponent, useAsDefault: true },
{ path: '/story', name: 'Story', component: StoryComponent },
{ path: '/subscription', name: 'Subscription', component: SubscriptionComponent}
])
This hasn't currently been implemented in angular 2. The best current solution is to use a solution like #Gary showed.
{ path: '**', component: PageNotFoundComponent }
as shown in the angular guide routing section(https://angular.io/docs/ts/latest/guide/router.html).
There is no 'otherwise' route in angular 2 yet. But the same functionality can be achieved using wildcard parameter, like so:
#RouteConfig([
{ path: '/', redirectTo: ['Home'] },
{ path: '/home', name: 'Home', component: HomeComponent },
// all other routes and finally at the last add
{path: '/*path', component: NotFound}
This will only load the 'NotFound' component and the url will be same as what you navigate to. In case you want all not matching routes to redirect to a '404' url, you can do something like:
//at the end of the route definitions
{ path: '/404', name: '404', component: PageNotFoundComponent },
{ path: '/*path', redirectTo:['404'] }`
Try this instead of otherwise. It works for me, not sure but seems like work in progress.
#RouteConfig([
{ path: '/**', redirectTo: ['MycmpnameCmp'] },
...
}
])
https://github.com/angular/angular/issues/4055
This worked for me:
const routes: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
// all other routes
{ path: '**', redirectTo: '/home' }
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
Try this
RouterModule.forRoot([
{ path: 'login', component: LoginComponent },
{ path: 'edit-event', component: EventComponent },
{ path: 'participants', component: ParticipantsComponent },
{ path: 'notification', component: NotificationComponent },
{ path: '', component: WelcomeComponent }, //default
{ path: '**', component: WelcomeComponent } //page not found route
], { useHash: true })
useHash parameter is for using hash url style
https://angular.io/docs/ts/latest/guide/router.html#!#route-config