12

当我尝试在代码中使用 Angular Material 时出现以下错误。

    zone.js:101 GET http://localhost:3000/traceur 404（未找到）scheduleTask@zone.js:101ZoneDelegate.scheduleTask@zone.js:345Zone.scheduleMacroTask@zone.js:282（匿名函数）@zone。 js:122send@VM437:3fetchTextFromURL@system.src.js:1156(匿名函数)@system.src.js:1739ZoneAwarePromise@zone.js:607(匿名函数)@system.src.js:1738(匿名函数)@ system.src.js:2764(匿名函数)@system.src.js:3338(匿名函数)@system.src.js:3605(匿名函数)@system.src.js:3990(匿名函数)@system.src.js:3990(匿名函数) src.js:4453(匿名函数)@system.src.js:4705(匿名函数)@system.src.js:408ZoneDelegate.invoke@zone.js:332Zone.run@zone.js:225(匿名函数)@ zone.js:591ZoneDelegate.invokeTask@zone.js:365Zone.runTask@zone.js:265drainMicroTaskQueue@zone.js:497ZoneTask.invoke@zone。js:437
    登录：15 错误：错误：XHR 错误（404 未找到）正在加载 http://localhost:3000/traceur
    在 XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:3000/node_modules/zone.js/dist/zone.js:794:30)
    在 ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:365:38)
    在 Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:265:48)
    在 XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:433:34)
    加载 http://localhost:3000/traceur 时出错
    从 http://localhost:3000/app/assets/js/app.module 将 http://localhost:3000/node_modules/@angular2-material/button/button.js 加载为“@angular2-material/button”时出错。 js(匿名函数)@login:15ZoneDelegate.invoke@zone.js:332Zone.run@zone.js:225(匿名函数)@zone.js:591ZoneDelegate.invokeTask@zone.js:365Zone.runTask@zone.js: 265drainMicroTaskQueue@zone.js:497ZoneTask.invoke@zone.js:437

下面是代码：
app.component.ts：

    从'@angular/core'导入{组件，ViewEncapsulation}；
    从'@angular2-material/button'导入{ MdButton }；
    @零件（{
    选择器：'myApp',
    templateUrl: './app/app.html',
    styleUrls: ['./app/app.css'],
    封装：ViewEncapsulation.None
    })
    导出类 AppComponent {
    }

app.module.ts：

    从'@angular/core'导入{ NgModule }；
    从“@angular/platform-b​​rowser”导入 { BrowserModule }；
    从“@angular/forms”导入 { FormsModule }；
    从“@angular/http”导入 { HttpModule }；
    从'@angular2-material/button'导入{ MdButtonModule }；
    从'./app.routing'导入{路由，appRoutingProviders}；
    从'./app.component'导入{AppComponent}；
    从'./login/login.module'导入{LoginModule}；
    从'./home/home.module'导入{ HomeModule }；
    从'./items/items.module'导入{ItemsModule}；
    从'./movies/movies.module'导入{MoviesModule}；
    @NgModule({
    导入：[ BrowserModule，FormsModule，HttpModule，MdButtonModule，路由，LoginModule，HomeModule，ItemsModule，MoviesModule ]，
    声明：[ AppComponent ]，
    提供者：[appRoutingProviders]，
    引导程序：[ AppComponent ]，
    })
    导出类 AppModule {}

app.routing.ts：

    从'@angular/core'导入{ ModuleWithProviders }；
    从'@angular/router'导入{路由，RouterModule}；
    常量 appRoutes: 路由 = [];
    导出 const appRoutingProviders: any[] = [];
    导出常量路由：ModuleWithProviders = RouterModule.forRoot(appRoutes);

main.ts：

    从'@angular/platform-b​​rowser-dynamic'导入{platformBrowserDynamic}；
    从'./app.module'导入{AppModule}；
    常量平台 = 平台浏览器动态（）；
    platform.bootstrapModule(AppModule);

system.config.js：

    /**
    * Angular 2 示例的系统配置
    * 根据您的应用需求进行调整。
    */
    （函数（全局）{
    系统配置（{
    路径：{
    // 路径作为别名
    'npm:': 'node_modules/'
    },
    // map 告诉系统加载器在哪里寻找东西
    地图： {
    // 我们的应用在 app 文件夹中
    应用程序：'应用程序'，
    // 角度束
    '@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-b​​rowser': 'npm:@angular/platform-b​​rowser/bundles/platform-b​​rowser.umd.js',
    '@angular/platform-b​​rowser-dynamic': 'npm:@angular/platform-b​​rowser-dynamic/bundles/platform-b​​rowser-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',
    '@angular2-material': 'npm:@angular2-material',
    // 其他库
    'rxjs': 'npm:rxjs',
    'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
    },
    // packages 告诉系统加载器在没有文件名和/或扩展名时如何加载
    包：{
    应用程序： {
    主要：'./main.js',
    默认扩展：'js'
    },
    rxjs：{
    主要：'main.js'，
    默认扩展：'js'
    },
    'angular2-in-memory-web-api': {
    主要：'./index.js',
    默认扩展：'js'
    },
    '@angular2-material/core': {
    主要：'core.js'，
    默认扩展：'js'
    },     
    '@angular2-材料/按钮'：{
    主要：'button.js'，
    默认扩展：'js'
    },      
    '@angular2-material/card': {
    主要：'card.js'，
    默认扩展：'js'
    }
    }
    });
    }）（这个）;

一旦我添加MdButtonModule“app.module.ts”的导入列表，我就开始收到错误。

4

1 回答 1

15

更新 2.0.0-alpha.9 钴海妖 (2016-09-26)

Angular Material 已从 @angular2-material/... 包更改为 @angular/material 下的单个包

所以你的配置可能看起来像：

(function (global) {
  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',

      '@angular/material': 'npm:@angular/material/bundles/material.umd.js', <== this line

       ...
    },
    ...
  });
})(this);

并像使用它一样

import { MaterialModule } from '@angular/material';
@NgModule({
  imports:      [ BrowserModule, MaterialModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

旧版

从angular2-material alpha 8开始，您需要使用以下配置：

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

另请参阅更改日志

全部：我们更新了包装以匹配 angular/angular 的包装。如果您在项目中使用 SystemJS，您可能希望切换到使用我们的 UMD 包

所以你必须改变你的

system.config.js

packages: {
  ...
  '@angular2-material/core': {
    format: 'cjs',
    main: 'core.umd.js'
  },     
  '@angular2-material/button': {
    format: 'cjs',
    main: 'button.umd.js'
  },      
  '@angular2-material/card': {
    format: 'cjs',
    main: 'card.umd.js'
  },
  ...
于 2016-09-13T05:01:14.657 回答