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?

Answer 1

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