注意：我不使用Angular Cli .

我添加了 @angular2-material/core 包 . 然后我安装了其他angular2材料组件，如 @angular2-material/button ， @angular2-material/card 等 .

systemjs.config.js

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'app':                        'app', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs',
    '@angular2-material':         'node_modules/@angular2-material', 
    // <--------------added this above line----------------------
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'forms',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];

  //<------------------added this below part--------------------------------
var materialPackages=[
    'core',
    //'button',
    //'card',
    'list',
  ];
  materialPackages.forEach(function(pkgName) {
    packages['@angular2-material/'+pkgName] = { format: 'cjs', defaultExtension: 'js'};
  });
 //<----------------------till here---------------------------------


  // Individual files (~300 requests):
  function packIndex(pkgName) {
    packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
  }
  // Bundled (~40 requests):
  function packUmd(pkgName) {
    packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
  }
  // Most environments should use UMD; some (Karma) need the individual index files
  var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
  // Add package entries for angular packages
  ngPackageNames.forEach(setPackageConfig);
  var config = {
    map: map,
    packages: packages
  };
  System.config(config);
})(this);

当我运行我的应用程序时，我看到以下错误，

无法加载资源：服务器响应状态为404（未找到）http：// localhost：3000 / node_modules / @ angular2-material / sidenav /无法加载资源：服务器响应状态为404（不是找到了）http：// localhost：3000 / node_modules / @ angular2-material / toolbar /无法加载资源：服务器响应状态为404（未找到）localhost /：16错误：错误：XHR错误（找不到404））加载http：// localhost：3000 / node_modules / @ angular2-material / button（...）（匿名函数）@ localhost /：16 http：// localhost：3000 / node_modules / @ angular2-material / card /加载失败资源：服务器响应状态为404（未找到）http：// localhost：3000 / node_modules / @ angular2-material / input /无法加载资源：服务器响应状态为404（未找到）http： // localhost：3000 / node_modules / @ angular2-material / checkbox /无法加载资源：服务器响应状态为404（未找到）http：// localhost：3000 / node_modules / @ angular2-mate rial / radio /无法加载资源：服务器响应状态为404（未找到）http：// localhost：3000 / node_modules / @ angular2-material / icon /无法加载资源：服务器响应状态为404（未找到）http：// localhost：3000 / node_modules / @ angular2-material / list /无法加载资源：服务器响应状态为404（未找到）http：// localhost：3000 / favicon.ico无法加载资源：服务器响应状态为404（未找到）

3 回答

您应该在 system-config.ts 中根据需要单独添加材料组件：

1. angular-cli以dist /目录为目标

const map: any = {
  '@angular2-material/core': 'vendor/@angular2-material/core'
};

const packages: any = {
  '@angular2-material/core': {
    format: 'cjs',
    defaultExtension: 'js',
    main: 'core.js'
  }
};

并在 angular-cli-build.js ：

vendorNpmFiles: [
  'systemjs/dist/system-polyfills.js',
  'systemjs/dist/system.src.js',
  'zone.js/dist/*.js',
  'es6-shim/es6-shim.js',
  'reflect-metadata/*.js',
  'rxjs/**/*.js',
  '@angular/**/*.js',
  '@angular2-material/**/*.js'
]

2. lite-server或http-server目标应用程序根目录

const map: any = {
  '@angular2-material/core': 'node_modules/@angular2-material/core'
};

const packages: any = {
  '@angular2-material/core': {
    format: 'cjs',
    defaultExtension: 'js',
    main: 'core.js'
  }
};

回复于 2024-04-25T17:23:34+08:00

这是来自角度材料2的来源 system.config.ts ：

material2/GETTING_STARTED.md

npm

plunker

npm i @angular2-material/core --save

npm i @angular2-material/card --save

npm i @angular2-material/toolbar --save

npm i @angular2-material/button --save

npm i @angular2-material/slide-toggle --save

适用于：Angular 2 QuickStart Source

零件：

import { Component } from '@angular/core';
import { MD_SLIDE_TOGGLE_DIRECTIVES } from '@angular2-material/slide-toggle';
import { MD_TOOLBAR_DIRECTIVES } from '@angular2-material/toolbar';

import { MD_CARD_DIRECTIVES } from '@angular2-material/card';
import { MD_BUTTON_DIRECTIVES } from '@angular2-material/button';
@Component({
    selector: 'my-app',
    directives: [MD_TOOLBAR_DIRECTIVES,MD_CARD_DIRECTIVES,MD_SLIDE_TOGGLE_DIRECTIVES, MD_BUTTON_DIRECTIVES],

    template: `

            <h1>
        {{title}}
        </h1>
        <md-toolbar color="primary">
            Angular Material 2 App
        </md-toolbar>

        <div style="padding: 7px">
            <button md-button>Basic Button</button>
            <button md-raised-button>Raised Button</button>

            <md-slide-toggle>Slide Toggle</md-slide-toggle>
        </div>

            `
})
export class AppComponent { }

系统配置：

(function(global) {

        // map tells the System loader where to look for things
        var map = {
            'app': 'app', // 'dist',

            '@angular': 'node_modules/@angular',
            'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
            'rxjs': 'node_modules/rxjs',

            '@angular2-material/core': 'node_modules/@angular2-material/core',
            '@angular2-material/button': 'node_modules/@angular2-material/button',
            '@angular2-material/card': 'node_modules/@angular2-material/card',
            '@angular2-material/slide-toggle': 'node_modules/@angular2-material/slide-toggle',
            '@angular2-material/toolbar': 'node_modules/@angular2-material/toolbar'


        };

        // packages tells the System loader how to load when no filename and/or no extension
        var packages = {
            'app': {
                main: 'main.js',
                defaultExtension: 'js'
            },
            'rxjs': {
                defaultExtension: 'js'
            },

            'angular2-in-memory-web-api': {
                main: 'index.js',
                defaultExtension: 'js'
            },



            '@angular2-material/core': {
                main: 'core.js'
            },
            '@angular2-material/card': {
                main: 'card.js'
            },
            '@angular2-material/button': {
                main: 'button.js'
            },
            '@angular2-material/toolbar': {
                main: 'toolbar.js'
            },
            '@angular2-material/slide-toggle': {
                main: 'slide-toggle.js'
            }



        };

        var ngPackageNames = [
            'common',
            'compiler',
            'core',
            'forms',
            'http',
            'platform-browser',
            'platform-browser-dynamic',
            'router',
            'router-deprecated',
            'upgrade',
        ];

        // Individual files (~300 requests):
        function packIndex(pkgName) {
            packages['@angular/' + pkgName] = {
                main: 'index.js',
                defaultExtension: 'js'
            };
        }

        // Bundled (~40 requests):
        function packUmd(pkgName) {
            packages['@angular/' + pkgName] = {
                main: '/bundles/' + pkgName + '.umd.js',
                defaultExtension: 'js'
            };
        }

        // Most environments should use UMD; some (Karma) need the individual index files
        var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;

        // Add package entries for angular packages
        ngPackageNames.forEach(setPackageConfig);

        // No umd for router yet
        packages['@angular/router'] = {
            main: 'index.js',
            defaultExtension: 'js'
        };

        var config = {
            map: map,
            packages: packages
        };

        System.config(config);

    })(this);

回复于 2024-04-25T17:23:34+08:00

请将@ angular2 RC4更新为RC5并添加如下配置文件

/**
 * PLUNKER VERSION (based on systemjs.config.js in angular.io)
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function(global) {

  var ngVer = '@2.0.0-rc.5'; // lock in the angular package version; do not let it float to current!
  var routerVer = '@3.0.0-rc.1'; // lock router version
  var formsVer = '@0.3.0'; // lock forms version
  var routerDeprecatedVer = '@2.0.0-rc.2'; // temporarily until we update all the guides

  //map tells the System loader where to look for things
  var map = {
    'app':                        'app',

    '@angular':                   'https://npmcdn.com/@angular', // sufficient if we didn't pin the version
    '@angular/router':            'https://npmcdn.com/@angular/router' + routerVer,
    '@angular/forms':             'https://npmcdn.com/@angular/forms' + formsVer,
    '@angular/router-deprecated': 'https://npmcdn.com/@angular/router-deprecated' + routerDeprecatedVer,
    'angular2-in-memory-web-api': 'https://npmcdn.com/angular2-in-memory-web-api', // get latest
    'rxjs':                       'https://npmcdn.com/rxjs@5.0.0-beta.6',
    'ts':                         'https://npmcdn.com/plugin-typescript@4.0.10/lib/plugin.js',
    'typescript':                 'https://npmcdn.com/typescript@1.9.0-dev.20160409/lib/typescript.js',
    '@angular2-material':         'node_modules/@angular2-material',
 };

  //packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.ts',  defaultExtension: 'ts' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
    '@angular2-material/core': { 
        format: 'cjs',
        defaultExtension: 'js',
        main: 'core.js'
      },
      '@angular2-material/checkbox': { 
        main: 'checkbox.js', 
        defaultExtension: 'js', 
        format: 'cjs' 
      },
      '@angular2-material/button': { 
        main: 'button.js', 
        defaultExtension: 'js', 
        format: 'cjs' 
      },
      '@angular2-material/progress-circle': { 
        main: 'progress-circle.js', 
        defaultExtension: 'js', 
        format: 'cjs' 
      },
      '@angular2-material/card': { 
        main: 'card.js', 
        defaultExtension: 'js', 
        format: 'cjs' 
      },
      '@angular2-material/input': { 
        main: 'input.js', 
        defaultExtension: 'js', 
        format: 'cjs' 
      },
      '@angular2-material/toolbar': { 
        main: 'toolbar.js', 
        defaultExtension: 'js', 
        format: 'cjs' 
      },
      '@angular2-material/menu': { 
            main: 'menu.js', 
            defaultExtension: 'js', 
            format: 'cjs' 
      },
      '@angular2-material/icon': { 
            main: 'icon.js', 
            defaultExtension: 'js', 
            format: 'cjs' 
          }
  };

  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'upgrade',
  ];

  // Add map entries for each angular package
  // only because we're pinning the version with `ngVer`.
  ngPackageNames.forEach(function(pkgName) {
    map['@angular/'+pkgName] = 'https://npmcdn.com/@angular/' + pkgName + ngVer;
  });

  // Add package entries for angular packages
  ngPackageNames.concat(['forms', 'router', 'router-deprecated']).forEach(function(pkgName) {

    // Bundled (~40 requests):
    packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };

    // Individual files (~300 requests):
    //packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
  });
  var config = {
    // DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
    transpiler: 'ts',
    typescriptOptions: {
      tsconfig: true
    },
    meta: {
      'typescript': {
        "exports": "ts"
      }
    },
    map: map,
    packages: packages
  };

  System.config(config);

})(this);

回复于 2024-04-25T17:23:34+08:00

如何使用角度2的angular2材料

3 回答

1. angular-cli以dist /目录为目标

2. lite-server或http-server目标应用程序根目录

相关问题