Yêu cầu Angular2 không được xác định cho các thư viện trong node_modules

Question

Tôi đang sử dụng angular2-seed làm hạt giống cho dự án của mình. require hoạt động hoàn hảo trong các tệp nguồn. Nhưng bất cứ khi nào tôi bao gồm một thư viện mới và tham chiếu nó trong index.html, sẽ xuất hiện lỗi trong bảng điều khiển mà require không được xác định.

Systemjs được bao gồm

Tôi đã ĐỌC câu trả lời trước về SO mà gợi ý để sử dụng system.js. Systemjs đã được bao gồm.

index.html

<!-- shims:js --> 
 
<script src="/node_modules/systemjs/dist/system.src.js?1458283463580"></script> 
 
<script src="/node_modules/systemjs/dist/system-polyfills.src.js?1458283463581"></script> 
 
<script src="/node_modules/reflect-metadata/Reflect.js?1458283463582"></script> 
 
<script src="/node_modules/es6-shim/es6-shim.js?1458283463582"></script> 
 
    <script src="/node_modules/angular2/bundles/angular2-polyfills.js?1458283463582"></script> 
 
<!-- endinject --> 
 

 
    
 
<script>System.config({"defaultJSExtensions":true,"paths":{"./admin/main":"/./admin/main","angular2/*":"/angular2/*","rxjs/*":"/rxjs/*","*":"/node_modules/*"},"packages":{"angular2":{"defaultExtension":false},"rxjs":{"defaultExtension":false}},"map":{"moment":"moment/moment.js"}})</script> 
 
    
 

 
<!-- libs:js --> 
 
<script src="/node_modules/rxjs/bundles/Rx.js?1458283463585"></script> 
 
<script src="/node_modules/angular2/bundles/angular2.js?1458283463585"></script> 
 
<script src="/node_modules/angular2/bundles/router.js?1458283463585"></script> 
 
<script src="/node_modules/angular2/bundles/http.js?1458283463586"></script> 
 
<script src="/node_modules/ng2-bootstrap/ng2-bootstrap.js?1458283463586"></script> 
 
<script src="/node_modules/ng2-select/ng2-select.js?1458283463586"></script> 
 
<script src="/node_modules/lodash/index.js?1458283463587"></script> 
 
<script src="/node_modules/ng2-pagination/index.js?1458283463587"></script> 
 
<!-- endinject --> 
 

 
<!-- inject:js --> 
 
<!-- endinject --> 
 

 
    
 
<script> 
 
System.import('./admin/main') 
 
    .catch(function (e) { 
 
    console.error(e, 
 
     'Report this error at https://github.com/punchagency/staffing-client/issues'); 
 
    }); 
 
</script>

Lỗi

Nguồn nơi yêu cầu được sử dụng

index.js của lodash

module.exports = require('./lodash'); 

thư viện Tương tự khác như ng2-select và ng2-bootstrap có lỗi tương tự

Answer 1

Bạn cần phải cấu hình phụ thuộc bổ sung của bạn trong SystemJS và không bao gồm chúng trực tiếp vào script thẻ.

Đây là một mẫu:

<script> 
    System.configure({ 
    map: { 
     'ng2-bootstrap': 'node_modules/ng2-bootstrap', 
     'ng2-select': 'node_modules/ng2-select', 
     lodash: 'node_modules/lodash/lodash.js' 
    }, 
    package: { 
     (...) 
    } 
    }); 
    System.import(...); 
</script> 

Xem những câu hỏi này để biết thêm chi tiết:

• integrate bootstrap module and ng2-select module to angular2 5min quickstart
• angular2 failing lodash import