Angular 2 Development with TypeScript

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

1 лайк

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

1 лайк
<!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>

Давай попробуем один трюк убрать. В строчках ниже

<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>

адреса ресурсов записаны как //unpkg.com/zone.js@0.6.12. Замени начало строк // на http://. Т.е. было //unpkg.com/zone.js@0.6.12 должно стать http://unpkg.com/zone.js@0.6.12. Сохрани и обнови сраницу.

И еще может быть нюанс. Убедись что у тебя свежая версия хрома и он не ожидает что нужно перезапустить его чтобы обновить. Он бывает барахлит когда находится в состоянии “обновление скачал но еще не применил”.

1 лайк

Там ниже (дальше) идет:
@angular/core’ : ‘https://unpkg.com/@angular/core@2.0.0’,
Нужно https://
я пробовал и так и эдак. Иксепшн все равно на строку 9.

Это не критично пока твоя страница, на которой загружается ресурс, не доставляется в браузер по https. Для локальных серверов это очень очень редко когда так. Так что не критично, но да с https работать будет.

А просто адрес https://unpkg.com/systemjs@0.19.37/dist/system.src.js у тебя открывается?

1 лайк

открывается

Заархивируй всю папку в zip с которой ты работаешь и скинь. Посмотрю непосредственно в код, попробую запустить локально.

1 лайк

Не разрешает сюда загружать архивы, только картинки.

Шли через https://send-anywhere.com/

2 лайка

240751

656532

1 лайк

В html файле пробелы были не пробелами, в с какими-то другими символами, которые выглядят как пробелы. Из-за них браузер не парсил страницу корректно и следовательно не подгружал скрипты. Решил проблему так

  1. Скопировал пробельный символ из файла.
  2. Нажал “найти и заменить все”, вставил скопированный символ и заменил все его вхождения на пробел набранный с клавиатуры.

Для тебя в целом - пересмотри как ты копируешь исходный код. Не знаю как конкретно: попробуй разные способы. Ну или заменяй пробельные символы как я описал выше.

Вторая проблема - версия zone.js содержала ошибку, в более свежей версии ошибки нет (решил задачу гуглением текста ошибки из консоли). Обновил файл до zone.js@0.6.20.

Третья проблема - новая версия zone.js ругалась что кто-то переопределяет Promise. Это была библиотека core-js/client/shim.min.js. Решалась перемещением core-js/client/shim.min.js выше zone.js.

1 лайк

Между прочим, попробовал запустить так, как в книге записано: http-server из консоли, история повторилась.
Запустил так, как ты описал serve .

Причина точно не в http-server. Если страница заработала для serve должна заработать и для http-server. Эти пакеты решают одну и ту же задачу.

1 лайк

Ну http-server выдает error на 9 строку

Понял, в чем проблемы. 10nk u very much.

Я не правильно писал адрес в браузере. Вместо локалхоста писал айпи.