Angular 2：启用 templateUrl 属性以在 www/build 中查找构建 html 文件

Question

我的组件中有这个：

@Component({
    templateUrl: 'my.component.html'
})

当我构建我的项目浏览器抛出错误，提示我需要链接build/ 前缀。任何想法如何自动化这个，所以我不需要前缀？

更新 我的构建文件：

var gulp        = require('gulp'),
    gulpWatch   = require('gulp-watch'),
    del         = require('del'),
    runSequence = require('run-sequence'),
    argv        = process.argv;
    ll          = require('gulp-ll');

var Server = require('karma').Server;

// Gulp task-based Multi-Core CPU Utilisation 
// ll.tasks(['test', 'test:chrome', 'tdd']);

/**
 * Ionic hooks
 * Add ':before' or ':after' to any Ionic project command name to run the specified
 * tasks before or after the command.
 */


gulp.task('serve:before', ['watch']);
gulp.task('emulate:before', ['build']);
gulp.task('deploy:before', ['build']);
gulp.task('build:before', ['build']);

// we want to 'watch' when livereloading
var shouldWatch = argv.indexOf('-l') > -1 || argv.indexOf('--livereload') > -1;
gulp.task('run:before', [shouldWatch ? 'watch' : 'build']);

/**
 * Ionic Gulp tasks, for more information on each see
 * https://github.com/driftyco/ionic-gulp-tasks
 *
 * Using these will allow you to stay up to date if the default Ionic 2 build
 * changes, but you are of course welcome (and encouraged) to customize your
 * build however you see fit.
 */
var buildBrowserify = require('ionic-gulp-browserify-typescript');
var buildSass = require('ionic-gulp-sass-build');
var copyHTML = require('ionic-gulp-html-copy');
var copyFonts = require('ionic-gulp-fonts-copy');
var copyScripts = require('ionic-gulp-scripts-copy');

var isRelease = argv.indexOf('--release') > -1;

gulp.task('watch', ['clean'], function(done){
  runSequence(
    ['sass', 'html', 'fonts', 'scripts'],
    function(){
      gulpWatch('app/**/*.scss', function(){ gulp.start('sass'); });
      gulpWatch('app/**/*.html', function(){ gulp.start('html'); });
      buildBrowserify({ watch: true }).on('end', done);
    }
  );
});

gulp.task('build', ['clean'], function(done){
  runSequence(
    ['sass', 'html', 'fonts', 'scripts'],
    function(){
      buildBrowserify({
        minify: isRelease,
        browserifyOptions: {
          debug: !isRelease
        },
        uglifyOptions: {
          mangle: false
        }
      }).on('end', done);
    }
  );
});


/**
 * Run test once and exit
 */
gulp.task('test', function (done) {

    var karmaServer = new Server({
        configFile: __dirname + '/karma.conf.js',
        singleRun: true
    }, function (exitCode) {
        done();
        process.exit(exitCode);
    }).start();
});



/**
 * Run tests in chrome browser
 */
gulp.task('test:chrome', function (done) {
    var karmaServer = new Server({
        configFile: __dirname + '/karma.conf.js',
        browsers: ['Chrome']
    }, function (exitCode) {
        done();
        process.exit(exitCode);
    }).start();
});

/**
 * Watch for file changes and re-run tests on each change
 */
gulp.task('tdd', function (done) {

  // runSequence(
  //   ['sass', 'html', 'fonts', 'scripts'],
  //   function(){
  //     buildBrowserify({
  //       minify: isRelease,
  //       browserifyOptions: {
  //         debug: !isRelease
  //       },
  //       uglifyOptions: {
  //         mangle: false
  //       }
  //     }).on('end', done);
  //   }
  // );

    var karmaServer = new Server({
        configFile: __dirname + '/karma.conf.js'
    }, function () {
        done();
    }).start();

});

gulp.task('sass',     buildSass);
gulp.task('html',     copyHTML);
gulp.task('fonts',    copyFonts);
gulp.task('scripts',  copyScripts);
gulp.task('clean',  function(){
  return del('www/build');
});

Answer 1

你需要 angular2-template-loader 并且使用 webpack 编译时它会编译

@Component({
    templateUrl: 'my.component.html'
})

到

@Component({
    templateUrl: require('my.component.html')
})

然后 webpack 会将 html 打包到 bundle 中，并按需为您服务。

Answer 2

关于组件相对路径的官方 Angular 文档：

https://angular.io/docs/ts/latest/cookbook/component-relative-paths.html#!#set-the-moduleid-

第三者

Gulp Angular 嵌入模板插件

https://www.npmjs.com/package/gulp-angular-embed-templates