Angular2 QuickStart npm start não está funcionando corretamente

Estrutura do arquivo

Eu sei que o Angular2 beta acaba de ser lançado, mas não consigo reproduzir os passos do tutorial do site oficial ( https://angular.io/guide/quickstart ). Talvez alguém tenha tido problemas semelhantes e saiba o que fazer para consertar isso? Quando tento iniciar o aplicativo com o comando npm start , recebo uma saída assim:

 0 info it worked if it ends with ok 1 verbose cli [ 'node', '/usr/local/bin/npm', 'start' ] 2 info using npm@2.7.4 3 info using node@v0.12.2 4 verbose run-script [ 'prestart', 'start', 'poststart' ] 5 info prestart angular2-quickstart@1.0.0 6 info start angular2-quickstart@1.0.0 7 verbose unsafe-perm in lifecycle true 8 info angular2-quickstart@1.0.0 Failed to exec start script 9 verbose stack Error: angular2-quickstart@1.0.0 start: `concurrent "npm run tsc:w" "npm run lite" ` 9 verbose stack Exit status 127 9 verbose stack at EventEmitter. (/usr/local/lib/node_modules/npm/lib/utils/lifecycle.js:213:16) 9 verbose stack at EventEmitter.emit (events.js:110:17) 9 verbose stack at ChildProcess. (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:14:12) 9 verbose stack at ChildProcess.emit (events.js:110:17) 9 verbose stack at maybeClose (child_process.js:1015:16) 9 verbose stack at Process.ChildProcess._handle.onexit (child_process.js:1087:5) 10 verbose pkgid angular2-quickstart@1.0.0 11 verbose cwd /Users/tmrovsky/Documents/angular2/angular2-quickstart 12 error Darwin 13.4.0 13 error argv "node" "/usr/local/bin/npm" "start" 14 error node v0.12.2 15 error npm v2.7.4 16 error code ELIFECYCLE 17 error angular2-quickstart@1.0.0 start: `concurrent "npm run tsc:w" "npm run lite" ` 17 error Exit status 127 18 error Failed at the angular2-quickstart@1.0.0 start script 'concurrent "npm run tsc:w" "npm run lite" '. 18 error This is most likely a problem with the angular2-quickstart package, 18 error not with npm itself. 18 error Tell the author that this fails on your system: 18 error concurrent "npm run tsc:w" "npm run lite" 18 error You can get their info via: 18 error npm owner ls angular2-quickstart 18 error There is likely additional logging output above. 19 verbose exit [ 1, true ] 

Eu tinha: versão 0.12.2 do nó versão datilografada 1.7.5

Talvez alguém possa ajudar a resolver o problema :)?

package.json:

 { "name": "angular2-quickstart", "version": "1.0.0", "scripts": { "tsc": "tsc", "tsc:w": "tsc -w", "lite": "lite-server", "start": "concurrent \"npm run tsc:w\" \"npm run lite\" " }, "license": "ISC", "dependencies": { "angular2": "2.0.0-beta.0", "systemjs": "0.19.6", "es6-promise": "^3.0.2", "es6-shim": "^0.33.3", "reflect-metadata": "0.1.2", "rxjs": "5.0.0-beta.0", "zone.js": "0.5.10" }, "devDependencies": { "concurrently": "^1.0.0", "lite-server": "^1.3.1", "typescript": "^1.7.3" } } 

index.html:

   Angular 2 QuickStart         System.config({ packages: { app: { format: 'register', defaultExtension: 'js' } } }); System.import('app/boot') .then(null, console.error.bind(console));     Loading...   

app.components.ts:

 import {Component} from 'angular2/core'; @Component({ selector: 'my-app', template: '

My First Angular 2 App

', }) export class AppComponent {}

boot.js:

 import {bootstrap} from 'angular2/platform/browser' import {AppComponent} from './app.component' bootstrap(AppComponent); 

Altere o campo start em package.json de

 "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" " 

para

 "start": "concurrently \"npm run tsc:w\" \"npm run lite\" " 

Para conseguir que o npm start funcionar para mim, eu tinha que ter certeza de ter instalado globalmente algumas das devDependencies. Você tentou:

  • npm install -g concurrently
  • npm install -g lite-server
  • npm install -g typescript

Primeiro você precisa atualizar npm, lite-server e typescript:

 sudo npm update -g && sudo npm install -g concurrently lite-server typescript 

Exclua a pasta node_modules do seu diretório de projeto Angular (se existir). Próxima execução:

 npm install 

Depois disso, resolva os erros do ENOSPC:

 echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p 

Finalmente:

 npm start 

Este é o meu arquivo package.json:

 { "name": "reservationsystem", "version": "0.0.1", "scripts": { "tsc": "tsc", "tsc:w": "tsc -w", "lite": "lite-server", "start": "concurrent \"npm run tsc:w\" \"npm run lite\" " }, "dependencies": { "a2-in-memory-web-api": "~0.1.0", "angular2": "2.0.0-beta.3", "es6-promise": "^3.0.2", "es6-shim": "^0.33.3", "reflect-metadata": "0.1.2", "rxjs": "5.0.0-beta.0", "systemjs": "0.19.17", "zone.js": "0.5.11" }, "devDependencies": { "concurrently": "^1.0.0", "lite-server": "^2.0.1", "typescript": "^1.7.5" } } 

Eu tive o mesmo erro no Windows 10. Parece que é problema com o pacote npm simultaneamente. Eu encontrei 2 opções como resolver este erro:

1. Execute os dois comandos em dois cmds separados:

-no primeiro executar npm run tsc: w

-no segundo npm corre lite

2. Alterar package.json

-apenas alterar a opção start para isso:

"start": "tsc && npm run tsc:w | npm run lite",

Aqui está como eu resolvi o problema hoje depois de horas tentando todas essas soluções diferentes – (para quem procura outro caminho ainda).

Abra 2 instâncias de cmd no seu diretório de início rápido:

janela 1:

 npm run build:watch 

então…

janela 2:

 npm run serve 

Ele será aberto no navegador e funcionará como esperado

Eu tive um problema semelhante depois de copiar a pasta angular2-quickstart (incluindo node_modules) para criar a pasta angular2-tour-of-heroes. Isso foi estranho porque o original estava compilando bem, mas a cópia não foi …

 npm run tsc 

Consegui resolver o problema excluindo a pasta node_modules e executando novamente a instalação do npm .

Isso foi uma surpresa para mim, então eu fiz um diff entre as 2 pastas …

 diff -rw angular2-quickstart/node_modules/ angular2-tour-of-heroes/node_modules/ 

havia um monte de diferenças, muitos diffs ‘where’ nos arquivos package.json como este: –

 diff -rw angular2-quickstart/node_modules/yargs/package.json angular2-tour-of-heroes/node_modules/yargs/package.json 5c5 < "/Users/michael/Tutorials/angular2/angular2-quickstart/node_modules/lite-server" --- > "/Users/michael/Tutorials/angular2/angular2-tour-of-heroes/node_modules/lite-server" 

… que tipo de sentido faz sentido, mas também havia algo assim:

 diff -rw angular2-quickstart/node_modules/utf-8-validate/build/gyp-mac-tool angular2-tour-of-heroes/node_modules/utf-8-validate/build/gyp-mac-tool 607c607,608 < return {k: self._ExpandVariables(data[k], substitutions) for k in data} --- > return dict((k, self._ExpandVariables(data[k], > substitutions)) for k in data) 

… que eu não entendo nada.

Bem, espero que isso ajude.

Altere o campo de início em package.json de:

 "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" " 

Para:

 "start": "concurrently \"npm run tsc:w\" \"npm run lite\" " 

Isso realmente ajudou.

Esta resposta é em relação ao excelente curso Pluralsight “Angular 2 Fundamentals” de Jim Cooper.

Se como eu, você está tendo problemas para começar a executar o comando npm start em uma máquina com Windows 10, sugiro o seguinte:

Inicie o git bash como administrador (siga as etapas no vídeo) Navegue até o diretório do projeto ( ng2-fundamentals ) e digite os seguintes comandos:

 npm config get registry npm cache clean npm install 

Quando a instalação estiver completa, você precisará modificar o arquivo get-shell.js localizado no módulo spawn-default-shell dentro da pasta node_modules da seguinte forma:

Altere o seguinte:

 const DETECT_SH_REGEX = /sh$/; 

para isso:

 const DETECT_SH_REGEX = /sh/; 

Observe o $ removido do final da string sh (crédito para o autor original desta correção alfian777 que postou a solução no github )

Salve o arquivo e vá para o console do git bash e digite npm start

Você não deve ver nenhum erro agora e a página localhost iniciará no seu navegador padrão (alternativamente, abra seu navegador e navegue até http: // localhost: 8808 / ).

Nenhuma dessas respostas ajudou com o Ubuntu . Finalmente, encontrei uma solução do John Papa (autor do servidor lite).

No Ubuntu 15.10, o Angular 2 Quick Start ganhou vida depois de executar isso no terminal:

echo fs.inotify.max_user_watches = 524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

Aparentemente, aumenta o número de relógios de arquivo disponíveis.

Fonte da resposta: https://github.com/johnpapa/lite-server/issues/9

Eu encontrei este mesmo problema. No entanto, nenhuma das respostas acima foram soluções adequadas para mim. Acontece que foi devido mais ao meu ambiente de desenvolvimento, em seguida, qualquer uma das versões das coisas.

Desde que usei o Visual Studio Code, configurei uma tarefa de compilation no VSC para compilar o TypeScript como um observador. Esse foi o problema. O VSC já havia iniciado uma tarefa do NPM para o TSC e, portanto, ao executar o script ‘start’ do tutorial, estava tendo problemas com o fato de o VSC ainda estar executando o TSC -w.

Eu parei a tarefa no VSC e reran o script ‘start’ e funcionou muito bem.

Solução A: Stop e npm Start

  • Comando VSC> Tarefas: encerrar tarefas em execução
  • Terminal $ npm start

Depois disso, para colocar tudo em funcionamento, mudo o script de início para apenas iniciar o servidor e não iniciar o TSC.

Solução B: Alterar o script de início do npm

  • Substituir

    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" "

  • com

    "start": "npm run lite"

Solução C: Basta executar o comando do servidor lite

 `npm run lite` 

Resolvi meu problema com o programa Quick Start seguindo o link abaixo.

Angular 2 QuickStart Live-server error

Alterar as configurações de scripts Package.json

“start”: “tsc && concorrentemente \” npm run tsc: w \ “\” npm run lite \ “,

para

“start”: “concorrentemente \” npm executar tsc: w \ “\” npm executar lite \ “”,

Esta resposta é apenas para usuários do Windows 10 e, como você verá abaixo, suspeito que o problema esteja acontecendo apenas para esses usuários:

Para descobrir o que está acontecendo, você pode executar o comando no PowerShell e ele informará qual é o problema real:

 PS C:\Users\Laurent-Philippe> tsc && concurrently "tsc -w" "lite-server" At line:1 char:5 + tsc && concurrently "tsc -w" "lite-server" + ~~ The token '&&' is not a valid statement separator in this version. + CategoryInfo : ParserError: (:) [], ParentContainsErrorRecordException + FullyQualifiedErrorId : InvalidEndOfLine 

Basicamente, a mensagem explica que o token “&&” ainda não é válido com o Windows 10. E, para aqueles que estão se perguntando, o mesmo comando substituindo && por &, nos informou que o operador e comercial está reservado para uso futuro:

  (&) character is not allowed. The & operator is reserved for future use; wrap an ampersand in double quotation marks ("&") to pass it as part of a string. 

Conclusões

  • Se você quiser iniciar manualmente este comando a partir do powershell, você pode usar isto:

    tsc “&” concorrentemente “tsc -w” “lite-server”

  • Se você deseja iniciar seu aplicativo com o npm start, substitua a linha inicial em seu pacote.json por:

    “start”: “tsc e concorrentemente \” tsc -w \ “\” lite-server \ “”

  • Como alternativa, a resposta do user60108 também funciona porque ele não está usando o E comercial:

    “start”: “concorrentemente \” npm executar tsc: w \ “\” npm executar lite \ “”

É mais provável que sua versão do NPM seja antiga, recentemente eu tive isso em uma máquina de desenvolvedor no trabalho, digite:

 npm -v 

Se for algo menor que a versão estável atual, e você pode apenas atualizar sua instalação do Node.js aqui https://nodejs.org/en/ 🙂

Isso funcionou comigo, colocar /// no topo do arquivo de boot.

Por exemplo:-

Em boot.ts

 ///  import {bootstrap} from 'angular2/platform/browser' import {AppComponent} from './app.component' bootstrap(AppComponent); 

Nota: – Certifique-se de mencionar o caminho de referência correto.

  1. Em devDependencies, typescript é 1.7.3, mas você tem 1.7.5 fix common.
  2. Importe seus arquivos js na ordem correta em index.html . para mais informações consulte este repository https://github.com/pkozlowski-opensource/ng2-play/blob/master/index.html ou consulte o meu repository aqui

    https://github.com/MrPardeep/Angular2-DatePicker

index.html

          

Eu posso reproduzir etapas sem nenhum problema.

Tente por favor:

(1) remova esta linha do seu index.html

  

(2) modificar arquivo: app.components.ts , excluir “,” no final da linha no campo de modelo

 @Component({ selector: 'my-app', template: '

My First Angular 2 App

' })

Aqui está o meu ambiente:

 $ node -v v5.2.0 $ npm -v 3.3.12 $ tsc -v message TS6029: Version 1.7.5 

Por favor, consulte este repo para o meu trabalho: https://github.com/AlanJui/ng2-quick-start

Tente isto:

  1. Instale as versões mais recentes npm / nodejs Eu limpei minha instalação npm
  2. Depois disso, instale o tsd npm install -g tsd
  3. Então clone https://github.com/johnpapa/angular2-tour-of-heroes.git
  4. Finalmente npm i e npm start

Instalar os pacotes globalmente é uma maneira de fazer isso, mas isso o restringe a usar a mesma versão em todos os projetos nos quais eles são usados.

Em vez disso, você pode prefixar seus scripts ./node_modules/.bin com ./node_modules/.bin . No seu caso, o package.json ficaria assim:

 { "name": "reservationsystem", "version": "0.0.1", "scripts": { "tsc": "./node_modules/.bin/tsc", "tsc:w": "npm run tsc -w", "lite": "./node_modules/.bin/lite-server", "start": "./node_modules/.bin/concurrent \"npm run tsc:w\" \"npm run lite\" " }, "dependencies": { "a2-in-memory-web-api": "~0.1.0", "angular2": "2.0.0-beta.3", "es6-promise": "^3.0.2", "es6-shim": "^0.33.3", "reflect-metadata": "0.1.2", "rxjs": "5.0.0-beta.0", "systemjs": "0.19.17", "zone.js": "0.5.11" }, "devDependencies": { "concurrently": "^1.0.0", "lite-server": "^2.0.1", "typescript": "^1.7.5" } } 

Eu acho que o npm deve fornecer o ./node_modules/.bin na frente de cada comando “script” que está nesse diretório por padrão, e é por isso que o package.json original.json parecia do jeito que ele fazia. Não tenho certeza se esse recurso está em cada versão do npm, ou se há alguma configuração que você deve especificar. Vale a pena investigar!

Eu tive o mesmo problema, nós dois nos esquecemos de include o ‘s’ em componentes aqui:

 import {AppComponent} from './app.component' 

Deveria estar:

boot.js:

 import {bootstrap} from 'angular2/platform/browser' import {AppComponent} from './app.components' bootstrap(AppComponent); 

Eu tive o mesmo erro no OS X (nó v6.2.0 e npm v3.9.3 instalado com homebrew) e não foi resolvido por nenhum dos itens acima. Eu tive que adicionar caminhos completos para os comandos que estão sendo executados simultaneamente.

Em package.json, mudei isso:

 "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ", 

para isso:

 "start": "tsc && concurrently \"/Users/kyen/.node/bin/npm run tsc:w\" \"/Users/kyen/.node/bin/npm run lite\" ", 

É claro que você precisará atualizar os caminhos corretos com base em onde os binários globais do nó estão armazenados. Note que não precisei adicionar o caminho ao primeiro comando tsc. Parece que só precisa dos caminhos completos especificados.

Eu encontrei o mesmo erro. E depois de muita pesquisa, finalmente encontrei este: instalação do aplicativo Angular2 e execução via package.json . Então eu tentei replace

"scripts": { "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ", "lite": "lite-server", "postinstall": "typings install", "tsc": "tsc", "tsc:w": "tsc -w", "typings": "typings" }, para

"scripts": { "start": "concurrently \"npm run tsc:w\" \"npm run lite\" ", "lite": "lite-server", "postinstall": "typings install", "tsc": "tsc", "tsc:w": "tsc -w", "typings": "typings" },

Espero que ajude quem recebe o mesmo erro.

PS: Meu erro não é o mesmo que Tomasz, que é minha versão npm é 3.7.3 e a versão do nó é 5.9.1.

Desinstale todos os pacotes de nós existentes. Atualize o nó e o npm. Como é indicado na documentação, pelo menos, no nó v5.xx e npm 3.xx, isso causará erros.

Faça npm clean . Então faça o npm install , npm start .

Isso resolveu o problema para mim.

Se você usar proxy, poderá causar esse erro:

  1. npm config set proxy http: // nome de usuário: pass @ proxy: porta

  2. npm config set https-proxy http: // nome de usuário: pass @ proxy: porta

  3. crie uma nomeação de arquivo .typingsrc na sua pasta de aplicativos que inclui

proxy = (valor na etapa 1) https-proxy = (valor na etapa 1)

  1. executar o cache do npm limpo
  2. executar a instalação do npm
  3. executar tipografias npm instalar
  4. executar o npm start

vai funcionar então

adicione a seguinte seção em tsconfig.json

  "compilerOptions": { "target": "es5", "module": "system", "moduleResolution": "node", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "removeComments": false, "noImplicitAny": false 

}

e em \ node_modules \ typings \ typings.json

  "ambientDependencies": { "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim /es6-shim.d.ts#6697d6f7dadbf5773cb40ecda35a76027e0783b2" } 

Depois disso, muda para mim.

Para usuários do Ubuntu 16.x, instalar a última versão 5.x resolve meu problema no Ubuntu

 curl -sL https://deb.nodesource.com/setup_5.x | sudo -E bash - sudo apt-get install -y nodejs 

Aparentemente, há mais de uma maneira pela qual o início rápido do angular2 pode falhar ao iniciar. Eu tive o mesmo problema executando Angular2 versão 2.0.0 sob uma nova instalação do nó 6.6.0 / npm 3.10.3 no Windows 7. No meu caso, executando npm start despejou uma tonelada de erros typescript:

 c:\git\angular2-quickstart>npm start > angular2-quickstart@1.0.0 start c:\git\angular2-quickstart > tsc && concurrently "npm run tsc:w" "npm run lite" node_modules/@angular/common/src/directives/ng_class.d.ts(46,34): error TS2304: Cannot find name 'Set'. node_modules/@angular/common/src/pipes/async_pipe.d.ts(39,38): error TS2304: Cannot find name 'Promise'. (...) 

Esse problema é discutido na edição de início rápido angular # 63, “tipings” não sendo instalados corretamente . Esse bilhete dá a correção como

 $ ./node_modules/.bin/typings install 

que funcionou para mim. (Eu não tenho certeza do jeito “certo” de fazer isso ainda.)

Eu o tutorial de início rápido eu passei pelas etapas até “npm start”. Então eu peguei esse erro. Em seguida, apaguei a pasta node_modules sob o procedimento de início rápido em ângulo e executei a instalação do npm novamente. Agora funciona.

Por favor, certifique-se de que os nomes estejam corretos, alterando assim o component em boot.js para os components . insira a descrição da imagem aqui

Vá para o endereço https://github.com/npm/npm/issues/14075 . E tente a resposta de juaniliska. Talvez te ajude.

npm config obter registro

npm cache clean

npm install

No meu caso, eu só precisava adicionar um arquivo .ts fictício.Então eu criei um arquivo test.ts sem conteúdo e executei npm start para resolver o problema.