使用ng2-material会出现错误" Uncaught ReferenceError:require未定义"

时间:2016-02-03 16:26:02

标签: angular

我正在使用角度2创建应用。我想在我的应用中使用角度素材。但角度材料尚不可用于角度2我尝试在我的应用程序中使用ng2-material我使用npm install安装它并在app组件中添加材料指令并将其映射到index.php,如下所示但是当我尝试运行应用程序时它会给出错误。

index.php

<!doctype html>
<html>

<head>
 <base href="/">
<title>Angular 2 QuickStart</title>
<!-- 1. Load libraries -->
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/router.dev.js"></script>
<script src="node_modules/angular2/bundles/http.dev.js"></script>
<link rel="stylesheet" href="node_modules/ng2-material/dist/ng2-material.css">
<link rel="stylesheet" href="node_modules/ng2-material/dist/font.css">  
<!-- 2. Configure SystemJS -->
<script>
  System.config({
   packages: {        
        app: {
            format: 'register',
            defaultExtension: 'js'
        },
        'ng2-material': {
            format: 'register',
            defaultExtension: 'js'
        }
        },
        map: {
        'ng2-material': 'node_modules/ng2-material'
        }
    });
  System.import('app/boot')
        .then(null, console.error.bind(console));
</script>

 </head>

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

</html>

错误

  

未捕获的ReferenceError:未定义require

任何人都可以帮助我。

1 个答案:

答案 0 :(得分:0)

尝试以下系统配置

<script>

    System.config({
            packages: {
                app: {
                    format: 'register',
                    defaultExtension: 'js'
                },
                'ng2-material': {
                    defaultExtension: 'js'
                }
            ,
            map: {
                'ng2-material': 'node_modules/ng2-material'
            }
        },
        paths: {
        'ng2-material/*': 'node_modules/ng2-material/*'
    }
    });
    System.import('app/boot')
        .then(null, console.error.bind(console));
</script>