web-dev-qa-db-fra.com

Angular2 avec RequireJS

Je ne parviens pas à charger correctement Angular2 lors de l'incorporation de RequireJS dans l'application. 

Pour des raisons de simplicité, j'utilise le très simple tutoriel Javascript de Hello World sur Angular2 situé ici: https://angular.io/docs/js/latest/quickstart.html

Ce système fonctionne bien avec Angular1, mais je ne parviens pas à reproduire ce succès avec Angular2.

Voici mon fichier index.html:

<html>
<head>
    <title>Angular 2 QuickStart JS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 1. Load RequireJS -->
    <script type="text/javascript", src="bower_components/requirejs/require.js", data-main="/require.config.js"></script>

</head>

<!-- 3. Display the application -->
<body>
    <ireland-product-app>Loading...</ireland-product-app>
</body>

Mon fichier require.config.js:

require([
    'assets/requiredPathsAndShim.js'
], function(requirePathsAndShim) {
require.config({

    baseUrl: '/',

    paths: requirePathsAndShim.paths,

    shim: requirePathsAndShim.shim,

    /// Kick start app...
    deps: ['app/main']
});

});

J'utilise le fichier requiredPathsAndShim.js pour charger toutes les dépendances que je vois qui sont requises pour démarrer une application Angular2. Voici le fichier:

"use strict";

(function(define) {
    define([], function() {
        return {
            waitSeconds : 10000,
            paths: {

                'shim'              : 'node_modules/core-js/client/shim.min',
                'zone'              : 'node_modules/zone.js/dist/zone',
                'Reflect'           : 'node_modules/reflect-metadata/Reflect',
                'Rx'                : 'node_modules/rxjs/bundles/Rx.umd',
                'core'              : 'node_modules/@angular/core/core.umd',
                'common'            : 'node_modules/@angular/common/common.umd',
                'compiler'          : 'node_modules/@angular/compiler/compiler.umd',
                'platform-browser'  : 'node_modules/@angular/platform-browser/platform-browser.umd',
                'platform-dynamic'  : 'node_modules/@angular/platform-browser-dynamic/platform-browser-dynamic.umd'
            },
            shim : {

            }
        }
    });
})(define);

Je charge ensuite le fichier 'app/main' à partir de mon fichier 'required.config' qui chargera la fonctionnalité d'amorçage de Angular2:

"use strict";

(function() {
    define([
        'app/app.component'
    ], function(app) {
        document.addEventListener('DOMContentLoaded', function() {
            ng.platformBrowserDynamic.bootstrap(app.AppComponent);
        });
    });
})();

Le fichier app/app.component est un fichier qui renvoie simplement mon composant Angular2 qui est transmis à la fonction bootstrap de main.js pour démarrer l'application. c'est le fichier:

"use strict";

(function() {
    define([

    ], function() {
        return {
            AppComponent : ng.core.Component({
                    selector : 'ireland-product-app',
                    template : '<h1>Product App</h1>'
                })
                .Class({
                    constructor : function() {}
                })
        }
    });
})();

Cela fait quelques heures que je joue avec ça et je n'arrive pas à le faire fonctionner. Quelqu'un peut-il m'indiquer dans la bonne direction pourquoi cela ne fonctionne pas? J'ai le sentiment qu'il faut ajouter des cales dans le require.config, mais je n'ai pas encore réussi à définir les dépendances de charge de script. 

Merci

angularrequirejs
10
Jim

Ce que vous essayez de faire n’est pas possible (en génie logiciel, comme dans l’art - tout est possible, mais pour ce faire, vous devez éditer le script de l’angle, et nous ne le voulons pas).

Contrairement à Angular1, qui a été développé en ECMAScript5 (le langage JavaScript aimé), Angular2 a été développé en ECMAScript6 (et en TypeScript).

Une des différences est que dans ECMAScript5, pour charger un fichier de script (.js, .ts, etc.), nous devons ajouter une balise <script> avec l'attribut src, qui pointe vers le fichier de script. L'alternative était d'utiliser une bibliothèque tierce, qui chargeait les scripts de manière asynchrone (par exemple, les bibliothèques suivantes: RequireJS , WebPack , SestemJS , etc.).

Le principal inconvénient de RequireJS est qu’il ne fonctionne que sur les scripts écrits au format AMD (Asynchronous Module Definition), par exemple:

define(['dependence_1', 'dependence_2', ...], function(alias_1, alias_2, ...) {
// ...
});

Cette syntaxe est très efficace lorsque vous utilisez Angular1 et RequireJS.

Maintenant, lorsque nous examinons la bibliothèque Angular2, nous constatons qu’elle n’est pas écrite en syntaxe AMD, ce qui signifie qu’elle ne peut pas être chargée à l’aide de RequireJS - sans réécrire le code au format AMD. Angular2 s'attend à ce que vous utilisiez une sorte de chargeur de modules universal . Le mot clé ici est universal , ce qui signifie un chargeur de modules capable de charger toutes sortes de formats de script (modules AMD, modules CommonJS et modules ES6). Exemples de chargeurs de modules universels: WebPack et SystemJS.

Parlons maintenant de la solution à votre problème. Je pense que vous devrez migrer de RequireJS vers Webpack, car la migration n’est pas si compliquée.

Étape 1 - Bibliothèques tierces

Lors du chargement de bibliothèques tierces avec RequireJS, nous utilisons les variables path et shims de RequireJS, qui peuvent être facilement converties en alias de Webpack. Mais ce n'est pas nécessaire: une fois que vous travaillez avec Webpack, vous avez un support npm. Cela signifie que vous pouvez exécuter npm install library-name et que vous pouvez maintenant utiliser cette bibliothèque sans RequireJS.

Étape n ° 2 - Scripts d'application

Heureusement pour nous, nous n'avons presque pas besoin de ne rien faire ici. Webpack étant un chargeur de module universel, il peut charger des scripts au format AMD. Ainsi, tous les scripts d'application développés au format RequireJS peuvent être chargés à l'aide de Webpack sans aucune modification.

Pour plus d'informations sur la migration de RequireJS vers Webpack, consultez cet article: https://Gist.github.com/xjamundx/b1c800e9282e16a6a18e

15
Gil Epshtain

Je faisais face au même problème que @devoncrazylegs ..

Ma solution: Configurer le tableau de chemins utilisé dans require.config () dans tsconifg.ts -> compilerOptions -> chemins

Lire le lien ci-dessous pour en savoir plus

https://www.typescriptlang.org/docs/handbook/module-resolution.html#base-u

1
Roshan Kumar