Как загрузить связанный файл в системный импорт в angular 2 с помощью Gulp: Ошибка: несколько анонимных вызовов System.register в модуле

У меня есть приложение angular 2 с машинописным текстом, которое генерирует файлы js.

Недавно я установил npm и gulp и написал задачи для объединения всех файлов js в один. Как загрузить этот файл?

Ранее на моей странице index.html: // который работает, где main - это компонент, который загружает appComponent

<script>
        System.config({
            packages: {
                app: {
                    format: 'register',
                    defaultExtension: 'js',
                    defaultJSExtensions: true
                }
            }
        });
        debugger;
        //System.import('Scripts/main')
        System.import('app/V1/components/main')
              .then(null, console.error.bind(console));
    </script>

Моя задача Gulp:

var config = {
    src: ['app/**/*.js'],
    dest: ['Scripts/']
};

gulp.task('bundle', function () {

    console.log('testing');
    return gulp.src(config.src)
      .pipe(uglify())
      .pipe(concat('all.min.js'))
      .pipe(gulp.dest('app/'));
})

Когда я запускаю эту задачу gulp, она генерирует all.min.js, но как использовать это сейчас, т.е. как удалить этот main.js в System.import и загрузить этот

<script>
        System.config({
            packages: {
                app: {
                    format: 'register',
                    defaultExtension: 'js',
                    defaultJSExtensions: true
                }
            },
            map: {
                immutable: 'app/all.min.js'
            }
        });
        debugger;
        //System.import('Scripts/main')
        System.import('app/all.min')
              .then(null, console.error.bind(console));
    </script>

Я пробовал этот способ, который выдает ошибку как

Ошибка: несколько анонимных вызовов System.register в модуле http://localhost:55308/app/all.min.js. При загрузке пакета убедитесь, что все вызовы System.register названы.


node.js typescript angular gulp gulp-concat
person sudhir    schedule 20.07.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я думаю, что есть лучшее решение для объединения файлов для использования с system.js. Существует удобная библиотека под названием systemjs-builder. Вы можете легко использовать его с глотком.

Сначала вам нужно извлечь ваш скрипт system.js в отдельный файл. Затем вы можете использовать эту задачу для создания конкатенированных js.

gulp.task('system', () => {
    var builder = new systemBuilder();

    return builder.loadConfig('./system.config.js') // Name of your system js file
        .then(() => builder.buildStatic('app',  'total.js'))

});

Теперь у вас есть объединенные файлы, а также конфигурация system.js, необходимая для ее запуска, на этом этапе все должно работать нормально. Однако вам нужно будет использовать отдельную библиотеку, чтобы упростить js. gulp-uglify должен работать нормально.

Вот пример задачи:

gulp.task('build', ['system'], () => {
    return gulp.src([
        'node_modules/core-js/client/shim.min.js',
        'node_modules/zone.js/dist/zone.js',
        'node_modules/reflect-metadata/Reflect.js',
        'node_modules/systemjs/dist/system.src.js',
        'total.js'
    ])
        .pipe(concat('main.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./'))
    });

Теперь, если вы запустите gulp build и включите сгенерированный main.js в свой index.html (удалив все остальные скрипты), все должно работать.

person Filip Lauc    schedule 21.07.2016
comment
Спасибо за ваше время, вы имеете в виду, что последний скрипт, который я разместил, т.е. System.config, должен быть помещен в отдельный файл, который вы называете системным js файлом, то есть system.config.js правильно ??? - person sudhir; 21.07.2016
comment
Какой у меня total.js здесь и основной .js здесь? Было бы здорово, если бы вы тоже упомянули файл Systemjs - person sudhir; 21.07.2016
comment
total.js - это все файлы приложения, а main.js - это скомпилированные и утерянные файлы вместе со всеми вашими зависимостями. Ваш system.config.js должен выглядеть примерно так (проверьте system.config.js внизу страницы): angular.io/docs/ts/latest/quickstart.html - person Filip Lauc; 21.07.2016