Angular2: rắc rối trong việc tích hợp ng2 vật chất

Question

Tôi cố gắng để tích hợp ng2 vật chất trong Angular2

Uncaught SyntaxError: angular2-polyfills.js:138 Uncaught SyntaxError: Unexpected token < Evaluating 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

Nếu nó không thể tìm thấy thư viện cho bạn, cố gắng npm install nó một lần nữa.

Ngược lại, nếu bạn chắc chắn rằng bạn đã cài đặt thư viện sẽ được tải về, thêm video này vào index.html của bạn:

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

Answer 2

Tôi nghĩ rằng bạn có thể thử cấu hình này vào tập tin HTML của bạn:

<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> 

Hy vọng nó giúp bạn, Thierry

Answer 3

tôi đang sử dụng:

01.

<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> 

Như đã lưu ý trong nhận xét ở trên, bao gồm mục nhập gói cho ng2-material cung cấp lỗi không được xác định. Tôi không biết nếu các vị trí của các thiết lập của defaultJSExtensions là rất quan trọng, nhưng nó phải được thực hiện và làm những việc theo thứ tự này làm việc cho tôi.

Answer 4

Đây là cấu hình của tôi. Nó đã làm việc. Bạn có thể thử nó.

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 5

Sử dụng angular2-beta12 và ng2 vật chất 0.3.4

Tôi đã có vấn đề nhận được ng2 vật chất để làm việc là tốt.

Điều đầu tiên tôi bị thiếu trong tệp index.html đã khai báo css.

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

Sau đó, một trong những điều quan trọng tôi thấy là thiếu thông tin bản đồ được lồng trong khung gói. Khi tôi chuyển nó bên ngoài tuyên bố System.config của tôi trông như thế này:

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)); 

Sau đó, trong main.ts tôi nộp tôi nhập MATERIAL_PROVIDERS

Main.ts

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


bootstrap(AppComponent, [MATERIAL_PROVIDERS]); 

Cuối cùng trên thành phần muốn sử dụng vật liệu ng2 trên I impor ted MATERIAL_DIRECTIVES

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 6

Chỉ cần sử dụng nhập {} MATERIAL_PROVIDERS từ "ng2 vật chất";

xóa "/ all"