byhrid angular1 and angular2

　　最近搞这个 angular1 升级到 angular2 的混合启动，真是累人呀，相关资料少不说，项目还用的是 gulp，都知道与 angular2 绝配的是 typescript ，使用 webpack 或者 systemjs 这种模块加载器很容易就能启动起来。

　　老大说用 gulp-webpack ，这是啥，没听说过，百度了一下，配置了好久才能用，并且把代码编好。。。

var gulp = require('gulp');
var webpack = require('webpack');
var gulpWebpack  = require('gulp-webpack');

//var config = require('../config.js');
//var staticsDir = config.statics.dest;

gulp.task('runWebpack', function () {
    return gulp.src('./src/typescripts/*.ts')
        .pipe(gulpWebpack({
            watch: true,
            resolve: {
                extensions: ['.ts', '.js'],
                alias: {
                    "@angular/upgrade/static": "@angular/upgrade/bundles/upgrade-static.umd.js"
                }
            },
            module: {
                loaders: [
                    { test: /\.ts/, loader: 'ts-loader' }
                ]
            },
            entry: './src/typescripts/main.start.ts',
            output: {
                filename: "test.js"
            }
        }, webpack))
        .pipe(gulp.dest('./statics'));
});

 

　　然后就开始混合启动项目实验代码来着，根据angular官网教学：https://angular.cn/docs/ts/latest/guide/upgrade.html#!#bootstrapping-hybrid-applications 

 

// import polyfills
import 'core-js';
import 'zone.js';

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module.ts';
import { ng1Module } from './ng1.module.ts';
import { UpgradeModule } from '@angular/upgrade/static';

//先起 ng2 再起 ng1
platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
    const upgrade = (<any>platformRef.instance).upgrade;
    upgrade.bootstrap(document.body, [ng1Module.name]);
})

　　配置的差不多了后进行 gulp runWebpack 命令进行启动。

 

　　结果是喜人的， angular2 应用启动起来了，但是后台报了一个错误：

　　说是 angular1 没启动起来，当时很诧异，结合多个 github 上的 angular1 升级 angular2 应用的混合启动配置，这样写已经是完全一样了，百度了好久也没找到有用的答案，是这个错误百度时根本就没有接近的问题出现！

　　对了一下午的代码，就跟已经混合启动起起来的样例升级代码，直到一个不起眼的引用顺序问题被我发现，抱着试一试的态度，我修改成了跟样例代码一样的引用顺序：

import { ng1Module } from './ng1.module.ts';
import { AppModule } from './app.module.ts';

　　先引入 angular1 ，再引入 angular2 模块。

　　gulp runWebpack ...

　　Perfect！