Question

我正在尝试在Angular2中集成ng2-material

Uncaught SyntaxError：angular2-polyfills.js：138 Uncaught SyntaxError：意外的令牌＆lt;评估 http://localhost:3000/ng2-material/all

import {MATERIAL_PROVIDERS, MATERIAL_DIRECTIVES} from 'ng2-material/all';

   @Component({

       template: `<md-content>
                 <button md-raised-button class="md-raised md-primary">Primary</button>
                 </md-content>`,
       styles: [style],
       providers:[ContactService, MATERIAL_PROVIDERS]
       directives:[MATERIAL_DIRECTIVES]
    })

 export class contact {
    constructor(){}
}

Answer 1

这是我的配置。有效。你可以尝试一下。

System.config({
    packages: {        
      app: {
        format: 'register',
        defaultExtension: 'js'
      },
      'ng2-material': {
          defaultExtension: 'js'
       }
    },
    map: {
        'ng2-material': 'node_modules/ng2-material'
  },
});
System.import('app/main')
    .then(null, console.error.bind(console));

Answer 2

使用 angular2-beta12 和 ng2-material 0.3.4

我在使用ng2-material工作时遇到了问题。

我在index.html文件中遗漏的第一件事就是声明了css。

<link rel="stylesheet" href="node_modules/ng2-material/dist/ng2-material.css">
<link rel="stylesheet" href="node_modules/ng2-material/dist/font.css">

在那之后，我发现我失踪的一件重要事情是地图信息嵌套在包括号内。一旦我把它移到我的System.config语句之外就像这样：

<强>的index.html

System.config({
        packages: {
            app: {
                format: 'register',
                defaultExtension: 'js'
            },
            'ng2-material': {//this needs to be nested in packages
                defaultExtension: 'js'
            }
        },
        map: {//The map location needs to be located outside of the package bracket
            'ng2-material': 'node_modules/ng2-material'
        }


    });

    System.import('app/main')
            .then(null, console.error.bind(console));

然后在我的main.ts文件中导入MATERIAL_PROVIDERS

<强> Main.ts

import {MATERIAL_PROVIDERS} from "ng2-material/all";
import {AppComponent} from './app.component'


bootstrap(AppComponent, [MATERIAL_PROVIDERS]);

最后在我导入的材料上使用ng2-material的组件上材料_DYECTIVES

<强> create.component.ts

import {Component} from 'angular2/core';
import {RouterOutlet} from 'angular2/router';
import {MATERIAL_DIRECTIVES} from "ng2-material/all";



@Component({
   templateUrl: 'app/templates/create.html',
   directives: [RouterOutlet, MATERIAL_DIRECTIVES]

})
export class CreateComponent {...component code}

Answer 3

如果找不到您的资料库，请再次尝试npm install。

否则，如果您确定已下载已安装的库，请将其添加到index.html：

<script>
    System.config({
        defaultJSExtensions: true,
        packages: {
            "/angular2": {"defaultExtension": false}
        },
        map: {
            'ng2material': 'node_modules/ng2material'
        }
    });
</script>

Answer 4

我认为您可以在HTML文件中尝试此配置：

<script>
  System.config({
    packages: {        
      app: {
        format: 'register',
        defaultExtension: 'js'
      },
      'ng2-material': {
        format: 'register',
        defaultExtension: 'js'
      }
    },
    map: {
      'ng2-material': 'node_modules/ng2-material/source'
    }
  });
  System.import('app/boot')
        .then(null, console.error.bind(console));
</script>

希望它可以帮到你，亨利

Answer 5

我正在使用：

<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>

<script>
  System.defaultJSExtensions = true;
</script>

<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/router.dev.js"></script>

<link rel="stylesheet" href="node_modules/ng2-material/dist/ng2-material.css">
<link rel="stylesheet" href="node_modules/ng2-material/dist/font.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<script>
  System.config({
    packages: {        
      app: {
        format: 'register',
        defaultExtension: 'js'
      }
    },
    map: {
      'ng2-material': 'node_modules/ng2-material/source'
    }
  });
  System.import('app/boot')
        .then(null, console.error.bind(console));
</script>

如上面的评论所述，包括ng2-material的包条目给出了一个require not defined error。我不知道defaultJSExtensions设置的位置是否至关重要，但必须完成并按此顺序执行操作对我有用。

Answer 6

只需使用从“ng2-material”导入{MATERIAL_PROVIDERS};

删除“/ all”

Angular2：整合ng2-material的麻烦

6 个答案: