Angular 4 Routing

Question

Could people stop suggesting this post be tagged with angular-4 routing? I am aware of that tag. My problem, however, was not to do with the routing of Angular 4 - it was kindof a mistake question coz I didn't understand what was going on at the time. The solution here will not help people who want help with actual Angular 4 routing so I disagree that it should be tagged as such and I will keep rejecting that alteration. I reiterate: It was a mistake to try to launch an angular web-app using a standard hosting package without first understanding PHP, nodejs, the dist folder and a whole bunch of other stuff. I see a lot of people making similar mistakes, but they need to know it is not routing problem so much as a not-knowing-about-websites problem, and they should just do as I did and buckle down and learn stuff.

My angular 4 routing is not working.

Angular 4 routing is different to Angular 2. Please could only people who have encountered similar issues with Angular 4 comment. There seem to have been a lot of changes and I set up my routing following the 2017 guidelines. Flagging old solutions to this is just confusing and unhelpful - especially as I am new to Angular and only have experience of 4. I don't want to use HashLocationStrategy *

I can navigate to my domain, and then use my menu component to navigate between pages, but when I type in mydomain/home I see a blank page. Looks like other people asked similar questions about previous versions of Angular, but I can't see anyone with a newer setup.

I have

import { routes } from './app.router';

in app.module.ts

and

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { HomeComponent } from './home/home.component';
import { ArtComponent } from './art/art.component';
import { MusicComponent } from './music/music.component';
import { EventsComponent } from './events/events.component';

export const router: Routes = [
    { path: '', redirectTo: 'home', pathMatch: 'full'},
    { path: 'home', component: HomeComponent },
    { path: 'art', component: ArtComponent },
    { path: 'music', component: MusicComponent },
    { path: 'events', component: EventsComponent }
];

export const routes: ModuleWithProviders = RouterModule.forRoot(router);

in app.router.ts

I'm afraid I'm very new to Angular!

These are the errors in Chrome Inspector:

polyfills.71b130084c52939ca448.bundle.js:1 [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.
(anonymous) @ polyfills.71b130084c52939ca448.bundle.js:1
firebug-lite.js:30396 [Deprecation] 'window.webkitStorageInfo' is deprecated. Please use 'navigator.webkitTemporaryStorage' or 'navigator.webkitPersistentStorage' instead.
getMembers @ firebug-lite.js:30396
home Failed to load resource: the server responded with a status of 404 ()

I have narrowed this issue down to problems with the build similar to those here: https://github.com/angular/angular-cli/issues/5113

There does not seem to be a satisfactory answer to that question - if anybody could tell me where to point my --base-href to make my build work?

what kind of webserver are you using? You need to change your webserver configuration to handle all 404 requests to your `index.html` root — Poul Kruijt, Aug 05 '17 at 18:28
Apache I guess? I don't know enough about that end of things - I used the Angular Cli build tool to make a dist folder and uploaded that via FTP. I don't know much about the internal workings of Angular, I'm just learning as I go. I will try to specify 404 redirects via the console from my web hosting coz it should have been handled from that side too! Angular should be handling redirects internally tho or the routing isn't working tho? — Davtho1983, Aug 05 '17 at 20:37
Did you use [Ahead OF Time-Compilation](https://angular.io/guide/aot-compiler) for creating the dist or just a ng build? — Myonara, Aug 06 '17 at 06:20
just ng build - aot sounds amazing tho and I'll definitely be using that now I know about it! — Davtho1983, Aug 06 '17 at 11:00
Possible duplicate of [Angular 2.0 router not working on reloading the browser](https://stackoverflow.com/questions/31415052/angular-2-0-router-not-working-on-reloading-the-browser) — eko, Aug 06 '17 at 11:41

score 2 · Accepted Answer · answered Oct 09 '17 at 18:36

2

My Angular code turned out to be fine. The problem was with the server with my hosting provider. I needed to include a .htaccess file with my dist package

answered Oct 09 '17 at 18:36

Davtho1983

3,827
8
54
105

score 0 · Answer 2 · answered Aug 13 '17 at 15:00

0

you need to use @NgModule decorator and imports your route there

e.g

@NgModule({

imports: [
    RouterModule.forRoot(routes)// provide your routes array here
]

})

following statement will not work, export const routes: ModuleWithProviders = RouterModule.forRoot(router);

answered Aug 13 '17 at 15:00

Ravinder

1

Sorry Ravinder I'm very new to Angular and you're going to need to be clearer than that! What is the typescript syntax for adding my routes array to @NgModule? Do you mean add @NgModule to app.router.ts? What exactly is this doing and why won't ModuleWithProviders work? – Davtho1983 Aug 14 '17 at 11:20

score 0 · Answer 3 · answered Aug 15 '17 at 11:42

0

Method - 1

In app.module.ts

  . . . 

import { Routes, RouterModule } from '@angular/router';




imports: [
RouterModule.forRoot([
{
  path: '',
  redirectTo: 'home',
  pathMatch: 'full'
},
{
  path: 'home',
  component: HomeComponent
} , 
{
  path: 'art' , 
  component: ArtComponent
} 

. . . 


]),

Method -2 Add the following in app.router ::

. . . 
export const router: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full'},
{ path: 'home', component: HomeComponent },
{ path: 'art', component: ArtComponent },
{ path: 'music', component: MusicComponent },
{ path: 'events', component: EventsComponent }
];
. . . .

just the way you've done and then in your app.module.ts

import { routes } from './app.router';
. . . 
imports : [ 
RouterModule.forRoot( routers ) 
]

Reference :: Angular Routing and Navigation

If it doesn't work , let me know in comments.

answered Aug 15 '17 at 11:42

Rishabh.IO

591
7
6

Hi I get the following errors: ERROR in /src/app/app.module.ts (50,5): Cannot find name 'RouterModule'. ERROR in /src/app/app.module.ts (50,27): Cannot find name 'routers'. – Davtho1983 Aug 15 '17 at 12:09
import { RouterModule } from '@angular/router'; import { router } from './app.router'; and RouterModule.forRoot( router ), this fixes this in the cli with ng serve, but not in the build. I have no idea what is happening :( – Davtho1983 Aug 15 '17 at 12:50
Hi , is there a way you can share the code ? may be plunker or github ? If not then please provide a little more information which could help me understand the problem better. Have you been @angular/cli right from the beginning ? – Rishabh.IO Aug 15 '17 at 17:10
Honestly, no I can't share all the code - but the relevant code is pretty much as you see. I've been using @angular/cli throughout, but the routing wasn't working before with ng serve, now it is. I think the problem might be the build? The terminal command I've been using is ng build --aot --prod --base-href ./ – Davtho1983 Aug 15 '17 at 18:00

Angular 4 Routing

3 Answers3