Làm cách nào để thêm các tệp JS HTML vào một @Template trong Angular 2 (Giống như $ templateCache)

Question

Điều này có thể được viết sai, nhưng trong các dự án Angular 1 hiện có của tôi, tôi sử dụng một loạt tài nguyên HTML được biên dịch trước thành tệp JS HTML2JS. Điều này làm việc tuyệt vời vì vậy bây giờ tôi đang xem xét cách tiếp cận của tôi cho Angular 2. Kể từ khi HTML2JS chưa được cập nhật, mọi thứ dường như xoay quanh 2 chiến lược.

Trước tiên, bạn thêm nội tuyến HTML bên trong @tempate atScript. Điều này lưu trữ nó vì vậy tôi sẽ không đi đến máy chủ tất cả các thời gian, nhưng nó cũng làm cho nó khó khăn để định dạng trong IDE và giảm IMHO dễ đọc.

Cách thứ hai là sử dụng tệp bên ngoài và sử dụng url bên trong @template. Điều này dường như làm cho mọi thứ dễ đọc hơn nhưng giới hạn số lượng bộ nhớ đệm. Điều này có nghĩa là tôi cần phải thực hiện các cuộc gọi máy chủ lớn hơn mà tôi muốn tránh.

Có cách nào để có tệp bắt đầu trong HTML sau đó được biên dịch thành tệp .js và được bao gồm trong thành phần Angular2 không?

Answer 1

Kể từ Webpack là Gulp mới (also Gulp needs some help), here is what I came up with (uses stylus and jade) ...

Sử dụng Webpack Xe bốc hàng như thế này ...

loaders: [ 
    { 
    include: /\.pug/, 
    loader: 'pug-html-loader' 
    }, 
    { 
    test: /\.styl$/, 
    loader: 'style-loader!css-loader!stylus-loader' 
    }, 
    { 
    test: /\.ts$/, 
    loader: 'ts' 
    } 
] 

Sau đó, sử dụng đòi hỏi phải có trong thành phần của bạn như thế này ...

@Component({ 
    ... 
    template: String(require('./navbar.component.pug')), 
    styles: [String(require('./navbar.component.styl'))], 
    ... 
}) 

Hãy chắc chắn để sử dụng styles và template thay vì templateUrl và styleUrls

Answer 2

Nếu bạn đang sử dụng gulp để biên dịch, bạn có thể sử dụng plugin nhúng góc mẫu. Ở đây tôi đang tải templateUrl vào mẫu, trước khi biên soạn để javascript trong thư mục dist, với bản đồ nguồn:

var gulp   = require('gulp'); 
var ts    = require('gulp-typescript'); 
var sourcemaps  = require('gulp-sourcemaps'); 
var embedTemplates = require('gulp-angular-embed-templates'); 

gulp.task('ts:build', function() { 
    gulp.src('app/**/*.ts') 
     .pipe(embedTemplates()) 
     .pipe(sourcemaps.init()) 
     .pipe(ts({ 
      noImplicitAny: true, 
      module: 'system', 
      target: 'ES5', 
      experimentalDecorators: true, 
      moduleResolution: 'node', 
      emitDecoratorMetadata: true 
     })) 
     .pipe(sourcemaps.write()) 
     .pipe(gulp.dest('./dist')); 
});