0

Eu terminei meu app e rodei o comando ng build --prod para gerar a versão de produção, depois rodei http-server dentro do diretório criado pelo comando anterior e o servidor funcionou normalmente, porém quando eu coloquei os arquivos gerados para rodar no Apache do Xampp o console retorna o seguinte erro:

GET http://localhost/styles.cce9a441d9ef86e1ffb6.css 404 (Not Found) 5localhost/:13 GET http://localhost/polyfills.7a0e6866a34e280f48e7.js 404 (Not Found)

Meu package.json:

{
  "name": "app12",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.1.0",
    "@angular/common": "^6.1.0",
    "@angular/compiler": "^6.1.0",
    "@angular/core": "^6.1.0",
    "@angular/forms": "^6.1.0",
    "@angular/http": "^6.1.0",
    "@angular/platform-browser": "^6.1.0",
    "@angular/platform-browser-dynamic": "^6.1.0",
    "@angular/router": "^6.1.0",
    "bootstrap": "^4.0.0-alpha.6",
    "core-js": "^2.5.4",
    "rxjs": "^6.0.0",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.7.0",
    "@angular/cli": "~6.1.2",
    "@angular/compiler-cli": "^6.1.0",
    "@angular/language-service": "^6.1.0",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1",
    "typescript": "~2.7.2"
  }
}
1
  • Obs: esse erro não deixa renderizar os componentes do app Commented 9/08/2018 às 18:07

2 Respostas 2

1

Já aconteceu comigo de o comando ng serve apagar os arquivos gerados pelo ng build. faça o seguinte, rode o ng build e copie os arquivos para o Xampp antes de rodar o ng serve novamente. Para definir um outro diretório onde o Angular irá gerar os arquivos use o parametro --output-path:

ng build --output-path=novo_diretório

Caso não dê certo, verifique qual o padrão de roteamento que o Angular está usando. Existem dois, HashLocationStrategy e PathLocationStrategy, esse último é o padrão do Angular. O HashLocationtStrategy é definido da seguinte forma:

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

Se não tiver feito essa configuração acima então sua aplicação está usando o PathLocationStrategy. Nesse caso é preciso definir o base href dentro da tag HEAD no arquivo index.html:

<base href="/">
5
  • Tentei fazer o que falou mas não adiantou, editei a publicação contendo a versão do Angular Commented 9/08/2018 às 19:16
  • Editei a resposta. Commented 9/08/2018 às 19:39
  • O meu arquivo index já possui a tag base :/ Commented 9/08/2018 às 19:43
  • tenta alterar o base href pra esse aqui: <base href="./"> e colocar o .htaccess que o thxmxx passou. Coloca o .htaccess na raiz dos arquivos gerados. Commented 9/08/2018 às 20:13
  • Minha aplicação não estava funcionando por causa de um ponto antes da barra do href, não precisei do htacces. Commented 10/08/2018 às 17:23
1

Mude(ou crie) o arquivo .htaccess, na raiz do site.

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]

RewriteRule ^(.*) /index.html [NC,L]

Edit:

Se quiser usar o nginx é mais simples

Só editar o arquivo /etc/nginx/sites-enabled/default

server {
    ...
    root /caminho/do/site;
    ...
    location / {
                    try_files $uri $uri/ /index.html;
            }
    }
3
  • Não adiantou nada, eu tenho que criar esse arquivo na raiz dos arquivos gerados para produção ou não ? Commented 9/08/2018 às 18:37
  • Isso! Mas tem que habilitar link. Ou faz sem ser pelo htaccess, mas pela configuraçã do site no apache.
    – thxmxx
    Commented 9/08/2018 às 20:09
  • ps: isso não é um problema do angular
    – thxmxx
    Commented 9/08/2018 às 20:11

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .