Question

我正在尝试将Angular Material 2导入一个简单的Angular 2 App。我已经通过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 { }

的index.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>

Answer 1

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

Answer 2

我遇到了同样的问题并且能够解决它编辑 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 。

无法加载Angular Material 2模块

2 个答案: