Uncaught SyntaxError: Unexpected token < when importing Modal

[tlorenzetti]

Hi, I'm starting from a simple quick start angular 2 project and I installed angular2-modal via npm

npm install angular2-modal --save

And now I have

• angular2-modal/
  • dist/
  • docs/
  • src/
  • ...

in my node_modules folder. As soon as I import Modal in one of my component and add it to the providers array, I get an error

Uncaught SyntaxError: Unexpected token <
Evaluating http://localhost:3000/angular2-modal/src/components/angular2-modal/providers/Modal
Error loading http://localhost:3000/app/main.js

This is the component:

import {Component} from 'angular2/core';
import {Modal} from 'angular2-modal/src/components/angular2-modal/providers/Modal';

@Component({
    selector: 'my-app',
    template: `        
            <h1>My First Angular 2 App</h1>
            <button (click)="test()">Test</button>
    `,
    providers: [Modal],
})
export class AppComponent {
    constructor() {}

    test() {
        //here I want to open a modal
    }
}

I'm sure that I'm missing something, but don't know what

[letmejustfixthat]

I got the same problem. Any updates here?

[tlorenzetti]

No, I still haven't figured out what is missing.

[feliu]

+1

[shlomiassaf]

You are trying to access it the wrong way.

Try doing import {Modal} from 'angular2-modal';

NPM packages should be loaded by name, not by path. Loading by name ensures the package is loaded in the right order. If you load by name you can't tell if something is missing in the runtime.

Also, please note that there are 2 directories, dist & src. The src is there for debugging, hitting a breakpoint in the typescript files and not in the complied ES5 files, it is not intended for runtime use.

If you load the package using import 'angular2-modal' it will load from dist folder. If later in your app you try something like import {...} from 'angular2-moda/src/... you are entering a type black hole and will probably result in 2 instances of angular2-modal running in your app. That is, if you have a typescript compiler.

[tlorenzetti]

Thanks for your reply, but also with import {Modal} from 'angular2-modal'; I get the same error.

[feliu]

me too

[tlorenzetti]

It seems to be a problem related to the configuration with system.js (see here). So I tried to change my index.html (following the proposed solution) in this way:

System.config({
  packages: {
    app: {
      format: 'register',
      defaultExtension: 'js'
    },
    'angular2-modal': {}
  },
  map: {
    'angular2-modal': 'node_modules/angular2-modal'
  }
});

But nothing changed.

[tlorenzetti]

Finally I resolved thanks to the Mapaxe comment here. So, I changed my index.html

packages: {        
  app: {
    format: 'register',
    defaultExtension: 'js'
  },
  'angular2-modal': {
    defaultExtension: 'js'
  }
},
map: {
  'angular2-modal': 'node_modules/angular2-modal/dist'
}

and imported the modules

import {Modal, ModalConfig, ...} from 'angular2-modal/angular2-modal';

[kat-liger]

Hi @tlorenzetti, thank you for creating this thread and posting the solution! Would you be so kind to please share the syntax you used to open a test modal window? I am also working with quickstart-angular-2 project but I can't make the modals work although the import works successfully.

[tlorenzetti]

Hi @kat-liger, just follow the demo (source code here). However, here is an example with a button than opens a simple confirm modal.

import {Component, Injector, provide} from 'angular2/core';
import {Modal, ModalConfig, ModalDialogInstance, YesNoModal, ICustomModal, YesNoModalContent} from 'angular2-modal/angular2-modal';

@Component({
    selector: 'my-app',
    template: `
        <button class="btn btn-primary" (click)="openModal()">Open</button>
        {{lastResult}}
    `,
    providers: [Modal],
})
export class AppComponent {
    private lastResult;

    constructor(private modal: Modal) {}

    openModal() {
        let component = YesNoModal;
        let dialog: Promise<ModalDialogInstance>;

        var modalContent = new YesNoModalContent('Modal title', 'Modal content', false, "Ok", "Cancel")
        let bindings = Injector.resolve([provide(ICustomModal, {useValue: modalContent})]);

        var modConf = new ModalConfig("sm", true, null);

        dialog = this.modal.open(<any>component, bindings, modConf);
        dialog.then(
            resultPromise => {
                return resultPromise.result.then(
                    result => {
                        this.lastResult = result; //result is true
                    },
                    () => this.lastResult = 'Canceled' //result is false
                );
            }
        );
    }   
}

You can also create a custom modal by creating a Component that implements ICustomModalComponent and providing content to configure it (see AdditionCalculateWindow and AdditionCalculateWindowData in this example). I hope this helps, let me know :)

Cheers, Tiziano

[kat-liger]

Thank you, @tlorenzetti! That's a great example, only now I realized I forgot to include Modal into the providers array, and as soon as I do it, I am back to square one:

Uncaught SyntaxError: Unexpected token < Evaluating http://localhost:3000/node_modules/angular2-modal/dist/ Error loading http://localhost:3000/app/main.js

I tried all the proposed solutions, no luck so far.

[farnk05]

I think i got this all working for me @kat-liger . The file structure change a little bit in the dist folder. in the System.config on the front HTML page i added /commonjs to the map packages: { app: { format: 'register', defaultExtension: 'js' }, 'angular2-modal': { defaultExtension: 'js' } }, map: { 'angular2-modal': 'node_modules/angular2-modal/dist/commonjs' } then the examples provided worked for me. Thanks everyone