Question

在将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() {}
                })
        }
    });
})();

我一直在玩这个几个小时，似乎无法让这个工作。任何人都可以指出我正确的方向为什么这不起作用？我有一种感觉需要将一些填充程序添加到require.config中，但我还没有成功设置脚本加载依赖项。

由于

Answer 1

你要做的事情是不可能的（好吧，在软件工程中，就像在艺术中 - 一切皆有可能，但要实现这一点，你需要编辑角度的脚本，我们不希望这样）点。

不像Angular1，它是在ECMAScript5（喜爱的JavaScript语言）中开发的，Angular2是在ECMAScript6（和TypeScript）中开发的。

其中一个不同之处在于，在ECMAScript5中为了加载脚本文件（.js，.ts等），我们需要添加<script>标记src属性，指向脚本文件。另一种方法是使用第三方库，它以异步方式加载脚本（像这样的库的示例是：RequireJS，WebPack，SestemJS等。）

RequireJS的主要缺点是它只适用于以AMD格式（异步模块定义）编写的脚本，例如：

define(['dependence_1', 'dependence_2', ...], function(alias_1, alias_2, ...) {
// ...
});

使用Angular1和RequireJS时，此语法非常有效。

现在，当我们查看Angular2库时，我们可以看到它不是用AMD语法编写的，这意味着它无法使用RequireJS加载 - 无需将代码重写为AMD格式。 Angular2希望你使用某种通用模块加载器。这里的关键字是通用，这意味着模块加载器可以加载各种脚本格式（AMD模块，CommonJS模块和ES6模块）。通用模块加载器的示例有：WebPack和SystemJS。

现在让我们谈谈你的问题的解决方案，我相信你需要从RequireJS迁移到Webpack - 因为迁移不是那么复杂。

第1步 - 第三方图书馆

使用RequireJS加载第三方库时，我们使用的是RequireJS的path和shims，可以轻松转换为Webpack的alias。但这不是必需的：一旦您使用Webpack，您就获得了npm支持。这意味着您可以运行npm install library-name，现在您可以在没有RequireJS的情况下使用此库。

第2步 - 应用程序脚本

幸运的是，我们几乎不需要在这里做任何事情。由于Webpack是通用模块加载器，因此它可以加载AMD格式的脚本。因此，所有以RequireJS格式开发的应用程序脚本都可以使用Webpack加载而无需任何更改。

有关如何从RequireJS迁移到Webpack的更多信息，请参阅此文章：https://gist.github.com/xjamundx/b1c800e9282e16a6a18e

Answer 2

我面临同样的问题@devoncrazylegs面临的问题......

我的解决方案：在tsconifg.ts中配置require.config（）中使用的路径数组 - ＆gt; compilerOptions - ＆GT;路径

阅读以下链接以了解更多

https://www.typescriptlang.org/docs/handbook/module-resolution.html#base-u

带有RequireJS的Angular2

2 个答案: