Question

我正在使用material2开始一个新的angular2项目。

我已经定义了system.js来加载material2模块，但由于某种原因，它们没有加载，我不能使用材料指令：

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Angular2 playground</title>
    <link rel="stylesheet" href="dist/reset.css">
    <link rel="stylesheet" href="dist/styles.css">
</head>

<body>
    <html-app>Loading...</html-app>
</body>

<!-- ES6-related imports -->
<script src="/node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="/node_modules/es6-shim/es6-shim.min.js"></script>
<script src="/node_modules/systemjs/dist/system.js"></script>
<script>
    //configure system loader
    System.config({
        packages:{
            'dist':{
                format: 'register',
                defaultExtension: 'js'
            },
            // The core package is required as a peerDependency for other components.
            'node_modules/@angular2-material/core': {
                format: 'register',
                defaultExtension: 'js',
                main: 'core.js'
            },
            'node_modules/@angular2-material/checkbox': {
                format: 'register',
                defaultExtension: 'js',
                main: 'checkbox.js'
            },
            'node_modules/@angular2-material/button': {
                format: 'register',
                defaultExtension: 'js',
                main: 'button.js'
            }
        }
    });

</script>
<script src="/node_modules/rxjs/bundles/Rx.js"></script>
<script src="/node_modules/angular2/bundles/angular2.js"></script>
<script>
    //bootstrap the Angular2 application
    System.import('dist/main.component').catch(console.log.bind(console));

</script>

</html>


//this gives me a regular button with no styling
<button md-icon-button>
   <i class="material-icons md-24">favorite</i>
</button>

我在控制台和网络选项卡上没有错误，我可以看到没有加载任何材料模块。这是我的目录结构：

@ angular2-material位于node_modules下。

System.js：未加载material2

0 个答案: