Question

ASP.NET（或gulp）将负责捆绑和缩小。然而，我遇到的问题是相当不同的。根据Angular2的教程，视图HTML嵌入在组件本身中。有一种方法可以使用TypeScript将其分隔为.ts和.html文件。以下是：

...
/// <reference path="./view-declaration.d.ts" />
...
import {html} from '/app.html!text';
...
@Component({
    ...
    template: html
})
...

伪造.html作为view-declaration.d.ts档案中的模块：

declare module '/app.html!text' {
    var html:string;
    return default html;
}

这是使用SystemJS及其文本插件。这不会为System.register文件生成.html，这意味着HTML无法与已转换的.js文件捆绑在一起。

所以问题是，如何将HTML与JavaScript分开，还能够正确捆绑它们？

另外需要注意的是，此方法与在组件上设置templateUrl的方法相同。这两者都破坏了捆绑和减少每个组件的服务器命中率的目的。 Angular2提供的解决方案是在组件上使用字符串并设置template。这与初级开发人员和代码审查的现实相差甚远（是的，为了运行并且看看浏览器是否抱怨非封闭标签，不会获得整个代码库！）。

Answer 1

您的模板文件app.html.ts可以将html模板导出为字符串。

export const htmlTemplate = `
    <p>My app</p>
`;

然后您的组件（app.component.ts）可以内联导入模板。

import { Component } from '@angular/core';
import { htmlTemplate } from './app.html';

@Component({
    selector: 'my-app',
    template: htmlTemplate,
})
...

这种方法：

允许在编译时嵌入模板，避免使用＆＃34; templateUrl＆＃34;的额外网络请求。添加并允许模板缩小并与其他js捆绑在一起
允许模板存在于外部文件中以实现代码清晰度和缩放
迁移到纯HTML文件;功能到位
允许Webstorm html语法突出显示仍能正常工作

See blog from Angular University

Answer 2

这是gulp插件，我认为可以解决您的问题。看着： https://github.com/ludohenin/gulp-inline-ng2-template

在开发过程中使用templateUrl保持干净的html文件的优势。此任务可以是您的生产\ staging -minified - gulp构建任务的一部分。

例如（构建任务的一部分！）

    var inlineNg2Template = require('gulp-inline-ng2-template');
    gulp.task('build-prod', ['build.lib'], function () {
    var tsProject = typescript.createProject('./tsconfig.json', {                         typescript: require('typescript') });
    var tsSrcInlined = gulp.src([webroot + '**/*.ts'], { base: webroot })
    .pipe(inlineNg2Template({ base: webroot }));
    return eventStream.merge(tsSrcInlined, gulp.src('Typings/**/*.ts'))
    .pipe(sourcemaps.init())
    .pipe(typescript(tsProject))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(webroot));
    });

Answer 3

事实证明，您需要使用Province.y进行开发，但在捆绑和缩小过程中将其替换为templateUrl。这是工作的最大任务：

template

这是为了匹配var gulp = require('gulp'); //install 'gulp' via npm var uglify = require('gulp-uglify'); //install 'gulp-uglify' via npm var concat = require('gulp-concat'); //install 'gulp-concat' via npm var replace = require('gulp-replace'); //install 'gulp-replace' via npm var fs = require("fs"); //already available in Visual Studio and of course NodeJS gulp.task('bundle:js', function () { return gulp .src([ "file1.js", "file2.js" ]) .pipe(replace(/templateUrl.*\'/g, function (matched) { var fileName = matched.match(/\/.*html/g).toString(); var fileContent = fs.readFileSync(fileName, "utf8"); return 'template:\'' + fileContent.replace(/\r\n/g, '') + '\''; })) .pipe(concat('file.min.js')) .pipe(gulp.dest('my bundle folder')) .pipe(uglify()) .pipe(gulp.dest('my bundle folder')); });个文件和模板网址，但如果需要，可以进行调整。

Angular2捆绑和缩小

3 个答案: