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
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
Vous devez vous connecter pour publier un commentaire.
Ce que vous essayez de faire n'est pas possible (enfin, en génie logiciel, comme dans l'art, tout est possible, mais pour atteindre cet objectif, vous aurez besoin de modifier l'angle du script, et nous ne voulons pas de ça).
Pas comme Angular1, qui a été développé dans ECMAScript5 (l'aimé langage JavaScript), Angular2 a été développé dans ECMAScript6 (et en caractères d'imprimerie).
L'une des différences est que, dans ECMAScript5 afin de charger un fichier de script (.js, .ts, etc.) nous avons besoin d'ajouter un
<script>
tag avecsrc
attribut, qui pointent vers le fichier de script.La solution était d'utiliser la 3ème partie de la bibliothèque, qui a chargé les scripts de manière asynchrone (par exemple pour les bibliothèques de ce genre sont: RequireJS, WebPack, SestemJS, etc.).
Le principal inconvénient de RequireJS, c'est qu'il ne fonctionne que sur les scripts sont écrits dans un AMD format (Asynchronous Module Definition), par exemple:
Cette syntaxe est très efficace lorsque l'on travaille avec Angular1 et RequireJS.
Maintenant, quand on regarde Angular2 de la bibliothèque, nous pouvons voir qu'il n'est pas écrit dans la DMLA syntaxe, le sens qu'il ne peut pas être chargé à l'aide de RequireJS - sans avoir à réécrire le code en AMD format. Angular2 attend que vous utilisez une sorte de universelle chargeur de module. Le mot clé ici est universelle, ce qui signifie un chargeur de module qui peut charger tous les types de formats de script (AMD modules, CommonJS modules et ES6 modules). Exemples de module universel chargeurs sont: WebPack et SystemJS.
Maintenant, nous allons parler de la solution à votre problème, je crois que vous aurez besoin de migrer à partir de RequireJS pour Webpack - depuis la migration n'est pas si compliqué.
L'étape n ° 1 - 3ème Partie les Bibliothèques
Lors du chargement de la 3e Partie des Bibliothèques avec RequireJS, nous sommes à l'aide de RequireJS de
path
etshims
, qui peut être facilement converti en Webpack estalias
. Mais ce n'est pas nécessaire: une fois que vous travaillez avec Webpack, vous disposez d'un mnp soutien. Cela signifie que vous pouvez exécuternpm install library-name
et maintenant vous pouvez utiliser cette bibliothèque sans RequireJS.Étape#2 - Application des scripts
Heureusement pour nous, nous l'avons presque n'avez pas besoin de ne rien faire ici. Depuis Webpack est un module universel de chargeur, il peut charger des scripts en AMD format. De sorte que tous les scripts d'application qui a été développé dans le RequireJS format, peut être chargé à l'aide de Webpack sans aucune modification.
Pour plus d'informations sur la façon de migrer à partir de RequireJS pour Webpack voir cet article: https://gist.github.com/xjamundx/b1c800e9282e16a6a18e
OriginalL'auteur Gil Epshtain
J'ai été confronté à la même question que @devoncrazylegs face..
Ma solution: Configurer les chemins d'accès tableau utilisé dans le besoin.config() dans tsconifg.ts --> compilerOptions-->chemins
Lire ci-dessous le lien pour comprendre plus
https://www.typescriptlang.org/docs/handbook/module-resolution.html#base-u
OriginalL'auteur Roshan Kumar