Angular 2 Development with TypeScript

Вопрос-ответ JavaScript
1

В книге Angular 2 Development with TypeScript Если скопировать Listing 2.1. TypeScript index.html и запустить, то браузеры ругаются: Uncaught ReferenceError: System is not defined
** at index.html:9.
Страница из этого листинга загружает следующий Listing 2.2. TypeScript main.ts
Кто - нибудь понимает, что нужно сделать?

2

Скорее всего дело в том что ты открываешь html страницу в браузере с файловой системы. В этом случае у браузера ограниченные возможности в некоторых API (ajax, например), которые приложение использует чтобы подгрузить зависимости.

Нужно загружать html страницу с локального http сервера. Если не знаешь как настроить такой, то вот инструкция:

  1. Поставь serve так : npm install serve -g
  2. В командной строке (cmd в винде или bash в линуксе/максоси) перейди в папке где лежит html файл. Файл назови index.html.
  3. Запусти serve так: serve . (точка нужна). Если все верно в консоли он напишет по какому адресу http сверер будет отдавать содержимое папки, в которой ты запустил serve.
  4. Открой соответствующий адрес в браузере. Скорее всего это будет http://localhost:5000.
  5. Редактируй html/ts файл, обновляй браузер и наблюдай свои изменения.
1 лайк
3

Между прочим у меня в командной строке почему то не переходит на другой логический диск (F). Кто-нибудь знает как решить проблему?

4

Этот ответ гуглится просто “change drive cmd”.

How to access a certain drive
To access another drive, type that drive’s letter, followed by “:”. For instance, if you wanted to change the drive from “C:” to “D:”, you should type “d:” and then press Enter on your keyboard.
Command Prompt, cmd, Windows, basic, commands, files, folders

https://www.digitalcitizen.life/sites/default/files/gdrive/cmd_basic_commands/cmd_4.png

1 лайк
5

Failed to load resource: the server responded with a status of 500 (Internal Server Error)

6

Покажи логи из консоли где сервер запущен с момента запуска serve .

1 лайк
7

То я не с того каталога (где индекс…) запускал серв. Сделал правильно. Браузер снова ругает, как и раньше
(index):9 Uncaught ReferenceError: System is not defined
** at (index):9**

8

Эта ошибка означает что эти скрипты

  <script src="//unpkg.com/zone.js@0.6.12"></script> 
  <script src="//unpkg.com/typescript@2.0.0"></script> 
  <script src="//unpkg.com/systemjs@0.19.37/dist/system.src.js"></script> 
  <script src="//unpkg.com/core-js/client/shim.min.js"></script>

из head не загрузились. Ты из прописал? Если да - покажи как выглядит вкладка Network (открой ее, обнови страницу в браузере, покажи скриншот).

1 лайк
9

Я не ничего об этом не знаю …

10

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

%D0%9A%D1%83%D1%80%D1%81_JavaScript
Курс_JavaScript.png2222×1328 361 KB

Если сложно разобраться - попробуй найти код готовый к запуску. Возможно есть репозиторий со встроенными командами для запуска.

Но в целом очень рекомендую разобраться, ибо все равно придется. Работа с консолью - один из базовых навыков

1 лайк
11

А где об этом почитать?

12

Если с английским нет проблем, то официальную документацию https://developer.chrome.com/devtools

Отдельно про вкладку Networking.

Но для того чтобы выполнить описанные мною шаги знать эти статьи не надо. Со статьями надо ознакомиться чтобы знать какие аспекты страницы бывают и где их найти.

1 лайк
13

Не нашел я там как прописывать скрипты (или зависимости)…
К стати в той книге Chapter 2. Getting started with Angular там в 2.1.4. Launching applications . Автор описывает запуск сервера (подобно тому как ты подсказал). Прописывание скриптов он не указывает, но обещает, что все будет работать.
In the browser’s Developer Tools panel, you can see that the template you specified for HelloWorldComponent becomes the content of the element, and the data-binding expression is replaced with the actual value you used to initialize the name property in the constructor of the component.

14

В общем нашел кое-что: 9 строка, на которую ругается браузер
System.config({
Ее автор книги комментирует так : Конфигурирует загрузчик SystemJS так, чтобы он загружал и компилировал код TypeScript.
Так что сначала мне нужно разобраться с SystemJS.
Благодарю за помощь.

15

Тебе ну нужно разбираться с ним. Тебе нужно убедиться что скрипт systemjs <script src="//unpkg.com/systemjs@0.19.37/dist/system.src.js"></script> подгрузился. Я просил показать вкладку Network потому что из ее состояния могу сделать вывод что этот скрипт подгрузился или нет.

1 лайк
16

image2
image2.jpg1366×621 92.5 KB

17

Оставь консоль открытую как сейчас и перезагрузи страницу. Инструмент записывает то какие ресурсы подгрузились только когда открыт. И кинь скриншот с результатом

1 лайк
18

image3
image3.jpg1366×639 80.8 KB
image4
image4.jpg1366×668 112 KB

19

Не вижу чтобы эти скрипты подгружались. А покажи исходный код самой страницы прямо в браузере (контекстное меню -> View Page Source)

1 лайк
20 
<!DOCTYPE html>
<html>
<head>
  <script src="//unpkg.com/zone.js@0.6.12"></script> 
  <script src="//unpkg.com/typescript@2.0.0"></script> 
  <script src="//unpkg.com/systemjs@0.19.37/dist/system.src.js"></script> 
  <script src="//unpkg.com/core-js/client/shim.min.js"></script>
  <script>
    System.config({ 
      transpiler: 'typescript',
      typescriptOptions: {emitDecoratorMetadata: true},
      map: { 
        'rxjs': 'https://unpkg.com/rxjs@5.0.0-beta.12',
        '@angular/core'                    : 'https://unpkg.com/@angular/core@2.0.0',
        '@angular/common'                  : 'https://unpkg.com/@angular/common@2.0.0',
        '@angular/compiler'                : 'https://unpkg.com/@angular/compiler@2.0.0',
        '@angular/platform-browser'        : 'https://unpkg.com/@angular/platform-browser@2.0.0',
        '@angular/platform-browser-dynamic': 'https://unpkg.com/@angular/platform-browser-dynamic@2.0.0'
      },
      packages: { 
        '@angular/core'                    : {main: 'index.js'},
        '@angular/common'                  : {main: 'index.js'},
        '@angular/compiler'                : {main: 'index.js'},
        '@angular/platform-browser'        : {main: 'index.js'},
        '@angular/platform-browser-dynamic': {main: 'index.js'}
      }
    });
    System.import('main.ts'); 
  </script>
</head>
<body>
  <hello-world></hello-world> 
</body>
</html>