search

valor-software / ngx-bootstrap

Fast and reliable Bootstrap widgets in Angular (supports Ivy engine)
https://valor-software.com/ngx-bootstrap
MIT License
5.53k stars 1.69k forks source link

feat(docs): add angular2-seed configuration to getting started #1343

Closed GuskiS closed 7 years ago

GuskiS commented 7 years ago

At the moment I'm trying to update my packages and I'm having issues with systemjs.

systemjs.config.js:

    map: {
      // ...
      'ng2-bootstrap': 'npm:ng2-bootstrap',
      // ...
    },
    packages: {
      // ...
      'ng2-bootstrap': { main: 'index.js', defaultExtension: 'js' },
      // ...
    }

app.module:

import { CollapseModule } from 'ng2-bootstrap';

shared.module:

import { ModalModule, DatepickerModule } from 'ng2-bootstrap';

It compiles fine but then in browser console I get:

Error: (SystemJS) Unexpected token <
    SyntaxError: Unexpected token <
        at eval (<anonymous>)
        at Object.eval (http://localhost/assets/ng2-bootstrap/positioning.js:2:24)
        at eval (http://localhost/assets/ng2-bootstrap/positioning.js:8:4)
        at eval (http://localhost/assets/ng2-bootstrap/positioning.js:9:3)
        at eval (<anonymous>)
          Evaluating http://localhost/assets/ng2-bootstrap/ng-positioning.js
          Evaluating http://localhost/assets/ng2-bootstrap/positioning.js
          Evaluating http://localhost/assets/ng2-bootstrap/component-loader/component-loader.factory.js
          Evaluating http://localhost/assets/ng2-bootstrap/modal/modal.component.js
          Evaluating http://localhost/assets/ng2-bootstrap/modal/modal.module.js
          Evaluating http://localhost/assets/ng2-bootstrap/index.js
          Evaluating http://localhost/app/app.module.js
          Evaluating http://localhost/app/main.js
          Error loading http://localhost/app/main.js
          at eval (<anonymous>)
            at Object.eval (http://localhost/assets/ng2-bootstrap/positioning.js:2:24)
            at eval (http://localhost/assets/ng2-bootstrap/positioning.js:8:4)
            at eval (http://localhost/assets/ng2-bootstrap/positioning.js:9:3)
            at eval (<anonymous>)
              Evaluating http://localhost/assets/ng2-bootstrap/ng-positioning.js
              Evaluating http://localhost/assets/ng2-bootstrap/positioning.js
              Evaluating http://localhost/assets/ng2-bootstrap/component-loader/component-loader.factory.js
              Evaluating http://localhost/assets/ng2-bootstrap/modal/modal.component.js
              Evaluating http://localhost/assets/ng2-bootstrap/modal/modal.module.js
              Evaluating http://localhost/assets/ng2-bootstrap/index.js
              Evaluating http://localhost/app/app.module.js
              Evaluating http://localhost/app/main.js
              Error loading http://localhost/app/main.js

Where ng2-bootstrap/positioning.js:2:24:

var ng_positioning_1 = require('./ng-positioning');

Any ideas?

valorkin commented 7 years ago

Main file for system.js is in bundles folder https://unpkg.com/ng2-bootstrap@1.1.16-6/bundles/

Imho: drop system.js, it is a crap, try angular-cli It has AoT and really easy to use

RomaDotDev commented 7 years ago

@valorkin this issue is still persists

I'm using ng2-bootstrap 1.1.16-9, Angular 2.4.1 and angular-seed which is using systemjs Builder.

My ng2-bootstrap config is 

{
            name:'ng2-bootstrap',
            path:'node_modules/ng2-bootstrap',
            packageMeta:{
                main: 'bundles/ng2-bootstrap.umd.min.js',
                defaultExtension: 'js'
            }
}

AoT works fine, however on bundling stage I got similar error as described above:

Message:
    Error on fetch for ng2-bootstrap/positioning.js at file:///xxxx/node_modules/ng2-bootstrap/positioning.js
    Loading ng2-bootstrap/modal/modal.module.js
    Loading dist/tmp/app/app.module.ngfactory.js
    Loading dist/tmp/app/main-prod.js
    ENOENT: no such file or directory, open 'xxxx/node_modules/ng2-bootstrap/positioning.js'
Details:
    originalErr: Error: ENOENT: no such file or directory, open 'xxxx/node_modules/ng2-bootstrap/positioning.js'
Stack:
Error on fetch for ng2-bootstrap/positioning.js at file:///xxxx/node_modules/ng2-bootstrap/positioning.js
    Loading ng2-bootstrap/modal/modal.module.js
    Loading dist/tmp/app/app.module.ngfactory.js
    Loading dist/tmp/app/main-prod.js
    Error: ENOENT: no such file or directory, open '/xxxx/node_modules/ng2-bootstrap/positioning.js'

The issue was introduced after 1.1.16

SoftwareAndOutsourcing commented 7 years ago

I'm having a similar issue with angular-seed. ng2-bootstrap works with 1.1.15, but if I upgrade to 1.1.16-9 I get an Error on fetch for ng2-bootstrap/accordion.js error when building the production version (the development one works fine). The relevant section of my project.config.ts is:

this.SYSTEM_CONFIG_DEV.paths['ng2-bootstrap/ng2-bootstrap'] =
  'node_modules/ng2-bootstrap/bundles/ng2-bootstrap.umd.js';

this.SYSTEM_BUILDER_CONFIG.packages['ng2-bootstrap/ng2-bootstrap'] = {
  main:  'bundles/ng2-bootstrap.umd.min.js',
  defaultExtension: 'js'
};

this.SYSTEM_CONFIG_DEV.paths['moment'] =
  'node_modules/moment/moment.js';

this.SYSTEM_BUILDER_CONFIG.packages['moment'] = {
  main:  'moment.js',
  defaultExtension: 'js'
};

This is a large project which would not be trivial to migrate to angular-cli, so a fix forSystemJS would be nice.

valorkin commented 7 years ago

I need a sample Repo to reproduce

valorkin commented 7 years ago

Can you please make a PR to https://github.com/valor-software/angular2-quickstart So I can reproduce When done please drop me a note here: https://ngx-slack.herokuapp.com So I can fix this asap

GopiAnnan commented 7 years ago

I do have the same issue with SystemJs. When I try to upgrade latest version. Tried with v1.1.16-9 . @valorkin

before upgrade it was 'ng2-bootstrap': { main: '/bundles/ng2-bootstrap.umd.js', defaultExtension: 'js' },

After upgrade I tried with both 'ng2-bootstrap': { main: '/bundles/ng2-bootstrap.umd.js', defaultExtension: 'js' }, or 'ng2-bootstrap': { main: 'main.js', defaultExtension: 'js' },

The error is , Modules are trying to findout accordion.js , modal.js, carousel.js in the root folder. which is not exists any more

valorkin commented 7 years ago

I still need a Repo to reproduce, I am not using system.js

RomaDotDev commented 7 years ago

This is a repo to reproduce the issue. https://github.com/irsick/ng2-bootstrap-issue-1343 Please see readme for details.

Angular-quickstart doesn't have production bundling routine so it's based on angular2-seed instead.

It seems the issue is somewhere between new ng2-bootstrap structure and systemjs buildStatic() function.

valorkin commented 7 years ago

@mgechev can you help me with this issue please?

valorkin commented 7 years ago

ok, seems I have found a solution build passed without errors

valorkin commented 7 years ago

in project.config.ts I did 2 changes:

valorkin commented 7 years ago

this issue with system.js was very helpful https://github.com/InfomediaLtd/angular2-materialize/issues/115#issuecomment-254809673

valorkin commented 7 years ago

@binarydigits please try this too, if it doesn't helping please provide Repo to reproduce

valorkin commented 7 years ago

@irsick if this will work, please give me a note So I will add note to documentation

RomaDotDev commented 7 years ago

@valorkin The solution partially works. It does do bundling for non-AoT build $ npm run build.prod

However it still fails to to find correct paths for AoT build $ npm run build.prod.exp

moment.js format change doesn't effect anything

mgechev commented 7 years ago

Here's working configuration:

  let additionalPackages: ExtendPackages[] = [
    {
      name:'ng2-bootstrap',
      path:'node_modules/ng2-bootstrap/bundles/ng2-bootstrap.umd.min.js'
    },
    {
      name:'ng2-bootstrap/*',
      path:'node_modules/ng2-bootstrap/bundles/ng2-bootstrap.umd.min.js'
    },
    {
      name:'moment',
      path:'node_modules/moment',
      packageMeta:{
        main: 'moment.js',
        defaultExtension: 'js'
      }
    }
  ];

Happy holidays 🎅 🎄 🎁

valorkin commented 7 years ago

@mgechev thanks a lot! :) Happy Holidays to you too :)

RomaDotDev commented 7 years ago

I confirm it's working. The asterisk did the trick. I'll add some comments, if you don't mind.

  let additionalPackages: ExtendPackages[] = [
   // required for dev build 
   {
      name:'ng2-bootstrap',
      path:'node_modules/ng2-bootstrap/bundles/ng2-bootstrap.umd.min.js'
    },    

    // required for prod build
    {
      name:'ng2-bootstrap/*',
      path:'node_modules/ng2-bootstrap/bundles/ng2-bootstrap.umd.min.js'
    },

    // mandatory dependency for ng2-bootstrap datepicker 
    {
      name:'moment',
      path:'node_modules/moment',
      packageMeta:{
        main: 'moment.js',
        defaultExtension: 'js'
      }
    }
  ];

Thank you both @valorkin and @mgechev. Happy Holidays!

Please update docs to safe time and nerves for a lot of folks.

valorkin commented 7 years ago

don't close this issue, so I can add this to docs

keslavi commented 7 years ago

documenting full steps to install and test after finding this thread.

npm install --save bootstrap moment ng2-bootstrap

project.config.ts

` //uncomment this import { ExtendPackages } from './seed.config.interfaces';

// Add `NPM` third-party libraries to be injected/bundled.
this.NPM_DEPENDENCIES = [
  ...this.NPM_DEPENDENCIES,
  // {src: 'jquery/dist/jquery.min.js', inject: 'libs'},
  // {src: 'lodash/lodash.min.js', inject: 'libs'},
  { src: 'bootstrap/dist/js/bootstrap.min.js', inject: 'libs' },
  { src: 'bootstrap/dist/css/bootstrap.min.css', inject: true }, // inject into css section
  { src: 'bootstrap/dist/css/bootstrap-theme.min.css', inject: true }, // inject into css section
  { src: 'bootstrap/dist/css/bootstrap-theme.min.css.map', inject: true }, // inject into css section
];

*towards the bottom, replace extended packages with this:

let additionalPackages: ExtendPackages[] = [ // required for dev build { name:'ng2-bootstrap', path:'node_modules/ng2-bootstrap/bundles/ng2-bootstrap.umd.min.js' }, 

// required for prod build
{
  name:'ng2-bootstrap/*',
  path:'node_modules/ng2-bootstrap/bundles/ng2-bootstrap.umd.min.js'
},

// mandatory dependency for ng2-bootstrap datepicker 
{
  name:'moment',
  path:'node_modules/moment',
  packageMeta:{
    main: 'moment.js',
    defaultExtension: 'js'
  }
}

];
this.addPackagesBundles(additionalPackages); `

verify by adding an alert to the home module and html:

home.module.ts:

`import { AlertModule } from 'ng2-bootstrap/alert';

@NgModule({ imports: [CommonModule, HomeRoutingModule, SharedModule, AlertModule.forRoot()], declarations: [HomeComponent], exports: [HomeComponent], providers: [NameListService] }) import { AlertModule } from 'ng2-bootstrap/alert';`

@NgModule({ imports: [CommonModule, HomeRoutingModule, SharedModule, AlertModule.forRoot()], declarations: [HomeComponent], exports: [HomeComponent], providers: [NameListService] })

home.component.html:

<alert type="success"> <strong>Well done!</strong> You successfully read this important alert message. </alert>

valorkin commented 7 years ago

Awesome! Thank you so much :)