Angular 4 Routing

Question

Can people stop suggesting this post mark angular -4 routing? I know this tag. My problem, however, was not to do with Angular 4 routing - it was a matter of error, because I did not understand what was happening at that time. The solution here will not help people who want to help with the actual routing of Angular 4, so I do not agree that this should be flagged as such, and I will continue to reject this change. I repeat: it was a mistake to try to launch an Angular web application using a standard hosting package, without first understanding PHP, nodejs, the dist folder and a whole bunch of other things. I see that many people make such mistakes, but they need to know that the problem with routing is not such a problem as the problem of lack of knowledge about websites, and they should just do what I did and apply and learn things.

My Angular 4 routing does not work.

• Angular 4 routing is different from Angular 2. Please, there can only be those who faced similar problems with Angular 4 comment. It seems that there were a lot of changes, and I configured my routing in accordance with the principles of 2017. Marking old solutions for this is simply confusing and useless - especially since I'm new to Angular and only have experience 4. I don't want to use HashLocationStrategy *

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

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 the 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 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 narrowed this problem down to issues with a line like the one shown here: https://github.com/angular/angular-cli/issues/5113

There seems to be no satisfactory answer to this question - if anyone can tell me where to point my -base-href so that my work is built?

Answer 1

My Angular code was ok. The problem was in the server with my hosting provider. I needed to include a .htaccess file with my dist package

Answer 2

you need to use the @NgModule decorator and import your route there

eg

@NgModule ({

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

})

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

Answer 3

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 to app.router ::

following:

 . . . 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 } ]; . . . . 

how you did it and then in your .module.ts application

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

Link :: Angular Routing and Navigation

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