Jak dodać pliki HTML JS do @Template w Angular 2 (jak $ templateCache)

Question

Jest to prawdopodobnie źle sformułowane, ale w moich istniejących projektach Angular 1 używam garstki zasobów HTML, które są prekompilowane do pliku JS przy użyciu HTML2JS. Działa to świetnie, więc teraz rozważam moje podejście do Angular 2. Ponieważ HTML2JS nie został zaktualizowany, wszystko wydaje się obracać wokół dwóch strategii.

Najpierw dodajesz wbudowany kod HTML w atrybutu @tempate atScript. To powoduje, że nie przechodzę na serwer przez cały czas, ale także utrudnia formatowanie w IDE i zmniejsza czytelność IMHO.

Drugi to użycie zewnętrznego pliku i użycie adresu URL wewnątrz @template. Wydaje się, że jest to bardziej czytelne, ale ogranicza ilość buforowania. Oznacza to, że muszę wykonywać większe wywołania serwerów, których chciałbym uniknąć.

Czy istnieje sposób na rozpoczęcie pliku w HTML, a następnie skompilowanie go do pliku .js i uwzględnienie w komponencie Angular2?

Answer 1

Od Webpack jest nowy Gulp (also Gulp needs some help) here is what I came up with (uses stylus and jade) ...

Zastosowanie WebPACK Ładowarki tak ...

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

wymaga następnie w swoich komponentów, takich jak ten używania ...

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

Należy używać styles i template zamiast templateUrl i styleUrls

Answer 2

Jeśli używasz gulp do kompilacji, możesz użyć wtyczki angular-embed-templates. Tutaj wczytuję templateUrl do szablonu, przed kompilacją do javascript w folderze dist, z mapami źródło:

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')); 
});