Wie füge ich JS HTML-Dateien zu einer @Template in Angular 2 hinzu (wie $ templateCache)

Question

Dies ist wahrscheinlich schlecht formuliert, aber in meinen vorhandenen Angular 1 Projekten verwende ich eine Menge HTML-Ressourcen, die in eine JS-Datei vorkompiliert werden HTML2JS. Das funktioniert gut und ich denke jetzt über meinen Ansatz für Angular 2 nach. Da HTML2JS nicht aktualisiert wurde, scheint sich alles um zwei Strategien zu drehen.

Zuerst fügen Sie den HTML-Code innerhalb des @ tempate atScript hinzu. Dadurch wird es zwischengespeichert, so dass ich nicht ständig auf den Server gehe, aber es macht es auch schwierig, es in IDEs zu formatieren und verringert die Lesbarkeit IMHO.

Die zweite besteht darin, eine externe Datei zu verwenden und die URL innerhalb von @template zu verwenden. Dies scheint die Dinge lesbarer zu machen, begrenzt jedoch die Menge an Caching. Dies bedeutet, dass ich größere Serveranrufe tätigen muss, die ich vermeiden möchte.

Gibt es eine Möglichkeit, eine Datei in HTML zu starten, dann in eine .js-Datei kompiliert und in eine Angular2-Komponente aufgenommen zu werden?

Answer 1

Seit Webpack ist die neue Gulp (also Gulp needs some help), here is what I came up with (uses stylus and jade) ...

Verwenden Webpack Lader so ...

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

Dann erfordert den Einsatz in Ihren Komponenten wie diese ...

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

Stellen Sie sicher,

Answer 2

Wenn Sie gulp zum Kompilieren verwenden, können Sie das Plugin angular-embed-templates verwenden. Hier bin ich das Laden der templateUrl in die Vorlage, bevor sie in der dist-Ordner Javascript Kompilieren mit Quellen Karten:

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