What is the proper way to integrate with angular2-seed?

Toktik commented 8 years ago

I'm not sure what I'm doing wrong, but after upgrading angular2-modal to latest version, I get various problems depending on how I configure SystemJS for the dependency.

It looks like the way angular2-modal was namespaced was changed. Here is how SystemJS configured, right now.

this.SYSTEM_CONFIG_DEV.map['angular2-modal/angular2-modal'] =angular2-modal; this.SYSTEM_CONFIG_DEV.paths['angular2-modal/*'] =${this.APP_BASE}node_modules/angular2-modal/dist/systemjs/angular2-modal-0.1.1;

I need the map because my IDE (Webstorm) fails to recognize if I import from 'angular2-modal'. It only recognizes angular2-modal/angular2-modal

But with this configuration, my prod build fails with this error. Unhandled rejection Error on fetch for angular2-modal/angular2-modal.js at file:///Users/toktik/Projects/kaizana/client/node_modules/angular2-modal/angular2-modal.js Loading dist/tmp/main.js Error: ENOENT: no such file or directory, open '/Users/toktik/Projects/kaizana/client/node_modules/angular2-modal/angular2-modal.js' at Error (native)

As I understand for prod, angular2-seed uses browserify, which is looking in node_modules/angular2-modal/angular2-modal.js, which I believe is correct file.

Why the angular2-modal build changed and why version number is included in filename? If I'm wrong and it should not be the case. What is the best way to handle this?

raupach commented 8 years ago

Same for me. I'm not able to integrate angular2-modal to angular2-seed.

sunnyque commented 8 years ago

same with me using angular2-seed, things go bad with updates.

i'm find out that variant with

import {ICustomModalComponent, ModalDialogInstance, ICustomModal} from 'angular2-modal';

and { src: 'angular2-modal/dist/systemjs/angular2-modal-0.0.5.js', inject: 'libs', dest: LIB_DEST }, in tools/config.ts

is working, but webstorm and tslint goes mad

lanocturne commented 8 years ago

+1 for webpack IDE and awesome ts lodaer both complains about import {...} from 'angular2-modal'

Toktik commented 8 years ago

Did anyone find solution to this?

navcoder commented 8 years ago

For prod build have you added angular2-modal entry in "SYSTEM_BUILDER_CONFIG" like you did for "SYSTEM_CONFIG_DEV"?

shlomiassaf commented 8 years ago

angular2-seed uses systemjs.

The demo application uses both webpack and systemjs. In dev mode it's webpack but build creates a systemjs version.

index.SystemJS.html implements the systemjs configuration.

The current working demo site is running with systemjs (which is why initial load is slow) Anyway, systemjs is the biggest time waster ever. It's nice for short demo's and stuff but it's a lot of hassle when you have issuses.

KyleCrowley commented 8 years ago

If you are talking about the 'official' angular2-seed from the Angular GitHub org, it uses Webpack.

Copied verbatim from the above repo's README.md:

"This branch uses Webpack for Development. There is also a SystemJS branch available."

Regardless, I'm a bit confused on how to integrate this in just like the others.

jingglang commented 8 years ago

In project.config.ts add the followings:

        (this.SYSTEM_CONFIG_DEV.paths)['angular2-modal'] = `node_modules/angular2-modal`;
        (this.SYSTEM_CONFIG_DEV.paths)['angular2-modal/framework'] = `node_modules/angular2-modal/framework`;
        (this.SYSTEM_CONFIG_DEV.paths)['angular2-modal/models'] = `node_modules/angular2-modal/models`;
        (this.SYSTEM_CONFIG_DEV.paths)['angular2-modal/platform-browser'] = `node_modules/angular2-modal/platform-browser/index.js`;
        (this.SYSTEM_CONFIG_DEV.paths)['angular2-modal/plugins/bootstrap'] = `node_modules/angular2-modal/plugins/bootstrap/index.js`;
        (this.SYSTEM_CONFIG_DEV.paths)['angular2-modal/providers'] = `node_modules/angular2-modal/providers`;

karser commented 8 years ago

This worked for me:

'angular2-modal': `${this.APP_BASE}node_modules/angular2-modal`,

and import section:

import { ModalModule } from 'angular2-modal';
import { Modal } from 'angular2-modal/plugins/bootstrap/index';

piyukore06 commented 8 years ago

I was trying to implement angular2-modal with this angular2-seed https://github.com/mgechev/angular-seed

After a lot googling and iterations, this is what worked for me, maybe somebody else can use this

   // for dev build and tests
    this.SYSTEM_CONFIG_DEV.paths['angular2-modal'] = `node_modules/angular2-modal/bundles/angular2-modal.umd.js`;
    this.SYSTEM_CONFIG_DEV.paths['angular2-modal/plugins/bootstrap'] = 
     `node_modules/angular2-modal/bundles/angular2-modal.bootstrap.umd.js`;

// for PROD build
this.SYSTEM_BUILDER_CONFIG.packages['angular2-modal'] = {
  main: `esm/index.js`,
  defaultExtension : 'js'
};
this.SYSTEM_BUILDER_CONFIG.map['angular2-modal/plugins/bootstrap'] = 'angular2-modal/plugins/bootstrap/index.js';

ashwinirajput commented 7 years ago

issue solved update your system.config.js define plugin outside /**

System configuration for Angular samples
Adjust as necessary for your application needs. */ (function (global) { var plugin = 'bootstrap'; // js-native / vex var map = { // our app is within the app folder app: 'app', // angular bundles '@angular/core': 'npm:@angular/core/bundles/core.umd.js', '@angular/common': 'npm:@angular/common/bundles/common.umd.js', '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', '@angular/http': 'npm:@angular/http/bundles/http.umd.js', '@angular/router': 'npm:@angular/router/bundles/router.umd.js', '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', // other libraries 'angular2-modal':'npm:angular2-modal',
'rxjs': 'npm:rxjs', 'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
```
};
// packages tells the System loader how to load when no filename and/or no extension
var packages= {
  app: {
    main: './main.js',
    defaultExtension: 'js'
  },
  rxjs: {
    defaultExtension: 'js'
  },
  'angular-in-memory-web-api': {
    main: './index.js',
    defaultExtension: 'js'
  },
  'angular2-modal': {
    main: 'bundles/angular2-modal.umd',
    defaultExtension: 'js'
  }
  };
  // UMD bundles
  map[`angular2-modal/plugins/${plugin}`] = map['angular2-modal'] + '/bundles';
  packages[`angular2-modal/plugins/${plugin}`] =  { defaultExtension: 'js', main: `angular2-          modal.${plugin}.umd` };
```
var config = { // DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER paths: { // paths serve as alias 'npm:': 'node_modules/' },

map: map, packages: packages };

System.config(config);

})(this);

aellwein commented 7 years ago

@piyukore06 i am also using https://github.com/mgechev/angular-seed and found this solution: in project.config.ts (see commented block):

    // Add packages (e.g. ng2-translate)
    let additionalPackages: ExtendPackages[] = [
      {
        name: 'angular2-modal',
        path: 'node_modules/angular2-modal/bundles/angular2-modal.umd.js'
      },
      {
        name: 'angular2-modal/plugins/bootstrap',
        path: 'node_modules/angular2-modal/bundles/angular2-modal.bootstrap.umd.js'
      }
    ];
    this.addPackagesBundles(additionalPackages);

You will also need to uncomment the import for ExtendPackages. Hope this helps.

oehm-smith commented 7 years ago

We use https://github.com/mgechev/angular-seed also and none of the solutions suggested here works (angular modal 2.0.3).

We are not on the latest angular2-seed and I will try that upgrade sometime. The error at the moment is:

Unhandled Promise rejection: "Error: @http://localhost:5555/node_modules/traceur/src/node/api.js:22:5
    ZoneDelegate.prototype.invoke@http://localhost:5555/node_modules/zone.js/dist/zone.js?1485730724805:192:19
    Zone.prototype.run@http://localhost:5555/node_modules/zone.js/dist/zone.js?1485730724805:85:24
    scheduleResolveOrReject/<@http://localhost:5555/node_modules/zone.js/dist/zone.js?1485730724805:451:52
    ZoneDelegate.prototype.invokeTask@http://localhost:5555/node_modules/zone.js/dist/zone.js?1485730724805:225:23
    Zone.prototype.runTask@http://localhost:5555/node_modules/zone.js/dist/zone.js?1485730724805:125:28
    drainMicroTaskQueue@http://localhost:5555/node_modules/zone.js/dist/zone.js?1485730724805:357:25
    ZoneTask/this.invoke@http://localhost:5555/node_modules/zone.js/dist/zone.js?1485730724805:297:25

    Evaluating http://localhost:5555/node_modules/traceur/src/node/api.js
    Error loading http://localhost:5555/node_modules/traceur/src/node/api.js
    Error loading http://localhost:5555/node_modules/angular2-modal/plugins/bootstrap/index.js as "angular2-modal/plugins/bootstrap/index" from http://localhost:5555/app/shared/shared.module.js" ; Zone: <root> ; Task: Promise.then ; Value: Error: Error: @http://localhost:5555/node_modules/traceur/src/node/api.js:22:5
    ZoneDelegate.prototype.invoke@http://localhost:5555/node_modules/zone.js/dist/zone.js?1485730724805:192:19
    Zone.prototype.run@http://localhost:5555/node_modules/zone.js/dist/zone.js?1485730724805:85:24
    scheduleResolveOrReject/<@http://localhost:5555/node_modules/zone.js/dist/zone.js?1485730724805:451:52
    ZoneDelegate.prototype.invokeTask@http://localhost:5555/node_modules/zone.js/dist/zone.js?1485730724805:225:23
    Zone.prototype.runTask@http://localhost:5555/node_modules/zone.js/dist/zone.js?1485730724805:125:28
    drainMicroTaskQueue@http://localhost:5555/node_modules/zone.js/dist/zone.js?1485730724805:357:25
    ZoneTask/this.invoke@http://localhost:5555/node_modules/zone.js/dist/zone.js?1485730724805:297:25

    Evaluating http://localhost:5555/node_modules/traceur/src/node/api.js
    Error loading http://localhost:5555/node_modules/traceur/src/node/api.js
    Error loading http://localhost:5555/node_modules/angular2-modal/plugins/bootstrap/index.js as "angular2-modal/plugins/bootstrap/index" from http://localhost:5555/app/shared/shared.module.js
Stack trace:
@http://localhost:5555/:69:13
ZoneDelegate.prototype.invoke@http://localhost:5555/node_modules/zone.js/dist/zone.js?1485730724805:192:19
Zone.prototype.run@http://localhost:5555/node_modules/zone.js/dist/zone.js?1485730724805:85:24
scheduleResolveOrReject/<@http://localhost:5555/node_modules/zone.js/dist/zone.js?1485730724805:451:52
ZoneDelegate.prototype.invokeTask@http://localhost:5555/node_modules/zone.js/dist/zone.js?1485730724805:225:23
Zone.prototype.runTask@http://localhost:5555/node_modules/zone.js/dist/zone.js?1485730724805:125:28
drainMicroTaskQueue@http://localhost:5555/node_modules/zone.js/dist/zone.js?1485730724805:357:25
ZoneTask/this.invoke@http://localhost:5555/node_modules/zone.js/dist/zone.js?1485730724805:297:25
 @http://localhost:5555/:69:13

shlomiassaf / ngx-modialog

What is the proper way to integrate with angular2-seed? #42