Does not seem to work with RC5

[ghost]

IMPORTANT: Please provide a sample using http://plnkr.co/edit/iiQett?p=preview

• I'm submitting a ... [ *] bug report [ ] feature request [ ] question about the decisions made in the repository
• Do you want to request a feature or report a bug? I've moved to RC5 and defined an ngModule. Now I get this error:

No provider for ModalRenderer!

[shlomiassaf]

Well of course it won't work :) So many changes.

Working on RC5 Support, big change.

[shlomiassaf]

The RC5 branch is a WIP for RC5.

Currently the core & bootstrap plugin were migrated. (plugin + demo app)

[cuiliang]

when importing BootstrapModalModule in root module, 'Invalid provider' error will be throwed.

code:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ItemzAppComponent } from './itemz.component';
import { SharedModule } from './shared/shared.module';
import { ModalModule } from 'angular2-modal/angular2-modal.module';
import { BootstrapModalModule } from 'angular2-modal/plugins/bootstrap';
import { routing } from './app.routing';

@NgModule({
    declarations: [ItemzAppComponent],
    imports: [
        BrowserModule,
        ModalModule.forRoot(),
        BootstrapModalModule,
        SharedModule.forRoot(),
        routing
    ],
    bootstrap: [ItemzAppComponent],
    providers: [ ]
})
export class AppModule { }

[shlomiassaf]

@cuiliang are you importing using lazy loading?

[cuiliang]

@shlomiassaf No, I am importing it in the root module. Should I import it in root module or in a feature module?

[shlomiassaf]

@cuiliang Strange, basically in the demo I load it in a feature module, but this is just to allow multiple plugins in the demo app.

It should load in the root module as well, I don't understand why it fails... I'll try to reproduce.

Meanwhile, try to use it in a feature module, let me know if it works or not.

Thanks!

[AbdulRahmanAlHamali]

Hello,

I am facing the same issue. I am trying to debug it but I can't seem to understand the reason.

The problem seems to do with SystemJS though, because there are several modules that we should be able to import from "angular2-modal" but that seem to be undefined when we import them from there. However, if we import them from their original directories, they work.

[cuiliang]

importing ModalModule also show this error, see (app/app.module.ts): http://plnkr.co/edit/lSghPcRhVFSy5N4e9GNQ?p=preview

[shlomiassaf]

@cuiliang this is clearly a system.js configuration issue. importing the module is done from the package, every import should be done from packages top-root and not internal paths.

This has one exception, plugins can be used deep path, but only to the plugin root path as if it was a package.

This is true for every package, its a bad practice using deep paths unless the author of the package designs it so... which is rare... (see rxjs).

so: import { ModalModule } from 'angular2-modal';

The reason it's not working is since you are using a wrong systemjs configuration. see the configuration in the demo app.

[cuiliang]

@shlomiassaf if import { ModalModule } from 'angular2-modal'; will get this error:

please help me check my system-config.ts (using angular-cli):

/** Map relative paths to URLs. */
const map: any = {
  '@angular2-material': 'vendor/@angular2-material',
  'ng2-toastr': 'vendor/ng2-toastr',
  'dragula': 'vendor/dragula/dist/dragula.js',
  'ng2-dragula': 'vendor/ng2-dragula',
  'angular2-modal': 'vendor/angular2-modal',
  'lodash': 'vendor/lodash/lodash.js'
};

/** User packages configuration. */
const packages: any = {
  'ng2-toastr':{
    'main' : 'bundles/ng2-toastr.js'
  },
  'dragula':{ format: 'global'},
  'ng2-dragula':{ format:'cjs', main: 'ng2-dragula', "defaultExtension":"js" },
  // 'symbol-observable':{
  //   main:'index.js'
  // }
  'angular2-modal': { defaultExtension: 'js', main: 'index.js' },
   'angular2-modal/platform-browser': { main: 'index.js', defaultExtension: 'js' },
   'angular2-modal/plugins/bootstrap': { main: 'index.js', defaultExtension: 'js' },
   'angular2-modal/plugins/vex': {main: 'index.js', defaultExtension: 'js'},
   'angular2-modal/plugins/js-native': {main: 'index.js', defaultExtension: 'js'},
    'lodash': {
     format: 'cjs'
   }
};

////////////////////////////////////////////////////////////////////////////////////////////////
/***********************************************************************************************
 * Everything underneath this line is managed by the CLI.
 **********************************************************************************************/
const barrels: string[] = [
  // Angular specific barrels.
  '@angular/core',
  '@angular/common',
  '@angular/compiler',
  '@angular/http',
  '@angular/router',
  '@angular/platform-browser',
  '@angular/platform-browser-dynamic',
  '@angular/forms',

  // Thirdparty barrels.
  'rxjs',

  // App specific barrels.
  'app',
  'app/shared',
  'app/shared/libs/meta-form',
  'app/shared/libs/item-editor',
  'app/shared/libs/simple-tree',
  'app/+workspaces',
  'app/+home',
  'app/+home/+index',
  'app/+workspaces/workspaces-list',
  'app/+workspaces/workspaces-add',
  'app/+workspace'
  /** @cli-barrel */
];

const cliSystemConfigPackages: any = {};
barrels.forEach((barrelName: string) => {
  cliSystemConfigPackages[barrelName] = { main: 'index' };
});

//
cliSystemConfigPackages['./libs'] =  {"defaultExtension ": 'js'};

/** Type declaration for ambient System. */
declare var System: any;

// Apply the CLI SystemJS configuration.
System.config({
  map: {
    '@angular': 'vendor/@angular',
    'rxjs': 'vendor/rxjs',
    'main': 'main.js',
    'angular2-jwt': 'vendor/angular2-jwt/angular2-jwt.js'
  },
  packages: cliSystemConfigPackages,

});

// Apply the user's configuration.
System.config({ map, packages });

I am lost:(

[cuiliang]

@shlomiassaf updated to 2.0.0.beta-0, but still can not make it working. Would you please to make a functional example by importing angular2-modal to angular's live example? https://angular.io/resources/live-examples/ngmodule/ts/plnkr.html thanks.

[AbdulRahmanAlHamali]

The solution to this bug, is to make "providers/modal.ts" import DialogRef from "../models/dialog-ref" not from "../angular2-modal". This is because we are having a circular case where Modal is importing from angular2-modal which is exporting Modal itself and so on.

[cuiliang]

@AbdulRahmanAlHamali I am using the npm package https://www.npmjs.com/package/angular2-modal, Can I use your solution?

[AbdulRahmanAlHamali]

Not really, the solution that I mentioned was for @shlomiassaf to fix in the coming version.

For now, you can go into angular2-modals/providers/modal.js, then replace this line: var angular2_modal_1 = require('../angular2-modal');

with this line:

var dialog_ref_1 = require('../models/dialog-ref');

and then replace every instance of angular2_modal_1 in this file with dialog_ref_1

Please let me know whether it works.

Regards,

[AbdulRahmanAlHamali]

To allow the ModalModule to be imported immediately from angular2-modal. "angular2-modal.module" should import DomModalRenderer from "providers/dom-modal-renderer" and ModalRenderer from "models/tokens"

[cuiliang]

I am now using the latest npm version 2.0.0.beta-0, now angular-cli can not build. (even follow your post to replace angular2_modal_1 to dialog_ref_1 )

Error: Typescript found the following errors:
  D:/Work/IssueCloud/src/webclient/tmp/broccoli_type_script_compiler-input_base_path-JXZmdWAa.tmp/0/src/app/itemz.component.ts (32, 11): Property 'defaultViewContainer' does not exist on type 'Modal'.
    at BroccoliTypeScriptCompiler._doIncrementalBuild (D:\Work\IssueCloud\src\webclient\node_modules\angular-cli\lib\broccoli\broccoli-typescript.js:120:19)
    at BroccoliTypeScriptCompiler.build (D:\Work\IssueCloud\src\webclient\node_modules\angular-cli\lib\broccoli\broccoli-typescript.js:43:10)
    at D:\Work\IssueCloud\src\webclient\node_modules\angular-cli\node_modules\broccoli-caching-writer\index.js:152:21
    at lib$rsvp$$internal$$tryCatch (D:\Work\IssueCloud\src\webclient\node_modules\angular-cli\node_modules\rsvp\dist\rsvp.js:1036:16)
    at lib$rsvp$$internal$$invokeCallback (D:\Work\IssueCloud\src\webclient\node_modules\angular-cli\node_modules\rsvp\dist\rsvp.js:1048:17)
.......

The code cause the error:

/** 这是程序的主component */
import { Component, OnInit, provide, ViewContainerRef } from '@angular/core';
import { Router, ROUTER_DIRECTIVES } from '@angular/router';
import {Modal, BootstrapModalModule} from 'angular2-modal/plugins/bootstrap';

import { ApiService, WorkspacesService } from './shared';
import {  ToastsManager, ToastContainer } from 'ng2-toastr/ng2-toastr';

import { SecurityService } from './shared';
import { AppContextService } from './shared';
import { ItemEditorService } from './shared';
import { FieldControlService } from './shared';

@Component({
  moduleId: module.id,
  selector: 'itemz-app',
  template: `
    <router-outlet></router-outlet>
    <toast-container></toast-container>`,
  styleUrls: [],
  directives: [ROUTER_DIRECTIVES, ToastContainer],
  providers:  BootstrapModalModule.getProviders(),
})
export class ItemzAppComponent  implements OnInit {

  constructor(public securityService: SecurityService, private router: Router, public modal: Modal, viewContainer: ViewContainerRef) {
    // setup angular2-modal
    modal.defaultViewContainer  = viewContainer;
  }
......

[noorahmed94]

Same issue. Any solutions?

[shlomiassaf]

I'll do a re check to the system js setup later and fix the the issues as suggested by Abdul.

Sent from my iPhone

On Aug 12, 2016, at 12:48 PM, AbdulRahmanAlHamali notifications@github.com wrote:

To allow the ModalModule to be imported immediately from angular2-modal. "angular2-modal.module" should import DomModalRenderer from "providers/dom-modal-renderer" and ModalRenderer from "models/tokens"

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[shlomiassaf]

Ok, seems that problem is solved.

@AbdulRahmanAlHamali was correct.

I'm not a fan of SystemJS... It seems that SystemJS and relative paths are good as long as they are simple...

Aside from @AbdulRahmanAlHamali notes, all plugins had to change their reference to the angular2-modal package so it won't be a path rather then a module name...

Anyway, fixed with 2.0.0-beta.2

I will try to apply the fix on 1.1.0 later on.

See working plunker sample @cuiliang , @noorahmed94 please approve.

[shlomiassaf]

Version 1.1.1 also release with same fix. See this plunker sample

[cuiliang]

@shlomiassaf Still can not build 1.1.1 with angular-cli

Error: Typescript found the following errors:
  D:/Work/IssueCloud/src/webclient/tmp/broccoli_type_script_compiler-input_base_path-4ivuZNG7.tmp/0/src/app/app.module.ts (5, 10): Module '"D:/Work/IssueCloud/src/webclient/node_modules/angular2-modal/angular2-modal"' has no exported mng 'ModalModule'.
...

seems something wrong with the npm package. angular2-modal.d.ts export * from './angular2-modal'; angular2-modal.js has only one line: "use strict"; // WEBPACK development runtime helper. //# sourceMappingURL=angular2-modal.js.map

[noorahmed94]

Am facing this issue with new version 1.1.1

vendor.bundle.js:44947 EXCEPTION: No component factory found for CreateCourseComponentBrowserDomAdapter.logError @ vendor.bundle.js:44947BrowserDomAdapter.logGroup @ vendor.bundle.js:44957ExceptionHandler.call @ vendor.bundle.js:38587next @ vendor.bundle.js:25437schedulerFn @ vendor.bundle.js:27467SafeSubscriber.__tryOrUnsub @ vendor.bundle.js:884SafeSubscriber.next @ vendor.bundle.js:833Subscriber._next @ vendor.bundle.js:786Subscriber.next @ vendor.bundle.js:750Subject.next @ vendor.bundle.js:2485EventEmitter.emit @ vendor.bundle.js:27455onError @ vendor.bundle.js:28186onHandleError @ vendor.bundle.js:43296ZoneDelegate.handleError @ zone.js:327Zone.runTask @ zone.js:259ZoneTask.invoke @ zone.js:423
vendor.bundle.js:44947 STACKTRACE:BrowserDomAdapter.logError @ vendor.bundle.js:44947ExceptionHandler.call @ vendor.bundle.js:38589next @ vendor.bundle.js:25437schedulerFn @ vendor.bundle.js:27467SafeSubscriber.__tryOrUnsub @ vendor.bundle.js:884SafeSubscriber.next @ vendor.bundle.js:833Subscriber._next @ vendor.bundle.js:786Subscriber.next @ vendor.bundle.js:750Subject.next @ vendor.bundle.js:2485EventEmitter.emit @ vendor.bundle.js:27455onError @ vendor.bundle.js:28186onHandleError @ vendor.bundle.js:43296ZoneDelegate.handleError @ zone.js:327Zone.runTask @ zone.js:259ZoneTask.invoke @ zone.js:423
vendor.bundle.js:44947 Error: No component factory found for CreateCourseComponent
    at NoComponentFactoryError.BaseException [as constructor] (http://localhost:3000/vendor.bundle.js:2363:24)
    at new NoComponentFactoryError (http://localhost:3000/vendor.bundle.js:17340:17)
    at _NullComponentFactoryResolver.resolveComponentFactory (http://localhost:3000/vendor.bundle.js:17350:16)
    at NgModuleInjector.CodegenComponentFactoryResolver.resolveComponentFactory (http://localhost:3000/vendor.bundle.js:17376:36)
    at Object.createComponent (http://localhost:3000/main.bundle.js:19558:37)
    at http://localhost:3000/main.bundle.js:19859:57
    at ZoneDelegate.invokeTask (http://localhost:3000/polyfills.bundle.js:7205:39)
    at Object.onInvokeTask (http://localhost:3000/vendor.bundle.js:43266:42)
    at ZoneDelegate.invokeTask (http://localhost:3000/polyfills.bundle.js:7204:44)
    at Zone.runTask (http://localhost:3000/polyfills.bundle.js:7105:49)
    at ZoneTask.invoke (http://localhost:3000/polyfills.bundle.js:7272:35)

[shlomiassaf]

@noorahmed94 @cuiliang

Can you replace the 'angular2-modal.d.ts' in the package.json of the module with index.d.ts

I believe it will help... If this solves the issues i'll do a quick patch and update the package.

[noorahmed94]

@shlomiassaf I have changed the package.json as you said but didnt worked. Also i have copied the code in angular2-modal.d.ts in index.d.ts, still doesnt works

[shlomiassaf]

@noorahmed94 I think you have a different issue. In your project, I assume you have a custom modal component CreateCourseComponent which you use.

Since modals are not part of the template system you must tell angular about them (angular does not find them while parsing the template).

So, in you app module, or any feature module this component is used, set this component in the "enterComponents" array.

Here's a plunker sample

@cuiliang can you do a check at your end?

[noorahmed94]

You are right... i added the CreateCourseComponent in entryComponents of AppModule and it started working. Thanks for your help @shlomiassaf

[cuiliang]

@shlomiassaf yes, copy to angular2-modal.d.ts did solve the issue. thanks.

[jalchr]

Yes, I confirm too

@shlomiassaf yes, copy to angular2-modal.d.ts did solve the issue. thanks.

[shlomiassaf]

Version 1.1.2 and 2.0.0-beta.3 are out to NPM

These include major refactor to the build process so it now includes UMD bundles.

Please update me if it works or not.

You can find this plunker as a starting point including UMD bundle integration.

For 2.0.0-beta.3 use this plunker

[noorahmed94]

@shlomiassaf v 2.0.0-beta-3 gives me error on this.modal.open.

Property 'open' does not exist on type 'Modal'.. Any guidance? Also its a build error when webpack tries to build the application, though my modal window is working fine with this error, i need the error fixed to build production through webpack.

[shlomiassaf]

@noorahmed94, can you confirm the error is gone with 2.0.0-beta.7?

[noorahmed94]

@shlomiassaf Yes, i confirm its fixed in my application at 2.0.0-beta.9.

Also i want to tell you a issue in overlay on firefox. In chrome, the overlay fades in very smoothly but in firefox, it comes with a flickering effect. I don't know whats the reason behind it but as i am using your dialog package extensively and it sometimes behaves strangely in this regard.

You can reproduce the issue in your own sample plunkr in firefox. http://plnkr.co/edit/mbPzd8?p=preview

[shlomiassaf]

@noorahmed94 it's not a flicker, it's the background starting at opacity 1.

To fix I need to force a css reflow on the element before adding the in css class that does the transition but it's not enough... since it happens on the same turn the CSS won't bind unless I force a tick which is change detection scan.

This is too much for a plugin to handle.. I need to find a way in the core classes to handle that.

I have solved it in my local machine but within the plugin.. it's not good

[shlomiassaf]

please check 2.0.0-beta.10, should fix the issue.

[webartistkb]

Working for me! Using 2.0.0-beta.10, RC5 and "angular-cli": "1.0.0-beta.11-webpack.2"

[karser]

@shlomiassaf It works for me as well, I'm getting this warning though:

NgModule BootstrapModalModule uses BSModalContainer via "entryComponents" but it was neither declared nor imported! This warning will become an error after final.

[webartistkb]

I am getting following error intermittently and getting that NgModule BootstrapModalModule warning as well.

[shlomiassaf]

@karser @webartistkb It's an easy fix, i'll appreciate a PR, if not a new issue would be nice, i'll fix it in the next version.

@webartistkb I can't really help without context, please post a plunker (in a new issue) and i'll try to help. My guess is that you're not setting a catch for the dialog ref result promise. Any dismissal of the modal (cancel/X) will reject() the promise. Any route/page change will dismiss a modal that is in an element (inElement set to true) which is in the page. The page get's destroyed and so does the modal inside of it. The library detects that an "bails" out with a rejection.

[shlomiassaf]

This issue is fixed, along with other issues raise in the comments.

Closing.

[stevewarsa]

Hi shlomiassaf - thanks for the library. I downloaded from npm yesterday - using v angular2-modal - Angular2 Modal (dialog) window. @version v2.0.0-beta.12 I'm getting the following errors both from VS Code and WebPack build:

ERROR in [default] .....\node_modules\angular2-modal\angular2-modal.module.d.ts:16:49 Type 'Type' is not generic.

ERROR in [default] .....\node_modules\angular2-modal\angular2-modal.module.d.ts:22:43 Type 'Type' is not generic.

ERROR in [default] .....\node_modules\angular2-modal\models\tokens.d.ts:18:67 Type 'Type' is not generic.

ERROR in [default] .....\node_modules\angular2-modal\overlay\overlay.component.d.ts:28:60 Type 'Type' is not generic.

ERROR in [default] .....\node_modules\angular2-modal\providers\modal.d.ts:38:127 Type 'Type' is not generic.

Looking at the first error, it seems to be complaining about these lines:

static withComponents(entryComponents: Array<Type | any[]>): ModuleWithProviders; static forRoot(entryComponents?: Array<Type | any[]>): ModuleWithProviders;

For now, to get by, I just corrected the compile errors myself: static withComponents(entryComponents: Array<any[]>): ModuleWithProviders; static forRoot(entryComponents?: Array<any[]>): ModuleWithProviders;

I'm using: $ ng -v angular-cli: 1.0.0-beta.11-webpack.8 node: 6.2.1 os: win32 x64

(although the webpack build is using webpack 2.1.0-beta.21) Also, tsc -v: Version 2.0.0

Any ideas how to fix?

Thanks, Steve

* update * Well I was having a another problem, reported at https://github.com/shlomiassaf/angular2-modal/issues/187

This was resolved by modifying the compiler error lines above to have | any:

token.d.ts: export declare type ContainerContent = string | TemplateRef | any | any[];

overlay.component.d.ts: getProjectables(content: string | TemplateRef | any | any[], bindings?: ResolvedReflectiveProvider[]): any[][];

modal.d.ts: protected createContainer(dialogRef: DialogRef, ContainerComponent: Class, content: string | TemplateRef | any[] | any, bindings?: ResolvedReflectiveProvider[]): ComponentRef;