Angular2 QuickStart npm start работает неправильно

Ответ 1

Измените поле start в package.json из

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

to

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

Ответ 2

Чтобы запустить npm start для меня, мне нужно было убедиться, что я установил глобальные функции devDependencies. Вы пробовали:

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

Ответ 3

Сначала вам нужно обновить npm, lite-server и typescript:

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

Удалите папку node_modules из каталога проекта Angular (если есть). Следующий запуск:

npm install

После этого устраните ошибки ENOSPC:

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

Наконец:

npm start

Это мой файл 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"
  }
}

Ответ 4

У меня была такая же ошибка на Windows 10. Похоже, это проблема с одновременно пакет npm. Я нашел 2 варианта, как решить эту ошибку:

• 1. Запустите обе команды в 2 отдельных cmds:

  • в первом прогоне: npm run tsc:w
  • во втором: npm run lite

• 2. Изменить package.json

  • просто измените параметр запуска на это: "start": "tsc && npm run tsc:w | npm run lite",

Ответ 5

Вот как я решил проблему сегодня после нескольких часов попробовать все эти разные решения - (для тех, кто ищет другой способ еще).

Откройте 2 экземпляра cmd в каталоге быстрого запуска:

окно # 1:

npm run build:watch

то...

окно # 2:

npm run serve

Затем он откроется в браузере и будет работать как ожидалось

Ответ 6

У меня была аналогичная проблема после копирования папки angular2 -quickstart (включая node_modules) для создания папки angular2 -tour-of-heroes. Это было странно, потому что оригинал компилировался отлично, но копия не была...

npm run tsc

Мне удалось решить проблему с помощью удаления папки node_modules и повторной установки npm install.

Это было для меня неожиданностью, поэтому я сделал разницу между двумя папками...

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

было много различий, много "where" различается в файлах package.json следующим образом: -

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"

... какой смысл имеет смысл, но были и такие: -

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)

... который я вообще не понимаю.

Хорошо, надеюсь, это поможет.

Ответ 7

Измените начальное поле в package.json из:

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

To:

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

Это действительно помогло.

Ответ 8

Этот ответ относится к отличному курсу Pluralsight "Angular 2 Основы" Джима Купера.

Если у меня возникли проблемы с запуском запуска команды npm на компьютере под управлением Windows 10, я предлагаю следующее:

Запустите git bash в качестве администратора (следуйте инструкциям в видео) Перейдите в каталог проекта (ng2-основы), а затем введите следующие команды:

npm config get registry

npm cache clean

npm install

После завершения установки вам необходимо будет изменить файл get-shell.js, расположенный в модуле оболочки-породы по умолчанию в папке node_modules, как показано ниже:

Измените следующее:

const DETECT_SH_REGEX = /sh$/;

:

const DETECT_SH_REGEX = /sh/;

Обратите внимание, что $удалено из конца строки sh (кредит оригинальному автору этого исправления alfian777, который разместил решение на github)

Сохраните файл, а затем перейдите в консоль git bash и введите npm start

Теперь вы не должны видеть никаких ошибок, и локальная страница запускается в браузере по умолчанию (альтернативно откройте ваш браузер и перейдите к http://localhost:8808/).

Ответ 9

Ни один из этих ответов не помог с Ubuntu. Наконец, я столкнулся с решением от John Papa (автор Lite-сервера).

В Ubuntu 15.10 после запуска этого на терминале оживился Angular 2

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

По-видимому, он увеличивает количество доступных Файловых часов.

Источник ответа: https://github.com/johnpapa/lite-server/issues/9

Ответ 10

Я столкнулся с этой же проблемой. Тем не менее, ни один из приведенных выше ответов не был для меня правильным решением. Оказывается, это связано скорее с моей средой разработки, чем с любыми версиями вещей.

Поскольку я использовал код Visual Studio, я создал задачу сборки в VSC для компиляции TypeScript в качестве наблюдателя. Это была проблема. VSC уже запустил задачу NPM для TSC, и поэтому при выполнении сценария запуска start у него возникли проблемы с тем фактом, что VSC все еще работает tsc -w.

Я остановил задачу в VSC и повторно запустил скрипт "start", и он работал просто отлично.

Решение A: Остановите и запустите npm

• Команда VSC> Задачи: прекратить выполнение задач
• Терминал $ npm start

После этого, чтобы все работало вместе, я изменяю сценарий запуска, чтобы просто запустить сервер и фактически не запускать TSC.

Решение B. Измените стартовый скрипт npm

• Заменить

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

• с

  "start": "npm run lite"

Решение C: Просто введите команду lite server

'npm run lite'

Ответ 11

Я решил свою проблему с программой Quick Start, перейдя по ссылке ниже.

Ошибка Angular 2 QuickStart Live-сервера

Изменить настройки скриптов Package.json

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

в:

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

Ответ 12

Этот ответ предназначен только для пользователей Windows 10, и, как вы увидите ниже, я подозреваю, что проблема происходит только для этих пользователей:

Чтобы узнать, что происходит, вы можете запустить команду в PowerShell, и она скажет вам, что является реальной проблемой:

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

В основном, сообщение объясняет, что токен "& &" еще не работает с Windows 10. И для тех, кто задается вопросом, ту же команду, заменяющую && с помощью &, сообщил нам, что оператор амперсанда зарезервирован для использования в будущем:

 (&) 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.

Выводы

• если вы хотите вручную запустить эту команду из командной строки, вы можете использовать это вместо:

  tsc "&" одновременно "tsc -w" "lite-server"

• если вы хотите запустить приложение с запуском npm, замените стартовую строку в вашем package.json на:

  "start": "tsc и одновременно \tsc -w \" \ "lite-server \" "

• ответ пользователя60108 также работает, потому что он не использует амперсанд:

  "start": "одновременно" npm run tsc: w\ "\" npm run lite\""

Ответ 13

• В devDependencies typescript равен 1.7.3, но у вас есть 1,7.5 исправление общего.
• Импортируйте файлы js в правильном порядке в index.html. для получения дополнительной информации обратитесь к этому репозиторию https://github.com/pkozlowski-opensource/ng2-play/blob/master/index.html или обратитесь к моему репозиторию здесь

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

index.html

<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <script>
        System.config({
                    defaultJSExtensions: true,
                    map: {
                        rxjs: 'node_modules/rxjs'
                    },
                    packages: {
                        rxjs: {
                        defaultExtension: 'js'
                      }
                    }
                });
    </script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/router.dev.js"></script>
    <script src="node_modules/angular2/bundles/http.dev.js"></script>

<script>
    System.import('dist/bootstrap');
</script> 

Ответ 14

Скорее всего, ваша версия NPM устарела, я недавно получил это на машине разработчика на работе, введите:

npm -v

Если это что-то меньшее, чем текущая стабильная версия, и вы можете просто обновить установку Node.js отсюда https://nodejs.org/en/: )

Ответ 15

Это сработало, поместите /// <reference path="../node_modules/angular2/typings/browser.d.ts" /> в начало файла bootstraping.

Например: -

В boot.ts

/// <reference path="../node_modules/angular2/typings/browser.d.ts" />
import {bootstrap} from 'angular2/platform/browser'
import  {AppComponent} from './app.component'

bootstrap(AppComponent);

Примечание. - Убедитесь, что вы указали правильный путь ссылки.

Ответ 16

Я могу без проблем воспроизвести шаги.

Попробуйте:

(1) удалите эту строку из index.html

<script src="node_modules/es6-shim/es6-shim.js"></script>

(2) изменить файл: app.components.ts, delete "," в конце строки в поле шаблон

@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1>'
})

Вот моя среда:

$ node -v
v5.2.0

$ npm -v
3.3.12

$ tsc -v
message TS6029: Version 1.7.5

Пожалуйста, обратитесь к этому репо для моей работы: https://github.com/AlanJui/ng2-quick-start

Ответ 17

Попробуйте следующее:

• Установить последние версии npm/nodejs Я очистил установку npm
• После этого установите tsd npm install -g tsd
• Затем clone https://github.com/johnpapa/angular2-tour-of-heroes.git
• Наконец npm i и npm start

Ответ 18

Установка пакетов по всему миру - это один из способов сделать это, но это ограничивает использование одной и той же версии во всех проектах, в которых они используются.

Вместо этого вы можете прикрепить свои npm-скрипты к ./node_modules/.bin. В вашем случае package.json будет выглядеть так:

{
  "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"
  }
}

Я думаю, что npm должен поставлять ./node_modules/.bin перед каждой командой "script", которая в этом каталоге по умолчанию, поэтому исходный package.json выглядел так, как это было сделано. Я не уверен, что эта функция присутствует в каждом выпуске npm, или если есть какой-либо параметр конфигурации, который вы должны указать. Это стоит посмотреть!

Ответ 19

У меня была та же проблема, мы оба забыли включить здесь 's' в компоненты:

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

Должно быть:

boot.js:

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

bootstrap(AppComponent);

Ответ 20

У меня была такая же ошибка в OS X (node v6.2.0 и npm v3.9.3, установленная с homebrew), и она не была решена ни одним из вышеперечисленных. Мне пришлось добавлять полные пути к командам, выполняемым одновременно.

В package.json я изменил это:

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

:

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

Вам, конечно, нужно будет обновить правильные пути, основанные на том, где хранятся ваши глобальные двоичные файлы node. Обратите внимание, что мне не нужно было добавлять путь к первой команде tsc. Кажется, что одновременно требуются только указанные пути.

Ответ 21

Я встретил ту же ошибку. И после большого поиска я наконец нашел это: Angular2 приложение установить и запустить через package.json. Затем я попытался заменить

"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" }, к

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

Надеюсь, что это поможет тем, кто получает ту же ошибку.

PS: Моя ошибка - это не то же самое, что Tomasz, то есть моя версия npm - 3.7.3, а node - версия 5.9.1.

Ответ 22

Удалите все существующие пакеты node. Обновите node и npm. Как указано в документации, как минимум node v5.x.x и npm 3.x.x иначе это вызовет ошибки.

Сделайте npm clean. Тогда do npm install, npm start.

Это решило проблему для меня.

Ответ 23

Если вы используете прокси, это может привести к следующей ошибке:

1. npm config set proxy http://username:[email protected]:port

2. npm config set https-proxy http://username:[email protected]:port

3. создайте файл с именем .typingsrc в папке приложения, который включает в себя:

   • proxy = (значение на шаге 1)
   • https-proxy = (значение на шаге 1)

4. запустить npm cache clean

5. запустить npm install
6. запустить npm typings install
7. запустить npm start

тогда будет работать

Ответ 24

Добавьте следующий раздел в tsconfig.json:

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

и в \node_modules\typings\typings.json:

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

После этих изменений у меня все работает.

Ответ 25

Для пользователей Ubuntu 16.x установка последней версии 5.x разрешает мою проблему в ubuntu

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

Ответ 26

По-видимому, существует несколько способов, с помощью которых angular2 -quickstart может не запускаться. У меня была такая же проблема: Angular2 version 2.0.0 под новой установкой node 6.6.0/npm 3.10.3 в Windows 7. В моем случае с запуском npm start сброшено тонны ошибок typescript:

c:\git\angular2-quickstart>npm start

> [email protected] 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'.
(...)

Эта проблема обсуждается в angular проблемах с быстрым запуском # 63, "типизация" неправильно установлена ​​. Этот билет дает исправление как

$ ./node_modules/.bin/typings install

который работал на меня. (Я не уверен в правильном способе сделать это еще.)

Ответ 27

В руководстве по быстрому старту я прошел все этапы вплоть до npm start. Тогда я получил эту ошибку. Затем я удалил папку node_modules в папке angular-quickstart и снова запустил npm install. Теперь это работает.

Ответ 28

Пожалуйста, убедитесь, что имена верны, изменив component на boot.js на components.

Ответ 29

Перейдите в https://github.com/npm/npm/issues/14075. И попробуйте ответить juaniliska. Может быть, поможет вам.

npm config получить реестр

npm cache clean

npm install

Ответ 30

В файле package.json я удалил строку с "prestart": "npm run build". Это, по-видимому, является блокирующей командой и происходит до (npm) запуска, тем самым предотвращая другие команды запуска.