角2の相対パスバンドル

Question

私は春を使用してWebアプリケーションを開発中です4.3.5.Release。フロントエンドには角度2を使用しています。 内部コンポーネントは、私はここで、ガイド

Component-relative Paths

次templateURLsとStyleURLsへの相対パスを使用しかし、我々は、関連するすべてのコンポーネントを配置するように私はがぶ飲みを使用して、このプロジェクト構造をバンドルする方法について混乱していますファイル（html、css、ts）などを同じフォルダに保存します。

gulpを使用してコンパイル済みのjsファイルの縮小バージョンを作成しますが、この構造を相対パスでどのように維持しますか。

誰かが助けてくれたら本当にうれしいです。

Answer 1

前ngcでコンパイルし、rollupでバンドルに、CSSとHTMLをインライン化するgulp-inline-ng2-templateプラグインを使用：NGCしてコンパイル

：ツリーのES6モジュール形式（前提条件にコンパイル

gulp.task('compile:aot', function (cb) { 
    exec('"node_modules\\.bin\\ngc" -p tsconfig.prod.json', function (err, stdout, stderr) { 
    console.log(stdout); 
    console.log(stderr); 
    cb(err); 
    }); 
}); 

ロールアップによる変更）：

gulp.task('compile:es6', function() { 
    return gulp.src(['./src/**/*.ts']) 
    .pipe(inlineNg2Template({ base: '/src', useRelativePaths:true })) 
    .pipe(tsc({ 
     "target": "es5", 
     "module": "es6", 
     "moduleResolution": "node", 
     "experimentalDecorators": true, 
     "emitDecoratorMetadata": true, 
     "lib": ["es6", "dom"] 
    })) 
    .pipe(gulp.dest('./dist/src')); 
}); 

ロールアップを含むバンドル：

gulp.task('rollup:app', function(){ 
    return rollup.rollup({ 
    entry: 'dist/src/main.aot.js', 
    onwarn: function (warning) { 
     // Skip certain warnings 

     // should intercept ... but doesn't in some rollup versions 
     if (warning.code === 'THIS_IS_UNDEFINED') { return; } 
     // intercepts in some rollup versions 
     if (warning.message.indexOf("The 'this' keyword is equivalent to 'undefined'") > -1) { return; } 

     // console.warn everything else 
     console.warn(warning.message); 
    }, 

    plugins: [ 
      nodeResolve({ 
      jsnext: true, 
      module: true 
      }), 
      commonjs({ 
       include: 'node_modules/rxjs/**', 
      }) 
    ] 
    }) 
    .then(function(bundle) { 
     bundle.write({ 
     format: "iife", 
     dest: "dist/app.bundle.js", 
     sourceMap: true 
     }); 
    }); 
}); 

Demo Starter App