Mam problemy z ładowaniem Angulara2 w celu prawidłowego załadowania podczas dołączania RequireJS do aplikacji.Angular2 z RequireJS
Dla uproszczenia mądry używam bardzo prostego samouczka Hello World JavaScript w Angular2 znaleźć tutaj: https://angular.io/docs/js/latest/quickstart.html
Mam ten system działa poprawnie przy użyciu Angular1 ale nie wydaje się replikować ten sukces korzystając Angular2.
Oto mój plik 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>
Mój plik require.config.js:
require([
'assets/requiredPathsAndShim.js'
], function(requirePathsAndShim) {
require.config({
baseUrl: '/',
paths: requirePathsAndShim.paths,
shim: requirePathsAndShim.shim,
/// Kick start app...
deps: ['app/main']
});
});
Używam pliku requiredPathsAndShim.js do załadowania wszystkich zależności, które widzę, które są wymagane do uruchomienia aplikacji Angular2. Tutaj jest plik:
"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);
I następnie załadować aplikacji '/' główny plik z mojego 'required.config' pliku, który będzie ładować funkcjonalność bootstrap z Angular2:
"use strict";
(function() {
define([
'app/app.component'
], function(app) {
document.addEventListener('DOMContentLoaded', function() {
ng.platformBrowserDynamic.bootstrap(app.AppComponent);
});
});
})();
Aplikacja/app .component file to plik, który po prostu zwraca mój składnik Angular2, który jest przekazywany do funkcji bootstrap main.js, aby uruchomić aplikację. jest to plik:
"use strict";
(function() {
define([
], function() {
return {
AppComponent : ng.core.Component({
selector : 'ireland-product-app',
template : '<h1>Product App</h1>'
})
.Class({
constructor : function() {}
})
}
});
})();
Bawiłem się z tym przez kilka godzin i nie wydaje się, aby to działało. Czy ktoś może wskazać mi właściwy kierunek, dlaczego to nie działa? Mam wrażenie, że niektóre shims muszą być dodane do require.config, ale nie miałem żadnych sukcesów ustawiania zależności ładowania skryptów jak dotąd.
Dzięki
wiem, że nie chcesz tego słuchać, ale będziesz mieć dużo łatwiej, jeśli używasz systemu lub WebPack (lub nawet Browserify) z Angular2. System obsługuje również asynchroniczne leniwy ładowanie. Dodatkowo można zajrzeć do składni modułu ES6 za pomocą TypeScript, ponieważ pozwala on na jednorazowe zapisanie importu modułów i kieruje się do dowolnego wybranego systemu modułów. Oddziela to twój kod od określonego systemu modułów. – Martin
@martin, potrzebuję zrobić to samo, ponieważ nasz istniejący system używa requirejs i nie ma nic przeciwko używaniu systemu, ale najlepiej jest wczytać istniejący kod, ponieważ kątowe1 i kątowe2 będą współgrać ze sobą, dopóki kątowy1 nie zostanie całkowicie oddalony. – Basit
Mam ten sam problem - próbuję uruchomić aplikację Angular2 za pomocą RequireJS. Ale proszę zauważyć, że dla RequireJS załaduj jakiś plik, ten plik musi mieć składnię AMD, co oznacza, że plik musi być zapisany wewnątrz bloku define ([], function() {...}). Jednak skrypty Angular2 są napisane z inną składnią - z instrukcją importu/eksportu. Dlatego Require nie może ich załadować, a słowo kluczowe do eksportu (w skryptach Angular2) wyświetla na słowie kluczowym eksportu błąd - nieoczekiwany znak. –