есть у кого-нибудь рабочая инструкция как существующий Angular проект собрать под продакшн? в идеале с tree shaking, модульностью, AOT. модульность если что не так критична

http://blog.mgechev.com/2016/06/26/tree-shaking-angular2-production-build-rollup-javascript/

http://blog.mgechev.com/2016/06/26/tree-shaking-angular2-production-build-rollup-javascript/

спасибо, почитаю

Ребят, а только при разработке проекты весят по 70 мБ

или 100 МБ

если на сайт выставить, какой размер в общем будет?

У меня 4 страницы собираются в 2-х мб бандл

в проде бандл 290кб, две страницы на одной из них две формы

это без aot и tree shaking

AOT по идее должен увеличивать бандл, хотя Стивен из команды ng2 на днях рассказывал, что их приоритет сейчас - это сделать AOT максимально компактным

AOT без tree shaking увеличит

я к тому, что в вопросе размера бандла не стоит смешивать эти два понятия, так как они действуют в противоположном направлении

в проде бандл 290кб, две страницы на одной из них две формы

и сколько там своих тысяч строк кода? просто многовато выходит

в этом же бандле css и svg

---------- Result ------------ Physical : 2654 Source : 2307 Comment : 32 Single-line comment : 9 Block comment : 23 Mixed : 8 Empty : 323 Number of files read : 57 ------------------------------ ---------- Result ------------ Physical : 2461 Source : 1959 Comment : 144 Single-line comment : 63 Block comment : 81 Mixed : 3 Empty : 371 Number of files read : 68 ------------------------------

первое это файлы проекта, второе общие компоненты которые используются в проекте

~5000 получается

https://www.lucidchart.com/techblog/2016/09/26/improving-angular-2-load-times/

http://blog.mgechev.com/2016/07/21/even-smaller-angular2-applications-closure-tree-shaking/

Disclaimer: This article explains a research which uses experimental tools tools which WILL change in near future. Do not use anything described here in production.

А как разернуть проект на сайте? Typescript же компилируется в js потом работа происходит без npm start

веб-сервер для этого нужен

Ребята, все привет! У кого-то было такое, что при отправке запроса на сервер модулем http, zone.js делает свой пинг методом OPTIONS! Вопрос, как этот пинг убрать?

да это же CORS !

убрать можно тем что не делать запросы на другой домен/порт/протокол

1 - включите заголовки на сервере 2 - поднимите nginx который проксирует и добавляет заголовки 3 - поставьте плагин для хрома который добавит заголовки

любой пункт поможет

Понял, спасибо большое

только начинаю учить ng2, планируем переносить все наши ng1 приложения на ng2. Чего опасаться, как долго придется команду переучивать? Какие-нибудь очень заметные косяки во фреймворке?

понимаю, что вопрос очень общий, простите)

только начинаю учить ng2, планируем переносить все наши ng1 приложения на ng2. Чего опасаться, как долго придется команду переучивать? Какие-нибудь очень заметные косяки во фреймворке?

Если у вас уже компоненты на 1.5 и мало $compile-nginclude, то все пройдет довольно быстро.

контроллеры и местами директивы((

Ну директивы могут быть разные. Там с compile и прочими вывертами. Чем они чище и проще, тем дело пойдет легче. Ну и вместо всего зоопарка factory-service-config-providers только номальные сервисы.

Советую начать проект на angular-cli и попробовать реализовать самое простое из бизнес-логики, чтобы самому оценить трудность.

https://angular.io/docs/ts/latest/guide/upgrade.html

http://blog.thoughtram.io/angular/2015/10/24/upgrading-apps-to-angular-2-using-ngupgrade.html

я бы не пытался мигрировать легаси приложение с ng1 на ng2 а просто рядом бы начал его переписывать, так получится быстрее скорее всего

какие-то куски можно перетащить типа фильтров, сервисов, всяких utils и сериалайзеров

привет, кто то знает какую настройку нужно tslint-у, что бы чекать пробелы до и после имён модуля в импорте? Что бы было всегда так import { Injectable }, например

у меня работает с codelyzer

"import-destructuring-spacing": true,

Атрибуты просто и в квадратных скобках чем-то отличаются? В примерах primeng например [filter]="true" filterMatchMode="contains"

filterMatchMode="contains" в таком случае компонент получит строку contains [filterMatchMode]="contains" в таком - значение переменной contains

спасибо

?

"import-destructuring-spacing": true,

спасибо

Митап завтра в 19:00?

17 ноября Москва, БЦ Водный, 19:00 – 21:00

Всем привет. Давно занимаюсь бэкэндом, но придётся заняться фронтедом в ближайщее время. Выбрал ангуляр2 (из-за того, что там есть возможность писать на typescript). Есть ли книга какая с примерами или какой-то список с "лучшими практиками"? (https://angular.io/ почитал уже) Заранее спасибо.

как раз сейчас выбираю между этим подходом и тем чтобы взять ngrx/store

по сути они довольно похожи

А в чем профит от этого подхода? Раньше считалось создавать глобальный объект плохой практикой, теперь наоборот )

А в чем профит от этого подхода? Раньше считалось создавать глобальный объект плохой практикой, теперь наоборот )

Не путайте - в Angular 2 не нужно создавать глобальных обьектов. Из-за Dependency Injection. Но да у вас будет 1 обьект для состояния всего вашего приложения. Это на самом деле давний спор - где держать состояние приложения - в компонентах или где-то отдельно. Redux просто идет по пути где все держится в одном месте. Благодаря чему есть много мелких но приятных вещей. Легче отлаживать (есть даже визуальные отладчики - с откатыванием и накатыванием состояния и пошаговой визуализацией его изменения), легче писать код (иногда нужно просто менять состояние всех компонентов - в redux это тривиально), веселые плюшки (вроде автоматического созданию unit тестов)

всем привет, кто как подключает normalize.css к проекту?

раньше подключал reset.css ко всем проектам, но как начал пользоваться CSS фреймворками надобность в этом отпала

всем привет, кто как подключает normalize.css к проекту?

Смотря какой сборщик

всем привет, кто как подключает normalize.css к проекту?

да подключаю. Вне зависимости от того использую ли CSS фреймворк или нет

юзаю метеор

Алексей, а почему? Многие же фреймворки сбрасывают свои дефолты сами

* устанавливают

Алексей, а почему? Многие же фреймворки сбрасывают свои дефолты сами

Не - если в фреймворке есть - то да. Ненужно. Но если нет то подключаю ( я об этом )

понял, да, у меня такой же подход, наверно мне стоило его расшифровать точнее

так все-таки, кто как подключает этот файлик к проекту? в главную компоненту подсовывают, которая app.component?

А вот допустим в главном компоненте через http загружается язык приложения. Как передать этот язык во все дочерние компоненты?

https://angular.io/docs/ts/latest/cookbook/i18n.html

Ну это к примеру. Могут быть и другие данные, которые нужны везде. Через свойства глобального конфига, который инжектится везде вроде нормально?

юзай сервис или стор

пишешь сервис или стор который выдает нужный конфиг и инжектишь, где нужно

"инжектится" это уже не глобально, для того DI и существует, чтобы не было глобальных зависимостей

а дружил ли кто-нибудь angular2 с meteor?

Подскажите, как лучше / правильней подключить сторонний JS-модуль к Angular2 (TS). .d.ts у модуля нет Заточен он судя по всему под ES6, экспорт там в таком виде module.exports = Centrifuge;

так все-таки, кто как подключает этот файлик к проекту? в главную компоненту подсовывают, которая app.component?

Почему просто не сделать <link rel="stylesheet" href="/Styles/normalize.css"> ?

в хтмл-ке, где у тебя стартовый компонент в разметку добавлен

Подскажите, как лучше / правильней подключить сторонний JS-модуль к Angular2 (TS). .d.ts у модуля нет Заточен он судя по всему под ES6, экспорт там в таком виде module.exports = Centrifuge;

как минимум const Centrifuge = require('module_name'); import * as Centrifuge from 'module_name'; но если типы нужны, придется описывать самому

Почему просто не сделать <link rel="stylesheet" href="/Styles/normalize.css"> ?

да какие-то странности подкидывает видимо метеор к проекту и эти настройки перекрываются

да какие-то странности подкидывает видимо метеор к проекту и эти настройки перекрываются

не знаком с метеором, но ты можешь посмотреть в хроме computed style у элемента, к которому как тебе кажется не применился reset.css и уже оттуда какие-то выводы делать

как минимум const Centrifuge = require('module_name'); import * as Centrifuge from 'module_name'; но если типы нужны, придется описывать самому

Пробовал. В каком-то из вариантов - ошибка где-то всередине core.umd или zone (не помню уже), в другом - ошибок не выдает, но останавливается Я его сейчас просто подключаю в html, потом объявляю через declare, но это ж не выход

эти 2 синтаксиса эквивалентны какую-то мистику нагоняете

ts компилятор ругается на что-нибудь?

declare, кстати, все равно придется делать, чтобы указать, что это any по-моему если так не сделать, то ошибки буду сыпаться

ts компилятор ругается на что-нибудь?

Нет. Компилятор нормально отрабатывает. Ошибки в рантайме

так может дело в либе самой?

Ну если через html + declare, то работает

https://radiojs.ru/

так может дело в либе самой?

Миша, ты теперь тоже на ng2 будешь писать? )

Миша, ты теперь тоже на ng2 будешь писать? )

буду работать над библиотекой компоненртов Polymer в местном банке только задумайтесь банк строит своб будущую инфраструктуру фронтенда на основе Polymer :) только в Голландии такое возможно

слушайте, вопрос назрел неужели вы все тут тоже VSCode считаете крутым редактором и сразу на него перелезаете, как тольок TS, ng2 и всякое такое?

буду работать над библиотекой компоненртов Polymer в местном банке только задумайтесь банк строит своб будущую инфраструктуру фронтенда на основе Polymer :) только в Голландии такое возможно

Ну там и до web components недалеко

слушайте, вопрос назрел неужели вы все тут тоже VSCode считаете крутым редактором и сразу на него перелезаете, как тольок TS, ng2 и всякое такое?

Нет, только webstorm

Ну там и до web components недалеко

Polymer 2 очень будет близок к ним, поверх них по сути толко биндинги останутся, да и те не нужны :)

Polymer 2 очень будет близок к ним, поверх них по сути толко биндинги останутся, да и те не нужны :)

Да, у нас тут уже доклады по ним появились

вот уже не первый день играюсь (= насилую себя) VSCode-ом не понимаю, как люди в здравом уме могут им пользоваться о какой такое поддержке TS из коробки идет речь, я не пойму, покажите плиз :)