Na verdade, você precisa do # (hashtag) para navegadores que não são HTML5.

Caso contrário, eles apenas farão uma chamada HTTP para o servidor na href mencionada. O # é um shortcircuit de navegador antigo que não triggers a solicitação, o que permite que muitas estruturas js criem seu próprio reencaminhamento de cliente além disso.

Você pode usar $locationProvider.html5Mode(true) para informar ao angular para usar a estratégia HTML5, se disponível.

Aqui está a lista de navegadores que suportam a estratégia HTML5: http://caniuse.com/#feat=history

Se você ativou o html5mode como os outros disseram, e crie um arquivo .htaccess com o seguinte conteúdo (ajuste para suas necessidades):

 RewriteEngine On RewriteBase / RewriteCond %{REQUEST_URI} !^(/index\.php|/img|/js|/css|/robots\.txt|/favicon\.ico) RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ./index.html [L] 

Os usuários serão direcionados para o seu aplicativo quando entrarem em uma rota adequada, e seu aplicativo lerá a rota e os levará à “página” correta nela.

EDIT: Apenas certifique-se de não ter qualquer nome de arquivo ou diretório em conflito com suas rotas.

Vamos escrever resposta que parece simples e curto

No roteador no final, adicione html5Mode (true) ;

 app.config(function($routeProvider,$locationProvider) { $routeProvider.when('/home', { templateUrl:'/html/home.html' }); $locationProvider.html5Mode(true); }) 

Em html head add tag base

thanks To @plus – para detalhar a resposta acima

experimentar

 $locationProvider.html5Mode(true) 

Mais informações em $ locationProvider
Usando a localização $

As informações a seguir são de:
https://scotch.io/quick-tips/pretty-urls-in-angularjs-removing-the-hashtag

É muito fácil obter URLs limpos e remover a hashtag do URL em Angular.
Por padrão, o AngularJS irá rotear URLs com uma hashtag. Por exemplo:

• http://www.example.com

• http://www.example.com/#/about

• http://www.example.com/#/contact

Existem duas coisas que precisam ser feitas.

• Configurando o $ locationProvider

• Configurando nossa base para links relativos

• $ location Service

Em Angular, o serviço $ location analisa o URL na barra de endereços e faz alterações em seu aplicativo e vice-versa.

Eu recomendo a leitura dos documentos oficiais de localização do Angular $ para ter uma ideia do serviço de localização e do que ele oferece.

https://docs.angularjs.org/api/ng/service/$location

$ locationProvider e html5Mode

• Usaremos o módulo $ locationProvider e definiremos html5Mode como true.

• Faremos isso ao definir seu aplicativo Angular e configurar suas rotas.

   angular.module('noHash', []) .config(function($routeProvider, $locationProvider) { $routeProvider .when('/', { templateUrl : 'partials/home.html', controller : mainController }) .when('/about', { templateUrl : 'partials/about.html', controller : mainController }) .when('/contact', { templateUrl : 'partials/contact.html', controller : mainController }); // use the HTML5 History API $locationProvider.html5Mode(true); }); 

O que é a API de histórico do HTML5? É uma maneira padronizada de manipular o histórico do navegador usando um script. Isso permite que o Angular altere o roteamento e os URLs de nossas páginas sem atualizar a página. Para obter mais informações sobre isso, aqui está um bom artigo da API de histórico do HTML5:

http://diveintohtml5.info/history.html

Configuração para links relativos

• Para vincular seu aplicativo usando links relativos, você precisará definir o no do seu documento. Isso pode estar no arquivo root index.html do seu aplicativo Angular. Encontre a tag e defina-a como o URL raiz desejado para seu aplicativo.

Por exemplo:

• Há muitas outras maneiras de configurar isso, e o modo HTML5 definido como verdadeiro deve resolver automaticamente os links relativos. Se a sua raiz da sua aplicação for diferente da url (por exemplo / my-base, use-a como sua base.

Retorno para navegadores mais antigos

• O serviço de localização $ recorrerá automaticamente ao método de hashbang para navegadores que não suportam a API de histórico do HTML5.
• Isso acontece de maneira transparente para você e você não precisará configurar nada para que funcione. Nos documentos de localização do Angular $, você pode ver o método de fallback e como ele funciona.

Em conclusão

• Essa é uma maneira simples de obter URLs bonitos e remover a hashtag do seu aplicativo Angular. Divirta-se fazendo esses aplicativos Angular super limpos e super rápidos!

Se você estiver querendo configurar isso localmente no OS X 10.8 servindo o Angular com o Apache, então você pode encontrar o seguinte no seu arquivo .htaccess:

  Options +FollowSymlinks RewriteEngine On RewriteBase /~yourusername/appname/public/ RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_URI} !.*\.(css|js|html|png|jpg|jpeg|gif|txt) RewriteRule (.*) index.html [L]  

Opções + FollowSymlinks, se não estiver definido, pode causar um erro proibido nos logs da seguinte forma:

 Options FollowSymLinks or SymLinksIfOwnerMatch is off which implies that RewriteRule directive is forbidden 

A base de reconfiguração é necessária, caso contrário, as solicitações serão resolvidas para a raiz do servidor, que localmente, por padrão, não é o diretório do projeto, a menos que você tenha configurado especificamente seus vhosts, portanto, é necessário configurar o caminho para que o diretório raiz do projeto seja encontrado. Por exemplo, na minha máquina eu tenho um diretório / Users / me / Sites onde guardo todos os meus projetos. Como o antigo OS X configurado.

As próximas duas linhas efetivamente dizem se o caminho não é um diretório ou um arquivo, portanto, você precisa ter certeza de que não há arquivos ou diretórios iguais aos caminhos de rota do aplicativo.

A próxima condição diz se a solicitação não terminar com as extensões de arquivo especificadas, então adicione o que você precisa lá

E o [L] último está dizendo para servir o arquivo index.html – seu aplicativo para todas as outras solicitações.

Se você ainda tiver problemas, verifique o log do apache, ele provavelmente lhe dará dicas úteis:

 /private/var/log/apache2/error_log 

Como foi mencionado nas respostas acima, os passos são-

Adicionar ao index.html
Ative o html5mode $ location.html5Mode (true) em app.js.

Com isso, o aplicativo funcionará bem. Mas apenas nos cenários quando você navega do index.html para outras páginas. Por exemplo, minha página de base é http://www.javainuse.com. Se eu clicar no link java, ele irá navegar corretamente para http://www.javainuse.com/java.

No entanto, se eu ir diretamente para http://www.javainuse.com/java receberá erro de página não encontrado.

Para resolver isso, temos que usar a reescrita de url. Dot net requer regravação de URL para o IIS.

Se você estiver usando o tomcat, a regravação de URL terá que ser feita usando o Tuckey. Pode obter mais informações sobre reescrita de URL aqui

Você também pode usar o código abaixo para redirect para a página principal (home):

 { path: '', redirectTo: 'home', pathMatch: 'full'} 

Depois de especificar seu redirecionamento como acima, você pode redirect as outras páginas, por exemplo:

 { path: 'add-new-registration', component: AddNewRegistrationComponent}, { path: 'view-registration', component: ViewRegistrationComponent}, { path: 'home', component: HomeComponent} 

**

Recomenda-se usar o estilo HTML 5 (PathLocationStrategy) como estratégia de localização no Angular

** Porque

1. Ele produz as URLs limpas e SEO Friendly que são mais fáceis de entender e lembrar pelos usuários.
2. Você pode aproveitar a renderização do lado do servidor, o que fará com que o aplicativo seja carregado mais rapidamente, renderizando as páginas no servidor antes de entregá-lo ao cliente.

Use Hashlocationstrtegy somente se você tiver que suportar os navegadores mais antigos.

Clique aqui para saber mais

Usando o modo HTML5 requer regravação de URL no lado do servidor, basicamente você tem que rewrite todos os seus links para o ponto de input do seu aplicativo (por exemplo, index.html). A exigência de uma tag também é importante para este caso, pois permite que o AngularJS diferencie entre a parte da url que é a base do aplicativo e o caminho que deve ser manipulado pelo aplicativo. Para obter mais informações, consulte o Guia do desenvolvedor do AngularJS – Usando o modo HTML5 de $ local do lado do servidor .

Atualizar

Como: Configurar seu servidor para trabalhar com html5Mode ¹

Quando você tiver o html5Mode ativado, o caractere # não será mais usado em suas URLs. O símbolo # é útil porque não requer configuração no lado do servidor. Sem # , a URL parece muito mais agradável, mas também requer reescritas do lado do servidor. aqui estão alguns exemplos:

Apache Rewrites

  ServerName my-app DocumentRoot /path/to/app  RewriteEngine on # Don't rewrite files or directories RewriteCond %{REQUEST_FILENAME} -f [OR] RewriteCond %{REQUEST_FILENAME} -d RewriteRule ^ - [L] # Rewrite everything else to index.html to allow html5 state links RewriteRule ^ index.html [L]   

Nginx reescreve

 server { server_name my-app; index index.html; root /path/to/app; location / { try_files $uri $uri/ /index.html; } } 

O IIS do Azure é reescrito

Expresso reescreve

 var express = require('express'); var app = express(); app.use('/js', express.static(__dirname + '/js')); app.use('/dist', express.static(__dirname + '/../dist')); app.use('/css', express.static(__dirname + '/css')); app.use('/partials', express.static(__dirname + '/partials')); app.all('/*', function(req, res, next) { // Just send the index.html for other files to support HTML5Mode res.sendFile('index.html', { root: __dirname }); }); app.listen(3006); //the port you want to use 

Em Angular 6, com o seu roteador, você pode usar:

 RouterModule.forRoot(routes, { useHash: false })