Tôi gặp sự cố khi tải Angular2 để tải chính xác khi kết hợp RequireJS vào ứng dụng.Angular2 với RequireJS
Để đơn giản khôn ngoan Tôi đang sử dụng rất đơn giản Hello World Javascript hướng dẫn về các Angular2 nằm ở đây: https://angular.io/docs/js/latest/quickstart.html
tôi có hệ thống này làm việc tốt bằng Angular1 nhưng tôi dường như không thể tái tạo thành công này sử dụng Angular2.
Dưới đây là file index.html của tôi:
<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>
require.config.js My file:
require([
'assets/requiredPathsAndShim.js'
], function(requirePathsAndShim) {
require.config({
baseUrl: '/',
paths: requirePathsAndShim.paths,
shim: requirePathsAndShim.shim,
/// Kick start app...
deps: ['app/main']
});
});
Tôi sử dụng tệp requiredPathsAndShim.js để tải tất cả các phụ thuộc mà tôi thấy bắt buộc phải bắt đầu ứng dụng Angular2. Dưới đây là file:
"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);
sau đó tôi nạp '/ main ứng dụng' tập tin từ tập tin 'required.config' của tôi mà sẽ được tải các chức năng bootstrap của Angular2:
"use strict";
(function() {
define([
'app/app.component'
], function(app) {
document.addEventListener('DOMContentLoaded', function() {
ng.platformBrowserDynamic.bootstrap(app.AppComponent);
});
});
})();
Ứng dụng/app tập tin .component là một tập tin đơn giản trả về thành phần Angular2 của tôi được chuyển vào hàm bootstrap main.js để khởi động ứng dụng. đây là tệp:
"use strict";
(function() {
define([
], function() {
return {
AppComponent : ng.core.Component({
selector : 'ireland-product-app',
template : '<h1>Product App</h1>'
})
.Class({
constructor : function() {}
})
}
});
})();
Tôi đã chơi trò chơi này trong vài giờ và dường như không thể làm việc này được. Bất cứ ai có thể chỉ cho tôi đi đúng hướng là tại sao điều này không hoạt động? Tôi có một cảm giác một số shims cần phải được thêm vào require.config nhưng tôi đã không có cài đặt thành công phụ thuộc kịch bản tải như được nêu ra.
Cảm ơn
Tôi biết bạn không muốn nghe điều này, nhưng bạn sẽ có một thời gian dễ dàng hơn nhiều nếu bạn sử dụng hệ thống hoặc WebPack (hoặc thậm chí Browserify) với Angular2. Hệ thống cũng hỗ trợ tải lười không đồng bộ. Ngoài ra, bạn có thể muốn xem xét sử dụng cú pháp mô-đun ES6 với TypeScript, vì nó cho phép bạn ghi nhập mô-đun của mình một lần và nhắm mục tiêu bất kỳ hệ thống mô-đun nào bạn chọn. Điều này decouples mã của bạn từ một hệ thống mô-đun cụ thể. – Martin
@martin, tôi cần phải làm điều tương tự, bởi vì hệ thống hiện tại của chúng tôi sử dụng requirejs và không ngại sử dụng hệ thống, nhưng tôi nghĩ tốt nhất là tải từ mã hiện có, vì angular1 và angular2 sẽ cùng nhau lưu trữ cho đến khi angular1 hoàn toàn đã xóa. – Basit
Tôi có cùng một vấn đề - tôi cố gắng chạy ứng dụng Angular2 bằng cách sử dụng RequireJS. Nhưng xin lưu ý rằng đối với RequireJS tải một số tập tin, tập tin này cần phải được trong cú pháp AMD có nghĩa là tập tin cần phải được viết bên trong một khối xác định ([], chức năng() {...}). Tuy nhiên, các script của Angular2 được viết với cú pháp khác nhau - với câu lệnh import/export. Do đó Yêu cầu không thể tải chúng, và từ khóa xuất khẩu (trong các kịch bản Angular2) ném một ký tự lỗi - bất ngờ - trên từ khóa xuất khẩu. –