CODEWITHSUNDEEP
angular
Bouazza
Bouazza

Reputation: 139

integrate bootstrap module and ng2-select module to angular2 5min quickstart

How can I integrate bootstrap module and ng2-select module to angular2 5min quickstart because I always have this error:

Unexpected token <(…)

after adding moment :

Error: Unexpected token <(…)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(anonymous function) @ 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>

and this is what i found in console 

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)

Upvotes: 1

Views: 2688

Answers (1)

Thierry Templier
Thierry Templier

Reputation: 202196

To use ng2-boostrap, simply install the modules from NPM:

$ npm install ng2-bootstrap ng2-select

You can then configure them in your HTML entry file:

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

You have the problem since a module can't be imported. Around your error, you should see what SystemJS tries to load something...

Edit

Following your answer, it appears that you need to configure moment:

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

See this question for more details:

this what i found in console after i add moment

Error: Unexpected token <(…)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(anonymous function) @ angular2-polyfills.js:123Zone.run @ angular2-polyfills.js:1243zoneBoundFn @ angular2-polyfills.js:1220lib$es6$promise$asap$$flush @ angular2-polyfills.js:262

the first problem has been solved when i write systemjs config but i did copied some files from my app folder to node_modules\systemjs\dist it's all the files with extension "*.js.map" i don't understand why it doesnt load it by itself and in my command window it tells me that 404 GET *****.js.map ???? have you an idea?

Upvotes: 3

Related Questions