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

Question

我如何将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)

Answer 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 ????你有什么想法吗？