相关疑难解决方法(0)

我想为我的应用启用HTML5模式.我已经把下面的代码的配置,如图所示在这里:

return app.config(['$routeProvider','$locationProvider', function($routeProvider,$locationProvider) {

    $locationProvider.html5Mode(true);
    $locationProvider.hashPrefix = '!';

    $routeProvider.when('/', {
        templateUrl: '/views/index.html',
        controller: 'indexCtrl'
    });
    $routeProvider.when('/about',{
        templateUrl: '/views/about.html',
        controller: 'AboutCtrl'
    });

正如你所看到的,我使用了$locationProvider.html5mode和我改变了我所有的链接ng-href来排除/#/.

问题

目前,我可以去localhost:9000/看看索引页面并导航到其他页面localhost:9000/about.

但是,刷新localhost:9000/about页面时会出现问题.我得到以下输出:Cannot GET /about

如果我看一下网络电话:

Request URL:localhost:9000/about
Request Method:GET

如果我先去localhost:9000/,然后点击导航到的按钮,/about我会得到:

Request URL:http://localhost:9000/views/about.html

这使页面完美呈现.

如何在刷新时启用角度来获取正确的页面？

我是Angular 2的新手.我已将我的单页应用程序存储在名为"myapp"的文件夹中的服务器中.我已将基础中的网址更改为http://example.com/myapp/ `.

我的项目有两页.所以我实现了Angular 2路由.我将默认页面设置为登录.当我http://example.com/myapp/在浏览器中输入时,它会自动重定向到http://example.com/myapp/login.但如果刷新该页面我会收到404错误,说http://example.com/myapp/login找不到.

但如果我使用lite服务器运行我的项目,一切正常.在这种情况下,index.html中的URL将是"/".如何解决？

使用nginx,我想保留url,但无论如何都会加载相同的页面.我将使用url History.getState()来在我的javascript应用程序中路由请求.看起来这应该是一件简单的事情吗？

location / {
    rewrite (.*) base.html break;
}

工作,但重定向网址？我仍然需要网址,我只想总是使用相同的页面.

目前,每个无效页面都是500(内部服务器错误),因为我可能搞砸了我的服务器块配置.

我决定暂时关闭我的网站,并创建了一个简单的单页感谢主页.但旧链接和外部网站仍在尝试访问网站的其他部分,这些部分已不复存在.

如何强制将所有非主页(任何无效的URL)重定向到主页？

我尝试使用以下块,但它不起作用:

location / {
    try_files $uri $uri/ $document_uri/index.html;
}

我当前的配置是(我现在甚至不提供PHP文件,即主页是简单的html):

server {
    server_name www.example.com example.com;
    access_log /srv/www/example.com/logs/access.log;
    error_log /srv/www/example.com/logs/error.log;
    root /srv/www/example.com/public_html;
    index index.php index.html;

    location / {
        try_files $uri $uri/ $document_uri/index.html;
    }

    # Disable favicon.ico logging
    location = /favicon.ico {
        log_not_found off;
        access_log off;
    }

    # Allow robots and disable logging
    location = /robots.txt {
        allow all;
        log_not_found off;
        access_log off;
    }

    # Enable permalink structures
    if (!-e $request_filename) {
        rewrite . /index.php last;
    }

    # Handle …

Angular 2 beta默认使用html5路由.但是,当您转到组件并且路径更改(例如http:// localhost:5000/aboutus)并重新加载/刷新页面时,不会加载任何内容.

这篇文章也提出了这个问题.大多数答案都表示,如果我们要在角度2中进行HTML5路由,那么应该在服务器端处理这个路由问题.这里有更多讨论.

我不知道如何使用asp.net服务器环境来处理这个问题.

任何有角度的2开发人员也使用asp.net并遇到这个问题？

PS.我正在使用ASP.NET 5.我的Angular 2路由正在使用MVC路由.

我来自传统的后端Java/Spring环境学习Angular 2 framework,并且很难掌握许多基本概念.

我正在阅读使用TypeScript的Manning书Angular 2 Development,它说我需要HTTP-server运行我的SAP's.这是为什么？

我以为Angular在客户端机器上运行.那么服务器的功能到底是什么？如果我只是打开HTML,Angular不做它的魔力.

我的组件显示,但加载页面时收到错误消息.在查看一堆资源后,我似乎无法解决错误消息.

错误

EXCEPTION: Error: Uncaught (in promise): Cannot match any routes. Current segment: 'index.html'. Available routes: ['/login'].

main.component.ts位于index.html中,一旦页面加载,它就会显示上面的错误消息.

import { Component } from '@angular/core';
import { Routes, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router';

import { LoginComponent } from './login/login.component';

@Component({
    selector: 'main-component',
    template: 
      ' <header>
           <h1>Budget Calculator</h1>
           <a id='login' [routerLink]="['/login']">Login</a>
           <router-outlet></router-outlet>
        </header> '
    directives: [ROUTER_DIRECTIVES],
    providers: [ROUTER_PROVIDERS]
})

@Routes([
    {path: '/login', component: LoginComponent}
])

export class MainComponent {}

login.component.ts通过main.component.ts路由,并在我点击链接时显示,尽管有错误消息.现在我将它设置为在main.component中弹出其他元素,但希望它是页面上显示的唯一组件.基本上用index.component替换index.html中的main.component,如果可能的话,而不是做一大堆样式来显示:none.

import { Component } from '@angular/core';

@Component({
    selector: 'login',
    template: 
        ' <div …

我开发了一个小型Angular2测试应用程序,除其他功能外,还利用了路由.

只要用户首次访问主页,它就可以正常工作,然后导航到子页面.

如果用户尝试直接访问子页面,如果我没有配置Web服务器,则会得到404.这是完全正常的,因为没有对应于路线的"真实页面".

我尝试在apache 2.2中添加以下配置来处理HTML5 Push State:

<Directory /var/www/html/angular2-sens>
    Options Indexes FollowSymLinks
    RewriteEngine On
    RewriteBase /angular2-sens
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /angular2-sens/index.html [L]
</Directory>

它使事情变得更好,因为我不再拥有404.但是,我"仅"被重定向到应用程序的主页并且不执行路由.

我该怎么做才能纠正这个问题？

我的index.html页面是:

<html>

<head>
    <title>Angular 2 QuickStart</title>

    <link rel="stylesheet" href="simplegrid.css" type="text/css">
    <link rel="stylesheet" href="sen.css" type="text/css">

    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.js"></script>
    <script src="node_modules/angular2/bundles/http.js"></script>
    <script src="node_modules/angular2/bundles/router.js"></script>
<!-- dev
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
    <script src="node_modules/angular2/bundles/http.dev.js"></script>
    <script src="node_modules/angular2/bundles/router.dev.js"></script>
-->

    <!-- 2. Configure SystemJS -->
    <script>
    System.config({
        map: {
            rxjs: 'node_modules/rxjs' //or …

这整条新路线的结构听起来很不错,现在我觉得它确实存在.我放弃了尝试使其工作,在这里我注意到甚至Angular 2页面中的主要示例都不起作用.如果您打开实例并且尝试它只是单击它很酷并且您可以看到网址中的路径被更改,但它只是更改字符串路径不存在,如果您复制您的网址并发送它对某人他们会收到以下错误:

{
    "statusCode": 404,
    "error": "Not Found"
}

即使你只是刷新页面,你也会得到同样的错误.

如果要重现该问题,请打开以下URL:

https://angular.io/resources/live-examples/tutorial/ts/plnkr.html

单击实时预览右上角的"在单独的窗口中启动预览"按钮,等待它加载页面,当您看到URL更改为:

http://run.plnkr.co/KMzM8hkaCyhlnf3b/dashboard

做一个F5刷新页面,你会得到错误.

这是一个错误,它应该工作的方式,或者他们甚至没有尝试过的东西？他们是否已经开始使用糟糕的路由器实现了,或者我只是完全迷失了我是如何让它工作的？请指教 !

我猜我最好使用hashtag实现.

使用的利弊是什么:

1. PathLocationStrategy - 默认的"HTML 5 pushState"样式.
2. HashLocationStrategy - "哈希URL"样式.

例如,使用HashLocationStrategy将阻止通过其#ID滚动到元素的功能,但是某些第三方插件需要HashLocationStrategy或Hashbang #!为了在ajax网站上工作.

我想知道哪一个为webapp提供更多.