Unexpected token const MULTISELECT_VALUE_ACCESSOR:<---on AOT compile

[blopez-co-slo-ca-us]

Installed version: "angular-2-dropdown-multiselect": "^1.0.5", (from package.json) APP set up according to: https://angular.io/docs/ts/latest/cli-quickstart.html AOT set up according to: https://angular.io/docs/ts/latest/cookbook/aot-compiler.html

Control works fine when run live. This is an issue that surfaces upon AOT compile (npm run build:aot). This error presented itself once the control was updated to version 1.0.5. Was running an older version of the control and AOT worked fine. No now, on AOT compile, receive the following error:

� Unexpected token node_modules\angular-2-dropdown-multiselect\src\multiselect-dropdown.ts (26:32) 24: import { FormsModule, NG_VALUE_ACCESSOR, ControlValueAccessor, Validator, AbstractControl } from '@angular/forms'; 25: 26: const MULTISELECT_VALUE_ACCESSOR: any = { ^ (this error chevron points directly under the colon after ACCESSOR) 27: provide: NG_VALUE_ACCESSOR, 28: useExisting: forwardRef(() => MultiselectDropdown),

Feature Module:

import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; import 'hammerjs'; import { MultiselectDropdownModule } from 'angular-2-dropdown-multiselect';** (at)NgModule({ imports: [ NgbModule, MultiselectDropdownModule, ReactiveFormsModule,

Consuming Component:

import { Component, Input, Output, EventEmitter } from '@angular/core'; import { IMultiSelectOption } from 'angular-2-dropdown-multiselect'; import 'rxjs/add/operator/switchMap';

@Component({
moduleId: module.id, selector: 'consumingcomponent', templateUrl: 'consuming.component.html' }) export class ActivityPercentComponent { ees: IMultiSelectOption[];

constructor(private _valuesService: ValuesService, private _Service: MyService) { }

ngOnInit(): void { this.getMSOptions(); }

getMSOptions(): void { this._MyService.View() .subscribe(ms => this.ees = ms, error => this.errorMessage = error); }

Consuming Template:

  <ss-multiselect-dropdown [options]="ees" [(ngModel)]="myModel"></ss-multiselect-dropdown>

System.config.extra.js:

(function (global) { System.config({ paths: { 'npm:': 'node_modules/' }, map: { '@ng-bootstrap/ng-bootstrap': 'npm:@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js', 'angular-2-dropdown-multiselect': 'npm:angular-2-dropdown-multiselect', 'hammerjs': 'npm:hammerjs' }, packages: { 'npm:angular-2-dropdown-multiselect': { main: './src/multiselect-dropdown.js', defaultExtension: 'js' }, 'npm:hammerjs': { defaultExtension: 'js', main: "./hammer.min.js" }
} }); })(this);

[softsimon]

The Unexpected token error makes little sense to me... Could you try changing main: './src/multiselect-dropdown.js', to main: './index.js',

[blopez-co-slo-ca-us]

Hmm... Pretty much same error.

[softsimon]

Try edit multiselect-dropdown.ts in place and remove the : any type annotation.

[softsimon]

You can also try removing this part:

const MULTISELECT_VALUE_ACCESSOR: any = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => MultiselectDropdown),
  multi: true
};

and adding it to the provider like this:

@Component({
  selector: 'ss-multiselect-dropdown',
  providers: [{
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => MultiselectDropdown),
    multi: true
  }],

[blopez-co-slo-ca-us]

Try edit multiselect-dropdown.ts in place and remove the : any type annotation. Trying above resulted in this error:

Next, Trying this: _You can also try removing this part:

const MULTISELECT_VALUE_ACCESSOR: any = { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => MultiselectDropdown), multi: true }; and adding it to the provider like this:

@Component({ selector: 'ss-multiselect-dropdown', providers: [{ provide: NG_VALUEACCESSOR, useExisting: forwardRef(() => MultiselectDropdown), multi: true }],

Resulted in similar error:

[blopez-co-slo-ca-us]

Don't know if this will help, but just in case. More info: From my package.json:

"build:aot": "ngc -p tsconfig-aot.json && rollup -c rollup-config.js",
"buildO:aot": "ngc -p tsconfig-aot.json",
"buildJ:aot": "rollup -c rollup-config.js",

Running these commands build:aot =Failure
buildO:aot = Success, no errors buildJ:aot = Failure

Contents of config files: tsconfig-aot.json

{"compilerOptions": { "target": "es5", "module": "es2015", "moduleResolution": "node", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "lib": ["es2015", "dom"], "noImplicitAny": true, "suppressImplicitAnyIndexErrors": true, "typeRoots": [ "node_modules/@types/" ] },

"files": [ "app/app.module.ts", "app/main-aot.ts" ],

"angularCompilerOptions": { "genDir": "aot", "skipMetadataEmit" : true }}

rollup-config.js

import rollup from 'rollup' import nodeResolve from 'rollup-plugin-node-resolve' import commonjs from 'rollup-plugin-commonjs'; import uglify from 'rollup-plugin-uglify'

export default { entry: 'app/main-aot.js', dest: 'aot/dist/build.js', // output a single application bundle sourceMap: true, sourceMapFile: 'aot/dist/build.js.map', format: 'iife', plugins: [ nodeResolve({jsnext: true, module: true}), commonjs({ include: 'node_modules/rxjs/**' }), uglify() ]}

[hewstone]

I'm getting the same thing using WebPack to combine into into vendor file.

ERROR in ./~/angular-2-dropdown-multiselect/src/multiselect-dropdown.ts Module parse failed: c:\Working\ng2Template\Angular2Application1\node_modules\angular-2-dropdown-multiselect\src\multiselect-dropdown.ts Unexpected token (26:32) You may need an appropriate loader to handle this file type. SyntaxError: Unexpected token (26:32)

[jiayihu]

This is caused by main in package.json which points to the original TS file instead of compiled JS, but Webpack is normally configured to exclude node_modules compiling. Distributed package should contain only compiled JS, metadata.json and .d.ts definitions.

[hewstone]

It seems to be as you say. Taking the code out of github and placing into my project as my own typescript file, it works as expected. So is the fix for the webPack issues need to be addressed in the node packaging or on the configuration of my webpack?

[blopez-co-slo-ca-us]

I was not able to get this running using the npm install. As stated above, I could run the application but it would not AOT compile. Finally gave up and included the typescript file (multiselect-dropdown.ts) as a part of my project. Now everything works fine including the compile.

[hewstone]

So you closed this saying what? Don't use the npm package and just use the source and add it directly to the project as a typescript file? Just trying to understand what the suggested resolution?

[jiayihu]

So is the fix for the webPack issues need to be addressed in the node packaging or on the configuration of my webpack?

Definitely in the package. In the meanwhile you can tell Webpack to exclude node_modules except this package, maybe with a comment explaining the reason. This comment shows how it can be done.