CODEWITHSUNDEEP
angulartypescriptroutes
Davtho1983
Davtho1983

Reputation: 3954

Angular 4 Routing

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.

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?

Upvotes: 5

Views: 7308

Answers (3)

Davtho1983
Davtho1983

Reputation: 3954

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

Upvotes: 2

Rishabh.IO
Rishabh.IO

Reputation: 691

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.

Upvotes: 0

Ravinder
Ravinder

Reputation: 1

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);

Upvotes: 0

Related Questions