systemjs + angualr2 将app文件夹外面加一层src文件夹后报错

目前的问题是移动index.html到src中就会报错找不到System变量,index.html放在根目录则正常
图片描述

index.html

<html>
<head>
    <base href="/">
    <title>ng2-taidiiv2</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--<link rel="stylesheet" href="app/styles.css">-->

    <!-- Compiled and minified CSS -->
    <!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">-->
    <!--<link href="node_modules/materialize-css/dist/css/materialize.css" type="text/css" rel="stylesheet"-->
    <!--media="screen,projection"/>-->
    <!--<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">-->
    <link href="//cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.min.css" rel="stylesheet">

    <!-- CORE CSS-->
    <link href="../node_modules/materialize-css/dist/css/materialize.min.css" type="text/css" rel="stylesheet"
          media="screen,projection">
    <!--<link href="app/style.css" type="text/css" rel="stylesheet" media="screen,projection">-->
    <link href="assets/css/app.css" type="text/css" rel="stylesheet" media="screen,projection">

    <!--<link href="//cdn.bootcss.com/materialize/0.97.8/css/materialize.min.css" rel="stylesheet">-->
    <!--<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>-->
    <!--<script src="//cdn.bootcss.com/materialize/0.97.8/js/materialize.min.js"></script>-->


    <!-- Import jQuery before materialize.js -->
    <script src="../node_modules/jquery/dist/jquery.js"></script>
    <!--<script src="node_modules/hammerjs/hammer.js"></script>-->
    <script src="../node_modules/materialize-css/dist/js/materialize.min.js"></script>


    <!-- 1. Load libraries -->
    <!-- Polyfill(s) for older browsers -->
    <script src="../node_modules/core-js/client/shim.min.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.src.js"></script>


    <!-- 2. Configure SystemJS -->
    <script src="../systemjs.config.js"></script>
    <script>
        System.import('app').catch(function (err) {
            console.error(err);
        });
    </script>

</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>

system-config.js

<html>
<head>
    <base href="/">
    <title>ng2-taidiiv2</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--<link rel="stylesheet" href="app/styles.css">-->

    <!-- Compiled and minified CSS -->
    <!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">-->
    <!--<link href="node_modules/materialize-css/dist/css/materialize.css" type="text/css" rel="stylesheet"-->
    <!--media="screen,projection"/>-->
    <!--<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">-->
    <link href="//cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.min.css" rel="stylesheet">

    <!-- CORE CSS-->
    <link href="../node_modules/materialize-css/dist/css/materialize.min.css" type="text/css" rel="stylesheet"
          media="screen,projection">
    <!--<link href="app/style.css" type="text/css" rel="stylesheet" media="screen,projection">-->
    <link href="assets/css/app.css" type="text/css" rel="stylesheet" media="screen,projection">

    <!--<link href="//cdn.bootcss.com/materialize/0.97.8/css/materialize.min.css" rel="stylesheet">-->
    <!--<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>-->
    <!--<script src="//cdn.bootcss.com/materialize/0.97.8/js/materialize.min.js"></script>-->


    <!-- Import jQuery before materialize.js -->
    <script src="../node_modules/jquery/dist/jquery.js"></script>
    <!--<script src="node_modules/hammerjs/hammer.js"></script>-->
    <script src="../node_modules/materialize-css/dist/js/materialize.min.js"></script>


    <!-- 1. Load libraries -->
    <!-- Polyfill(s) for older browsers -->
    <script src="../node_modules/core-js/client/shim.min.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.src.js"></script>


    <!-- 2. Configure SystemJS -->
    <script src="../systemjs.config.js"></script>
    <script>
        System.import('app').catch(function (err) {
            console.error(err);
        });
    </script>

</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>

bs-config.js

{
  "port": 3000,
  "server": {
    "baseDir": "./src"
  }
}

目录:

图片描述

阅读 5k
2 个回答

首先,你要把报什么错贴上来啊

这个出错是因为你的项目中的路径和你system-config.js中配置的路径不符
根据如下代码看出你的入口文件使用的是main

System.import('../system-config.js').then(function () {
        System.import('main');
      }).catch(console.error.bind(console));

那么请你更改system-config.js文件中的map对象下面的"main"属性的值 由'app/main.js'更改为'src/app/main.js',

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题