В предыдущих статьях преобразование Angular 1 в 2 мы интегрировали поток ng2 в проект ng1. Похоже на это.

но мы также должны интегрировать ng2 в нашу существующую систему сборки ng1.

Изменить среду здания

Для процесса сборки вы должны также включить минимизацию, конкатенацию, сокращение или tslinting угловой части 2. Вот пример конфигурации gruntfile.js. Не забудьте включить также задачу grunt-webpack:

config.webpack {
  main = {
    entry: '{projectRoot}/app-ng2/app/main.ts',
    output: {
        path: '{projectRoot}/app-ng2/app/',
        filename: 'bundle.js'
    },
    module: {
        loaders: [{
            test: /\.ts/,
            loader: 'ts-loader',
            query: {
                'ignoreDiagnostics': [
                    2403, // 2403 -> Subsequent variable declarations
                    2300, // 2300 -> Duplicate identifier
                    2374, // 2374 -> Duplicate number index signature
                    2375  // 2375 -> Duplicate string index signature
                ]
            },
            exclude: [ /\.(spec|e2e)\.ts$/, /node_modules\/(?!(ng2-.+))/ ]
        }]
    }
};
...
grunt.loadNpmTasks('grunt-webpack');
...

И последнее, нужно включить наш webpack в registerTask grunt.
Например:

grunt.registerTask('default', [...,
'webpack', 
'replace bootapp.js => bundle.js',
'useminPrepare', 'ngtemplates', 'concat', 'uglify', 'sass', 'cssmin', 'usemin', 'clean', 'cleanempty', 'cacheBust', ...]);

Не забудьте заменить файл bootapp.js на bundle.js. Вы можете сделать это, например, предоставив задачу string-replace. Вот конфигурация для этой цели.

config['string-replace'].main = {
    files: {},
    options: {
        replacements: [
            {   pattern: '<script src="app-ng2/bootapp.js"></script>', replacement: '<script src="app-ng2/app/bundle.js"></script>' },
            {   pattern: '<script src="app-ng2/node_modules/systemjs/dist/system.src.js"></script>', replacement: '' },
            {   pattern: '<script src="app-ng2/systemjs.config.js"></script>', replacement: '' }
        ]
    }
};
config['string-replace'].main.files['<%= projectRoot %>/'] = '<%= projectRoot %>/index.html';

Нам больше не нужны system.src.js или systemjs.config.js, и нам не нужно загружать файл systemjs. Все объединяется в один файл bundle.js с помощью webpack и загружается автоматически.

Наконец, вы можете создать целевые файлы с помощью команды grunt:

$ grunt // runs our task 'default'

Вот и все, теперь мы подготовили базовую интеграцию решения Angular 2 в Angular 1. Все, что связано с Angular 2, четко разделено в папке app-ng2.

Если есть комментарии или вопросы, пожалуйста, свяжитесь с нами.