0

我正在尝试将 Angular Material 2 导入一个简单的 Angular 2 应用程序。我已经通过 NPM 成功下载了文件，并且可以将 MdCardModule 导入我的 app.module.ts 并编译没有任何错误。问题是，只要我将 MdCardModule 作为@NgModule 的一部分包含在内，而是显示组件文本“WORKING”，它就会变为空白。有什么理由吗？

这是我的代码：

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: '<h1>WORKING</h1>'
})
export class AppComponent { }

app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MdCoreModule} from '@angular2-material/core';
import { MdCardModule} from '@angular2-material/card';


import { AppComponent }   from './app.component';

@NgModule({
  imports:      [ BrowserModule,MdCoreModule.forRoot(),MdCardModule.forRoot()],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ],

})

export class AppModule { }

索引.html

<html>
  <head>
    <title>Angular 2 QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
    <!-- 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>
    <!-- Load the core.css stylesheet manually (temporary) -->
    <link href="https://npmcdn.com/@angular2-material/core@latest/style/core.css">
  </head>
  <!-- 3. Display the application -->
  <body>
    <my-app></my-app>

  </body>
</html>
4

2 回答 2

0

您还需要在根模块中导入 MdCoreModule.forRoot() 和 MdCoreModule.forRoot()。

于 2016-09-23T13:13:25.403 回答
0

我遇到了同样的问题，并且能够通过编辑systemjs.config.js来解决它：

/**
* System configuration for Angular 2 samples
* Adjust as necessary for your application needs.
*/
(function (global) {
    var packages = {
            app: { main: './main.js', defaultExtension: 'js' },
            rxjs: { defaultExtension: 'js'},
            'angular2-in-memory-web-api': { main: './index.js', defaultExtension: 'js' },
        },
        materialPackages = [ 'core', 'button', 'card', 'toolbar' ];

    materialPackages.forEach(function(pkgName) {
        packages[`@angular2-material/${pkgName}`] = { main: `${pkgName}.umd.js`, defaultExtension: 'js', format: 'cjs' };
    });

    System.config({
        paths: {
            // paths serve as alias
            'npm:': 'node_modules/'
        },
        // map tells the System loader where to look for things
        map: {
            // our app is within the app folder
            app: 'app',
            // angular bundles
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
            // other libraries
            'rxjs':                       'npm:rxjs',
            'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
            // @angular2-material
            '@angular2-material': 'npm:@angular2-material',
        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: packages
    });
})(this);

同样在app.module.ts我还没有导入MdCoreModule。

于 2016-09-23T20:27:37.350 回答