Хобрук: Ваш путь к мастерству в программировании

Используйте SystemJS-builder для сборки файлов опережающего компилятора Angular 2.

Я скомпилировал свое Angular 2 приложение, написанное на typescript 2, используя инструкции по компиляции с опережением времени на angular.io.

main.ts

platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

Теперь у меня много ngfactory.ts файлов, а также .js файлов. Для встряхивания дерева и объединения я использую простую задачу systemjs-builder ниже:

gulp.task('demo-bundle', function() {
    var builder = new SystemBuilder();

    builder.loadConfig('./systemjs.config.js')
        .then(function(){
            return builder.buildStatic('dev/main.js', 'dist/bundle.js', {
                encodeNames:false,
                mangle: false,
                rollup: true
            });
        })
});

Связывание завершается без ошибок, но приложение не работает в браузере с ошибкой:

Ошибка: Нет провайдера для NgZone!

Если я перейду с компиляции с опережением на компиляцию «точно в срок» путем начальной загрузки с помощью:

platformBrowserDynamic().bootstrapModule(AppModule);

Тогда комплектация и приложение работают как положено.

Любые идеи о том, как правильно связать компиляцию AoT с buildStatic? (В tsconfig module равно es2015, но я также пробовал system и commonjs)

@angular/compiler-cli 0.6.3, systemjs-builder 0.15.31, systemjs 0.19.39


  • Привет @BeetleJuice, не могли бы вы рассказать больше о том, как вы заставляете работать связку? На моей стороне я получаю следующую ошибку: Error on fetch for node_modules/@angular/core/index.js/src/linker/ng_module_factory.js. При компиляции через tsc все работает. 22.11.2016
  • @jthe Теперь я использую проект [angular-seed](https://github.com/mgechev/angular-seed) в качестве инструмента для сборки и объединения своего приложения. 23.11.2016

Ответы:


1

Я потратил целую вечность на отслеживание этого - загрузка пакетов umd для угловых модулей вызывает эту ошибку. Вместо этого измените загрузку файла index.js в свою папку.

21.10.2016
  • Я очень ценю, что вы нашли время, чтобы поделиться этим. Я все время думал, что проблема в ZoneJS. 22.10.2016
  • Удалось ли вам настроить treeshaking/rollup для работы с systemjs-builder? Пример свертки поваренной книги, похоже, не работает, потому что вам нужен сборщик для разрешения пакетов. 02.02.2017
  • Новые материалы

    Шлюз с лицензией OSS, совместимый с Apollo Federation v2, появится в WunderGraph
    Сегодня мы рады сообщить, что мы сотрудничаем с поддерживаемой YC Tailor Technologies, Inc. для внедрения Apollo Federation v2. Реализация будет лицензирована MIT (Engine) и Apache 2.0..

    Это оно
    Ну, я официально уволился с работы! На этой неделе я буду лихорадочно выполнять последние требования Думающего , чтобы я мог сосредоточиться на поиске работы. Что именно это значит?..

    7 полезных библиотек JavaScript, которые вы должны использовать в своем следующем проекте
    Усильте свою разработку JavaScript Есть поговорка «Не нужно изобретать велосипед». Библиотеки — лучший тому пример. Это поможет вам написать сложные и трудоемкие функции простым способом...

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

    C в C.R.U.D с использованием React-Redux
    Если вы использовали React, возможно, вы знакомы с головной болью, связанной с обратным потоком данных. Передача состояния реквизитам от родительских компонентов к дочерним компонентам может..

    5 обязательных элементов современного инструмента конвейера данных
    В цифровом мире предприятия используют конвейеры данных для перемещения, преобразования и хранения огромных объемов данных. Эти конвейеры составляют основу бизнес-аналитики и играют..

    Случай использования npm3 вместо npm2 для разработки библиотеки
    Некоторое время назад я создал библиотеку на NodeJS, чтобы упростить рендеринг на стороне сервера и клиента. Он использует React и React Router для отображения соответствующего HTML на веб-сайте...