将 bootstrap 模块和 ng2-select 模块集成到 angular2 5 分钟快速入门

Posted 2023-02-22

【中文标题】将 bootstrap 模块和 ng2-select 模块集成到 angular2 5 分钟快速入门

【英文标题】：integrate bootstrap module and ng2-select module to angular2 5min quickstart

【发布时间】：2016-06-22 07:06:32

【问题描述】：

我如何将bootstrap模块和ng2-select模块集成到angular2 5min quickstart，因为我总是有这个错误：

意外的令牌

---

添加时刻后：

错误：意外令牌

---

<script>
  System.config(
    transpiler: 'typescript', 
    typescriptOptions:  emitDecoratorMetadata: true , 

    packages:    
      "/angular2": "defaultExtension": false,

      './app': 
        format: 'register',
        defaultExtension: 'js'
      ,
      'node_modules/ag-grid-ng2': ,
      'node_modules/ag-grid': ,
      'node_modules/ng2-select': ,
      'ng2-bootstrap': "defaultExtension": "ts"
    ,
    map: 
            'ag-grid-ng2': 'node_modules/ag-grid-ng2',
            'ag-grid': 'node_modules/ag-grid',
            'ng2-select': 'node_modules/ng2-select',
            'ng2-bootstrap': 'node_modules/ng2-bootstrap',
    
  );
  System.import('app/main')
        .then(null, console.error.bind(console));
</script>

这是我在控制台中找到的

Error: Unexpected token <
Evaluating http://localhost:3000/moment
Error loading http://localhost:3000/app/main.js
at addToError (http://localhost:3000/node_modules/systemjs/dist/system.src.js:41:18)
at linkSetFailed (http://localhost:3000/node_modules/systemjs/dist/system.src.js:628:15)
at http://localhost:3000/node_modules/systemjs/dist/system.src.js:563:9
at doDynamicExecute (http://localhost:3000/node_modules/systemjs/dist/system.src.js:711:7)
at link (http://localhost:3000/node_modules/systemjs/dist/system.src.js:910:20)
at doLink (http://localhost:3000/node_modules/systemjs/dist/system.src.js:562:7)
at updateLinkSetOnLoad (http://localhost:3000/node_modules/systemjs/dist/system.src.js:610:18)
at http://localhost:3000/node_modules/systemjs/dist/system.src.js:422:11
at Zone.run (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:1243:24)
at zoneBoundFn (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:1220:26)

【问题讨论】：

重复***.com/questions/35861237/… 和其他几十个。提问前请先搜索。

【参考方案1】：

要使用 ng2-boostrap，只需从 NPM 安装模块：

$ npm install ng2-bootstrap ng2-select

然后您可以在 html 条目文件中配置它们：

<script>
  System.configure(
    map: 
      'ng2-bootstrap': 'node_modules/ng2-bootstrap',
      'ng2-select': 'node_modules/ng2-select'
    ,
    packages: 
      (...)
    
  );
  System.import(...);
</script>

您遇到了问题，因为无法导入模块。围绕您的错误，您应该看到 SystemJS 尝试加载的内容...

编辑

根据您的回答，您似乎需要配置时刻：

<script>
  System.configure(
    map: 
      (...)
      'moment': 'node_modules/moment/moment'
    ,
    (...)
  );
</script>

查看这个问题了解更多详情：

Using moment.js in Angular 2 typescript application

这是我添加时刻后在控制台中找到的内容

错误：意外令牌

当我编写 systemjs 配置时，第一个问题已经解决，但我确实将一些文件从我的应用程序文件夹复制到 node_modules\systemjs\dist 它是所有扩展名为“*.js.map”的文件我不明白为什么不会自己加载它，在我的命令窗口中它告诉我 404 GET *****.js.map ????你有什么想法吗？

【讨论】：

能否提供完整的错误信息？我的意思是相应的请求。像angular2-polyfills.js:1243 Uncaught SyntaxError: Unexpected token < Evaluating http://localhost:3000/angular2/http Error loading http://localhost:3000/app/boot.js 这样的东西。谢谢！

您的 moment 库有问题。您没有正确配置它。我相应地更新了我的答案......

看，我会添加控制台告诉我的内容，在我按照您告诉我的操作后，我会将其作为应答器

谢谢，我已经添加了答案，对不起，我只是一个新的 angular 2 用户，这就是为什么我问这么多，它阻止了我，请看一下

是的，我认为您应该在 SystemJS 配置的 map 块中添加：'moment': 'node_modules/moment/moment'... 这应该可以解决您的问题