Angular2 avec RequireJS

Je vais avoir des problèmes à obtenir Angular2 pour charger correctement lors de l'incorporation RequireJS dans l'application.

Pour des raisons de simplicité sage je suis en utilisant le très simple Hello World Javascript tutoriel sur la Angular2 trouve ici : https://angular.io/docs/js/latest/quickstart.html

J'ai ce système fonctionne à l'aide de Angular1 mais je n'arrive pas à reproduire ce succès à l'aide de Angular2.

Voici mon index.html fichier:

<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 require.config.js fichier:

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

    baseUrl: '/',

    paths: requirePathsAndShim.paths,

    shim: requirePathsAndShim.shim,

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

});

- Je utiliser l'requiredPathsAndShim.js fichier à charger toutes les dépendances, je vois qui sont nécessaires pour démarrer une Angular2 application. 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);

J'ai ensuite charger le 'app/main' fichier de mon besoin.config' fichier qui se charge de l'amorçage de la fonctionnalité de Angular2:

"use strict";

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

L'app/app.composant le fichier est un fichier qui renvoie simplement mon Angular2 composante qui s'est passé dans le main.js bootstrap fonction 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() {}
                })
        }
    });
})();

J'ai été jouer avec pendant quelques heures et n'arrive pas à obtenir ce travail. Quelqu'un peut me pointer dans la bonne direction pour expliquer pourquoi cela ne fonctionne pas? J'ai un sentiment de certains des cales doivent être ajoutés dans le besoin.config mais je n'ai eu aucun succès paramètre de script de chargement des dépendances encore.

Grâce

Je sais que vous ne voulez pas entendre cela, mais vous allez avoir un temps beaucoup plus facile si vous utilisez le Système ou WebPack (ou même Browserify) avec Angular2. Système asynchrone chargement paresseux. En outre, vous voudrez peut-être chercher dans l'aide de l'ES6 module de syntaxe, texte dactylographié, car il vous permet d'écrire votre module importe la fois, et la cible de n'importe quel module du système que vous choisissez. Cette découple le code d'un module spécifique du système.
J'ai besoin de faire la même chose, parce que notre système actuel utilise requirejs et n'avez pas l'esprit en utilisant le système, mais je pense que le mieux est de les charger à partir d'un code existant, depuis angular1 et angular2 sera co-organisateur de l'ensemble jusqu'à ce que angular1 est complètement enlevé.
J'ai le même problème - j'essaie d'exécuter Angular2 application à l'aide de RequireJS. Mais s'il vous plaît notez que pour RequireJS charger un fichier, ce fichier doit être dans AMD syntaxe sens le fichier doit être écrit à l'intérieur d'un define([], function(){ ... }) bloc. Cependant, le Angular2 scripts sont écrits avec une syntaxe différente - avec une importation/exportation de déclaration. Nécessitent donc ne peut pas les charger, et l'exportation mot clé (dans le Angular2 scripts) de jeter une erreur de caractère inattendu sur l'exportation mot-clé.

OriginalL'auteur Jim | 2016-06-02