Question

我正在尝试学习angular2但是我坚持使用SystemJS配置。

<!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': '.', // where my app is. '.' means relative
                '@angular': '/js/node_modules/@angular',
                'rxjs': '/js/node_modules/rxjs'
            }
        });
        System.import('management/main')
                .then(null, console.error.bind(console));
    </script>

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

<body>

<my-app>Loading...</my-app>

</body>
</html>

我的文件结构是：

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

main.ts：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import {RootModule} from "./app/root.module";

platformBrowserDynamic().bootstrapModule(RootModule);

root.module.ts：

import { NgModule }       from '@angular/core';
import { BrowserModule  } from '@angular/platform-browser';
import { AppComponent }   from './app.component';


@NgModule({
    imports:      [BrowserModule], // what my Angular Application needs
    declarations: [AppComponent], // the view classes that belong to this module.
    bootstrap:    [AppComponent], // which class to boostrap
})
export class RootModule {}

app.component.ts：

import {Component} from '@angular/core';
@Component({
    selector: 'my-app',
    template: '<h1>BLAAH is best !!! OMGOMGOMG blagh assdsdasd</h1>'
})
export class AppComponent { }

我已经阅读了systemjs提供的所有文档，但似乎无法理解配置中发生了什么。

例如，如果我写：

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

我在控制台中收到了这些错误？

GET http://merchant.localhost:1337/main.js 404 (Not Found)
Error: (SystemJS) XHR error (404 Not Found) loading http://merchant.localhost:1337/main.js(…)

=============================================== ==========================

------------------------------------ EDIT 1 --------- ----------------------

=============================================== ==========================

我改变了：

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));

所以现在我的应用程序位于管理文件夹中，我用＆＃34; app＆＃34;知道它必须运行 main.js 等等。这有效。大。所以我继续创建了一个 root.component.html ，现在没有加载。这是代码：

root.component.ts：

import {Component} from '@angular/core';
@Component({
    selector: 'root-component',
    templateUrl: 'root.component.html'
})
export class RootComponent { }

错误：

GET http://merchant.localhost:1337/root.component.html 404 (Not Found)

Answer 1

您似乎确实需要将app映射到management文件夹而不是.。你已经重命名了你的根，这就是你遇到这些麻烦的原因。

您还需要在包中修复main: './main.js'并使用app作为模块名称。

所以会发生的事情是你告诉System.Js有一个名为app的包，你可以在./management/main.js下找到它。

P.S。我不是System.Js的超级大专家，所以我可能错了，但我设法用Angular2教程运行它：）

请解释一下这个SystemJs配置

1 个答案: