我们现在该如何做System.config(angular / systemjs?)? (“ System.config不是函数”)

时间:2018-12-28 10:00:31

标签: asp.net-mvc angular systemjs

我继承了一个旧的C#MVC / TypeScript / Angular项目,并使其得以执行。该过程的一部分涉及到几个节点程序包和nuget程序包的升级。因此,我偶尔会陷入一个项目,该项目以从未使用过的风格编写,而对于Angular等人现在的工作方式来说可能太旧了,我甚至不确定最终结果应该看起来像或做。但我很感激挑战。

作为升级的一部分,systemjs从v0.2 ish升级到2.1 ish。另外,Angular的东西是v2.ish,现在是v7.ish,一些软件包更改了名称,例如angular2-in-memory-web-api-> angular-in-memory-web-api

值得庆幸的是,这是一个项目的准系统,因此希望现阶段的问题是基本的。

我有一个如下所示的systemjs.config.ts(已成功编译为.js):

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
    System.config({
        paths: {
            // paths serve as alias
            'npm:': '/node_modules/'
        },
        // map tells the System loader where to look for things
        map: {
            // our app is within the app folder
            app: '/Scripts/Discussion',
            shared: '/Scripts/shared',
            // angular bundles
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
            // other libraries
            'rxjs':                       'npm:rxjs',
            'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            app: {
                main: './main.js',
                defaultExtension: 'js'
            },
            shared: {
                defaultExtension: 'js'
            },
            rxjs: {
                defaultExtension: 'js'
            },
            'angular-in-memory-web-api': {
                main: './index.js',
                defaultExtension: 'js'
            }
        }
    });
})(this);

包含我的应用程序的页面看起来像这样的HTML(MVC完成输出后)

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
        <base href="/123/discussion/">
    <title>_BoardLayout</title>

<script src="/Scripts/Libraries/jquery-2.2.2.js"></script>
<script src="/Scripts/Libraries/jquery.signalr-2.2.0.js"></script>
<script src="/Scripts/polyfills/Intl.js"></script>
<script src="/node_modules/core-js/client/shim.js"></script>
<script src="/node_modules/zone.js/dist/zone.js"></script>
<script src="/node_modules/reflect-metadata/Reflect.js"></script>
<script src="/node_modules/systemjs/dist/system.js"></script>
<script src="/Scripts/TinyMce/tinymce.min.js"></script>
<script src="/Scripts/Discussion/systemjs.config.js"></script>

    <script>
        window["localeStrings"] = {
            strings: {
            }
        };
        window["appConfig"] = { apiUrl: "/api/" };
        window["sessionConfig"] = { token: '123', role: 'moderator', userId: 1 };
        System.import('app').catch(function(err) { console.error(err); });
    </script>

    <link href="/Content/less/discussion.less" rel="stylesheet"/>

</head>
<body>

<discussion-app></discussion-app>

</body>
</html>

System.import工作正常;我可以在控制台的自动完成功能中看到它,但是System.config不存在。这些天我们要做什么替代品?

注意:我发现了这一点:System.config is not defined似乎暗示System.config已消失,而应该<script>作为json块进行编辑,但我不明白我的意思在我的MVC /打字稿情况下需要使用它,特别是一种在Razor无需解释脚本中多个@angular的情况下将其显示在页面上的简洁方法

最后,如果这些天我应该以其他方式加载模块,我不完全拒绝对systemjs进行分箱,在这种情况下,欢迎提供一些有关如何重新配置​​项目的指针

0 个答案:

没有答案