【发布时间】：2016-06-02 12:06:02
【问题描述】：
在将 RequireJS 合并到应用程序时，我无法正确加载 Angular2。
为简单起见，我在 Angular2 上使用非常简单的 Hello World Javascript 教程：https://angular.io/docs/js/latest/quickstart.html
我让这个系统使用 Angular1 运行良好，但我似乎无法使用 Angular2 复制这种成功。
这是我的 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>
我的 require.config.js 文件：
require([
'assets/requiredPathsAndShim.js'
], function(requirePathsAndShim) {
require.config({
baseUrl: '/',
paths: requirePathsAndShim.paths,
shim: requirePathsAndShim.shim,
/// Kick start app...
deps: ['app/main']
});
});
我使用 requiredPathsAndShim.js 文件来加载我看到的启动 Angular2 应用程序所需的所有依赖项。这是文件：
"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);
然后我从我的“required.config”文件中加载“app/main”文件，该文件将加载 Angular2 的引导功能：
"use strict";
(function() {
define([
'app/app.component'
], function(app) {
document.addEventListener('DOMContentLoaded', function() {
ng.platformBrowserDynamic.bootstrap(app.AppComponent);
});
});
})();
app/app.component 文件是一个简单地返回我的 Angular2 组件的文件，该组件被传递到 main.js 引导函数以启动应用程序。这是文件：
"use strict";
(function() {
define([
], function() {
return {
AppComponent : ng.core.Component({
selector : 'ireland-product-app',
template : '<h1>Product App</h1>'
})
.Class({
constructor : function() {}
})
}
});
})();
我已经玩了几个小时了，但似乎无法正常工作。谁能指出我为什么这不起作用的正确方向？我感觉需要将一些 shims 添加到 require.config 中，但到目前为止我还没有成功设置脚本加载依赖项。
谢谢
【问题讨论】：
-
我知道你不想听到这个，但是如果你将 System 或 WebPack（甚至 Browserify）与 Angular2 一起使用，你将会轻松很多。系统也支持异步延迟加载。此外，您可能希望考虑将 ES6 模块语法与 TypeScript 一起使用，因为它允许您编写一次模块导入，并针对您选择的任何模块系统。这将您的代码与特定的模块系统分离。
-
@martin，我需要做同样的事情，因为我们现有的系统使用 requirejs 并且不介意使用系统，但我认为最好从现有代码加载，因为 angular1 和 angular2 将是 co -host在一起，直到angular1被完全删除。
-
我有同样的问题 - 我尝试使用 RequireJS 运行 Angular2 应用程序。但请注意，对于 RequireJS 加载某些文件，该文件需要采用 AMD 语法，这意味着该文件需要写入 define([], function(){ ... }) 块中。然而，Angular2 的脚本是用不同的语法编写的——使用 import/export 语句。因此 Require 无法加载它们，并且导出关键字（在 Angular2 脚本中）在导出关键字上抛出错误 - 意外字符。