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！