web-dev-qa-db-fra.com

Construisez Angular2 HTML et TypeScript dans un seul fichier

Je prépare une application (à grande échelle) utilisant Angular2 et TypeScript. Il devra être divisé en plusieurs projets et chaque projet aura de nombreux composants, chacun avec un .html vue, .css feuille de style et .ts logique/classe.

Je voudrais que chaque projet soit compilé en un seul *.js fichier et être copié sur un site Web hôte qui s'exécutera dans IIS. Cela serait similaire à la façon dont une application WPF ou Silverlight est construite avec le .xaml fichiers compilés dans le .dll.

J'ai jeté un œil sur le Web et je peux obtenir le .ts fichiers à créer en un seul .js fichier à l'aide du --outFile option. Mais cela ne m'aide pas avec le .html fichiers ou css.

Toute aide serait grandement appréciée même si c'est pour dire que ce que je demande est impossible :-)

Stephen

angulartypescriptsystemjssystemjs-builder
20
Stephen Wilson

Si vous utilisez Angular2 par défaut tsconfig.json Avec chargeur SystemJS :

"module": "system",
"moduleResolution": "node",
...

Vous pouvez laisser tout le travail lourd sur SystemJS Build Tool . Voici par exemple comment je le fais dans mes projets en utilisant gulp:

  1. Compilez les modèles * .ts et inline * .html

    J'utilise gulp-angular-embed-templates tout de suite pour inline toutes les chaînes de templateUrl dans template (ce plugin fonctionne avec les deux Angular 1 . * et Angular 2).

    var tsc = require('gulp-TypeScript');
var tsProject = tsc.createProject('tsconfig.json');
var embedTemplates = require('gulp-angular-embed-templates');

gulp.task('app.build', function () {
    var tsResult = gulp.src('app/src/**/*.ts', {base: './app/src'})
        .pipe(embedTemplates()) // inline templates
        .pipe(tsc(tsProject));

    return tsResult.js
        .pipe(gulp.dest('build/js'));
});

    Cela générera de nombreux modules System.register anonymes dans le répertoire build/js. Tous auront déjà leur templateUrl en ligne.

  2. Regroupez tout dans un seul fichier .js

    J'utilise SystemJS Build Tool pour cela car je pense que c'est beaucoup plus facile que d'utiliser par exemple webpack. Donc, j'ai une autre tâche avalée pour automatiser le processus:

    var SystemBuilder = require('systemjs-builder');

gulp.task('app.systemjs.bundle', function () {
    var builder = new SystemBuilder('build/js, {
        paths: {
            '*': '*.js'
        },
        meta: {
            'angular2/*': {
                build: false
            },
            'rxjs/*': {
                build: false
            }
        }
    });

    return builder.bundle('main', 'build/js/app.bundle.js');
});

    Le générateur prend les mêmes options que SystemJS alors vérifiez leur API de configuration .

    Appeler builder.bundle('main', ...) recherche main.js (Qui est mon script initial avec l'appel bootstrap d'Angular. C'est le même fichier que vous pouvez voir dans le quickstart de 5 min =) car j'ajoute .js à tous les chemins recherchés par le constructeur. En effet, lorsque vous importez un module dans TS, vous appelez généralement:

    import {ModalResultComponent} from './modal-result.component';

    qui est compilé en tant que dépendance ./modal-result.component et ne se soucie pas de l'extension du fichier. C'est pourquoi j'ai dû ajouter *.js À tous les chemins pour aider le constructeur à trouver tous les fichiers JavaScript compilés.

    Les options meta indiquent simplement au générateur d'ignorer les dépendances que je ne veux pas regrouper. C'est Angular2 lui-même et la bibliothèque rxjs car j'inclus import 'rxjs/add/operator/map' Dans main.ts.

    Cela génère un seul fichier app.bundle.js Avec tous les modules enregistrés en tant que modules nommés à l'aide de System.register .

  3. Utilisation de notre app.bundle.js

    La dernière partie est un morceau de gâteau. Nous importons simplement le truc Angular2 par défaut et utilisons ensuite bundle option pour dire à SystemJS où sont toutes nos dépendances.

    <script>
System.config({
    packages: {
        '/web': {
            format: 'register',
            defaultExtension: 'js'
        }
    },
    bundles: {
        '/web/app.bundle': ['main']
    }
});
System.import('main').then(null, console.error.bind(console));
</script>

    Lorsque nous appelons System.import('main'), il télécharge d'abord /web/app.bundle.js Et enregistre tous les modules dans le package, puis il importe les modules main avec notre bootstrap Angular2.

    Et c'est tout!

En fait, vous n'avez pas du tout besoin d'utiliser gulp et de tout faire avec le script pur node.

Le regroupement de fichiers CSS est facile avec des choses comme cssnano et je suis sûr que vous pouvez trouver des tutoriels sur la façon de l'utiliser partout.

Je suis sûr qu'il existe d'autres façons de faire la même chose. Angular2 est conçu pour ne pas vous restreindre à utiliser une seule technologie. Cependant, utiliser SystemJS me semble être le moyen le plus simple car il utilise par défaut le même système de modules qu'Angular2.

Je suis sûr que vous pourriez aussi utiliser par exemple le format commonjs mais cela vous obligerait à utiliser également du polyfill pour require() loader, mais je ne l'ai pas encore essayé. Je crois [[# #]] umd [~ # ~] pourrait également être utile d'essayer.

26
martin