All geek questions in one place

Angular2 - when refreshing the page, the URL remains the same, but the corresponding view does not load

In Angular2, I ran into this problem. When you refresh the page. The URL remains the same, but it does not load the corresponding view in RouterOutlet.

Everything works fine except for a page refresh problem.

app.ts

import {Component,bind} from 'angular2/core';

import {bootstrap} from 'angular2/platform/browser';
import {FORM_DIRECTIVES} from 'angular2/form';
import{HomeCmp} from 'Angular/src/Home/home.ts';
import {ContactUsCmp} from 'Angular/src/ContactUs/contactus.ts';

import {Router,ROUTER_PROVIDERS,RouteConfig, ROUTER_DIRECTIVES,APP_BASE_HREF,LocationStrategy,RouteParams,ROUTER_BINDINGS} from 'angular2/router';
@Component({
selector: 'micropuppy-app',
templateUrl: "ANGULAR/Templates/home.html",
directives:[HomeCmp,ROUTER_DIRECTIVES,ContactUsCmp],
template: ` <nav>
                    <ul class="nav navbar-nav">
                    **<li><a [routerLink]="['Home']">One</a><hr/></li>
                     <li><a [routerLink]="['ContactUs']">Contact Us</a></li>**
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Technologies <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Angular</a></li>
                            <li><a href="#">.NET</a></li>
                        </ul>
                    </li>
            </ul>
        </nav>

    <router-outlet></router-outlet>`
 })

@RouteConfig([
  {path:'/Home', name: 'Home', component: HomeCmp}
  {path:'/ContactUs', name: 'ContactUs', component: ContactUsCmp}
])

export class MicropuppyApp {
    constructor(){
        console.log("Micropuppy app started");
    }
}
 bootstrap(MicropuppyApp, [ROUTER_PROVIDERS,bind(APP_BASE_HREF).toValue(location.pathname)]);
+4
source share
5 answers

According to the default routing strategy (HTML5 History API) routing, you need a server configuration to redirect all your paths to the HTML entry point file. Using the hashbang approach is not necessary ... If you want to move on to this approach, just use the following code:

import { bootstrap } from "angular2/platform/browser";
import { provide } from "angular2/core";
import {
  ROUTER_PROVIDERS, LocationStrategy, HashLocationStrategy
} from "angular2/router";

bootstrap(MainApp, [
  ROUTER_PROVIDERS,
  provide(LocationStrategy, {useClass:HashLocationStrategy});
]);

:

, , Thierry

+2

, Angular2 .

- Angular2. API , - App index.html 404 URL-.

:

  • Hashbang HashLocationStrategy, URL- - .

  • :

Node.js .

, Node Npm.

package.json .

{
  "name": "Express server",
  "version": "",
  "dependencies": {
    "express": "^4.14.0"
  }
}

server.js .

var express = require('express');
var app = express();

app.use(express.static('dist')); 
// 'dist' is my build folder, you can add yours. this will take care of all static files.

app.use('/*', express.static('dist/index.html')); 
// This will make sure that every route should serve index.html first 

app.listen(8080, function () {
    console.log('app listening on port 8080!!')
});

, .

node server.js

, , / index.html , angular App.

+1

, index.html <title> put

<script>document.write('<base href="/" />');</script>
0

, , 404 , 404.html

   <!doctype html>
<html>
    <head>
        <script type="text/javascript">
            window.location.href = "http://" + document.location.host;
        </script>
    </head>
</html>
0

#, "PathLocationStrategy". HashLocationStratedy. , Angular2 .

-1

Source: https://habr.com/ru/post/1626480/

More articles:


All Articles