将bootstrap模块和ng2-select模块集成到angular2 5min quickstart

时间:2016-03-08 11:04:18

标签: angular

如何将bootstrap模块和ng2-select模块集成到angular2 5min快速入门,因为我总是有这个错误:

  

意外的令牌<(...)

添加片刻后:

  

错误:意外的令牌<(...)Zone.run @ angular2-polyfills.js:1243zoneBoundFn @ angular2-polyfills.js:1220lib $ es6 $ promise $$ internal $$ tryCatch @ angular2-polyfills.js:468lib $ es6 $ promise $$ internal $$ invokeCallback @ angular2-polyfills.js:480lib $ es6 $ promise $$ internal $$ publish @ angular2-polyfills.js:451lib $ es6 $ promise $$ internal $$ publishRejection @ angular2-polyfills。 js:401(匿名函数)@ angular2-polyfills.js:123Zone.run @ angular2-polyfills.js:1243zoneBoundFn @ angular2-polyfills.js:1220lib $ es6 $ promise $ asap $$ flush @ angular2-polyfills.js:262

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

1 个答案:

答案 0 :(得分:3)

要使用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>

有关详细信息,请参阅此问题:

这是我在添加片刻后在控制台中找到的

  

错误:意外的令牌&lt;(...)Zone.run @ angular2-polyfills.js:1243zoneBoundFn @ angular2-polyfills.js:1220lib $ es6 $ promise $$ internal $$ tryCatch @ angular2-polyfills.js:468lib $ es6 $ promise $$ internal $$ invokeCallback @ angular2-polyfills.js:480lib $ es6 $ promise $$ internal $$ publish @ angular2-polyfills.js:451lib $ es6 $ promise $$ internal $$ publishRejection @ angular2-polyfills。 js:401(匿名函数)@ angular2-polyfills.js:123Zone.run @ angular2-polyfills.js:1243zoneBoundFn @ angular2-polyfills.js:1220lib $ es6 $ promise $ asap $$ flush @ angular2-polyfills.js:262

第一个问题已经解决了,当我编写systemjs配置但我确实从我的app文件夹复制了一些文件到node_modules \ systemjs \ dist它的所有扩展名为“* .js.map”的文件我不明白为什么它不会自己加载它并在我的命令窗口它告诉我404 GET *****。js.map ????你知道吗?