Solucionado (ver solução)
Solucionado
(ver solução)
9
respostas

Arquivos em Produção

Estou enviando para produção um projeto feito em Angular2. Tenho uma pasta chamada DIST, onde os arquivos HTML e JS são enviados, utilizando GULP.

Porém, ao executar o projeto dessa pasta, ocorre erro na seguintes dependências:

Erro: Failed to load resource: net::ERR_FILE_NOT_FOUND

Alguém sabe se tem que executar algo para colocar em produção essa dependências, se tem que ter uma pasta lá com esses arquivos, etc..

Obrigado.

9 respostas

Oii Alan, como você está enviando os arquivos para produção? Por ftp? Ou por uma ferramenta de deploy?

Bom dia.

Estou gerando uma pasta externa em minha máquina para teste. E no servidor, eu envio via FTP.

Utilizo o Gulp para pegar os arquivos HTML e JS e gerar em uma pasta OutDir os arquivos de saída, para não ficar os arquivos TS (typeScript), somente HTML e JS.

Acho que o problema é em alguma dependência ao gerar a saída de produção, mas não consegui identificar o que é. Somente que o erro ocorre na index.html, com os scripts abaixo:

node_modules/chart.js/dist/Chart.bundle.min.js node_modules/core-js/client/shim.min.js node_modules/zone.js/dist/zone.js node_modules/reflect-metadata/Reflect.js node_modules/systemjs/dist/system.src.js

Oii Alan, vc está enviando a pasta node_modules para o servidor também? Acho que também precisa...

Boa tarde.

Então, pelo que eu li, posso estar enganado, quando você importa os módulos pelo node, você informa as dependências de desenvolvimento de de produção. Isso já vai para a pasta de output, gerando somente os JS do que está nas dependências. Vi que essas são dependências do angular2, então fiquei na dúvida, como subir isso para produção, seja na web, ou em uma pasta local output.

Você tem um package.json diferentes para ambientes de prod e dev? Manda seu package.json e o erro completo :)

{
  "name": "client",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "tsc:w": "tsc -w",
    "start": "npm run tsc:w",
    "typings": "typings"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/router": "3.0.0",
    "@angular/upgrade": "2.0.0",
    "angular2-in-memory-web-api": "0.0.20",
    "bootstrap": "^3.3.6",
    "chart.js": "^2.4.0",
    "core-js": "^2.4.1",
    "jquery": "^2.2.2",
    "ng2-bootstrap": "^1.1.16",
    "ng2-charts": "^1.4.1",
    "ng2-dropdown": "0.0.15",
    "ng2-modal": "0.0.22",
    "ng2-sidebar": "^1.7.0",
    "ng2-tooltip": "0.0.5",
    "ng2-translate": "^4.2.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.12",
    "systemjs": "0.19.27",
    "zone.js": "^0.6.23"
  },
  "devDependencies": {
    "typescript": "^2.0.2",
    "typings": "^1.3.2",
    "gulp": "~3.5.5"
  }
}

Eu fiz o curso de Angular2 e fiz um sistema, com base no que foi dados nas aulas. Agora vou subir os arquivos para produção. Eu subi na estrutura (igual de desenvolvimento) uma pasta APP, onde eu coloco os componentes TS, que geraram os arquivos JS.

Na pasta raiz eu subi o arquivo INDEX.HTML (erro) e o arquivo "systemjs.config.js".

Minha estrutura está assim:

------ /app/

------ /css/

--index.html

--systemjs.config.js

solução!

Resolvido!

Utilizei o GULP para minificar os arquivos das dependências e concatenar. Com isso fiz uma referência somente a ele na INDEX.HTML, fazendo o SRC do mesmo.