(SystemJS)模块未定义 [英] (SystemJS) module is not defined

查看:87
本文介绍了(SystemJS)模块未定义的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

尝试加载angular2页面时出现此错误:

I am getting this error when trying to load angular2 page:

https://postimg.org/image/meg0l2znn/

我的index.html

My index.html

<!DOCTYPE html>
<html>
<head>
    <title>Reloyalty Administration Dashboard</title>

    <!-- Viewport mobile tag for sensible mobile support -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="icon" href="/favicon.ico">

    <!-- For Angular2 Routing -->
    <base href="/">


    <!-- Common Scripts-->
    <script src="/common/js/jquery-1.11.3.min.js"></script>

    <!--SCRIPTS-->
    <script src="/bootstrap/js/bootstrap.min.js"></script>
    <script src="/dashboard/js/bootstrap-switch.js"></script>
    <script src="/dashboard/js/calendar-conf-events.js"></script>
    <script src="/dashboard/js/chartjs-conf.js"></script>
    <script src="/dashboard/js/common-scripts.js"></script>
    <script src="/dashboard/js/easy-pie-chart.js"></script>
    <script src="/dashboard/js/form-component.js"></script>
    <script src="/dashboard/js/gritter-conf.js"></script>
    <script src="/dashboard/js/jquery-ui-1.9.2.custom.min.js"></script>
    <script src="/dashboard/js/jquery.backstretch.min.js"></script>
    <script src="/dashboard/js/jquery.dcjqaccordion.2.7.js"></script>
    <script src="/dashboard/js/jquery.nicescroll.js"></script>
    <script src="/dashboard/js/jquery.scrollTo.min.js"></script>
    <script src="/dashboard/js/jquery.sparkline.js"></script>
    <script src="/dashboard/js/jquery.tagsinput.js"></script>
    <script src="/dashboard/js/jquery.ui.touch-punch.min.js"></script>
    <script src="/dashboard/js/sparkline-chart.js"></script>
    <script src="/dashboard/js/tasks.js"></script>
    <script src="/dashboard/js/zabuto_calendar.js"></script>
    <script src="/dashboard/js/bootstrap-inputmask/bootstrap-inputmask.min.js"></script>
    <script src="/dashboard/js/chart-master/Chart.js"></script>
    <script src="/dashboard/js/fancybox/jquery.fancybox.js"></script>
    <script src="/dashboard/js/fullcalendar/fullcalendar.min.js"></script>
    <script src="/dashboard/js/gritter/js/jquery.gritter.js"></script>
    <script src="/dashboard/js/jquery-easy-pie-chart/jquery.easy-pie-chart.js"></script>
    <script src="/js/node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="/js/node_modules/reflect-metadata/Reflect.js"></script>
    <script src="/js/node_modules/systemjs/dist/system-polyfills.js"></script>
    <script src="/js/node_modules/systemjs/dist/system.src.js"></script>
    <script src="/js/node_modules/zone.js/dist/zone.js"></script>
    <script src="/js/node_modules/rxjs/bundles/Rx.js"></script>
    <!--SCRIPTS END-->

    <script>



        System.config({
            packages: {
                app: {
                    format: 'register',
                    defaultExtension: 'js',
                    main: './main.js'
                },
                '@angular/core': {
                    main: 'bundles/core.umd.js',
                    defaultExtension: 'js'
                },
                '@angular/compiler': {
                    main: 'bundles/compiler.umd.js',
                    defaultExtension: 'js'
                },
                '@angular/common': {
                    main: 'bundles/common.umd.js',
                    defaultExtension: 'js'
                },
                '@angular/platform-browser-dynamic': {
                    main: 'bundles/platform-browser-dynamic.umd.js',
                    defaultExtension: 'js'
                },
                '@angular/platform-browser': {
                    main: 'bundles/platform-browser.umd.js',
                    defaultExtension: 'js'
                },
                rxjs: {
                    main: 'bundles/Rx.umd.min.js',
                    defaultExtension: 'js'
                }
            },
            map: {
                'app': 'management', // where my app is. '.' means relative
                '@angular': '/js/node_modules/@angular',
                'rxjs': '/js/node_modules/rxjs'
            }
        });
        System.import('app')
                .then(null, console.error.bind(console));
    </script>

    <!-- end AngularJS 2-->
</head>

<body>

<root-component>Loading...</root-component>

</body>
</html>

这是怎么回事?为什么找不到SystemJS ...

What is going on ? Why is it not finding SystemJS ...

注意:我的文件夹结构是该应用程序位于资产/管理文件夹下,如下所示:

NOTE: My folder structure is that the app is located under assets/management folder like so:

management/
├── app/
|   ├──root/
│       ├── root.component.ts
|       ├── root.module.ts
├──main.ts

注意2:删除System.import ...导致未引发错误

NOTE2: removing System.import ... results in the error not being thrown

System.import('app')
                .then(null, console.error.bind(console));

推荐答案

我敢打赌,您需要先加载 system.src.js ,然后再加载 system-polyfills.js .您现在正以另一种方式这样做.

I bet you need to first load system.src.js and then system-polyfills.js. You're doing it the other way around now.

<script src="/js/node_modules/systemjs/dist/system.src.js"></script>
<script src="/js/node_modules/systemjs/dist/system-polyfills.js"></script>

请参阅: https://github.com/systemjs/systemjs#promise-polyfill

这篇关于(SystemJS)模块未定义的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆