War not generating in Prod mode

[shivroy121]

Hi ,

I have used the ng-search-filter in jhipster project . It working fine . When i am trying to build the project war file in -production mode i am getting the error . And the same application war is generating in dev mode . I did't able to figure out what is the problem . Can any help me to solve the issue.

Thanks Shiv

[aVolpe]

Can you provide us the file node_modules/ng2-search-filter/ng2-search-filter.d.ts, .when I fetch from npm I receive this file:

/**
 * Generated bundle index. Do not edit.
 */
export * from './index';

No Ng2SearchPipe variable anywhere.

[shivroy121]

Hi aVolpe,

i am getting also same as you , Ng2SearchPipe filter is there in ng2-serach-filter.ts file. This error is coming only while building the war in prod mode . the same application code war is able to generate in dev mode.

import { Injectable, NgModule, Pipe } from '@angular/core';

class Ng2SearchPipe {
    /**
     * @param {?} items object from array
     * @param {?} term term's search
     * @return {?}
     */
    transform(items, term) {
        if (!term || !items)
            return items;
        return Ng2SearchPipe.filter(items, term);
    }
    /**
     *
     * @param {?} items List of items to filter
     * @param {?} term  a string term to compare with every property of the list
     *
     * @return {?}
     */
    static filter(items, term) {
        const /** @type {?} */ toCompare = term.toLowerCase();
        return items.filter(function (item) {
            for (let /** @type {?} */ property in item) {
                if (item[property] === null) {
                    continue;
                }
                if (item[property].toString().toLowerCase().includes(toCompare)) {
                    return true;
                }
            }
            return false;
        });
    }
}
Ng2SearchPipe.decorators = [
    { type: Pipe, args: [{
                name: 'filter',
                pure: false
            },] },
    { type: Injectable },
];
/**
 * @nocollapse
 */
Ng2SearchPipe.ctorParameters = () => [];

class Ng2SearchPipeModule {
}
Ng2SearchPipeModule.decorators = [
    { type: NgModule, args: [{
                declarations: [Ng2SearchPipe],
                exports: [Ng2SearchPipe]
            },] },
];
/**
 * @nocollapse
 */
Ng2SearchPipeModule.ctorParameters = () => [];

/**
 * Generated bundle index. Do not edit.
 */

export { Ng2SearchPipeModule, Ng2SearchPipe };
//# sourceMappingURL=ng2-search-filter.js.map

[aVolpe]

Hi @shivroy121 , googling your issue I found this: https://github.com/angular/angular/issues/19485

Can you please provide us the code where you are using the pipe?

[shivroy121]

Hi Avolpe , Thanks for your response . please find my code . this is the code which i am using it 4 component . but data is different .

<input class="form-control mySearch" placeholder="Search" name="srch-term" id="ed-srch-term" type="text" [(ngModel)]="term" >

div class="card event-crad" *ngFor="let articleInfo of restItems | filter:term | paginate: { itemsPerPage:9, currentPage: p ,totalItems: totalRec}">

div

[aVolpe]

You have the public variable term in your controller?

[shivroy121]

no , i did't declare the variable.

[aVolpe]

You shoul have the variable, in production mode angular compiles your html to javascript, and if the variable doesn't exists you will see the error.

Please add to your controler as a public term: string = '' and close the issue if that fix it for you.

[shivroy121]

Hi Avlope ,

I tried by keeping the variable in my component . But the issue is coming the same. I think this is not the root cause . Because if this is the problem then in dev mode also the html is compiling into the js file there i didn't got any issue.

[aVolpe]

In Dev mode the html isn't compiled, only with aot compiled the issue will appear, can you share your controller code? Thanks

[shivroy121]

Hi Avolpe ,

I declare the variable like this in my component.

export class HomeComponent implements OnInit, DoCheck {
 term:' ';

}

[shivroy121]

By google search i got this link -https://github.com/angular/angular/issues/18170.

The same issue has occurs with me also . this issue has been fixed in angular 4.2.3 version . and when i look the ng-search-filter package.json . they have used 2.2.1 angular version it self .

[aVolpe]

@shivroy121 we are using angular 2.2.1 as a minumun dependency, but it works fine with angular 4.2.3 and later, can you check the version of your angular (node_modules/@angular/core/package.json).

[shivroy121]

We are using angular 6 .

{
  "_args": [
    [
      "@angular/core@6.1.0",

    ]
  ],
  "_from": "@angular/core@6.1.0",
  "_id": "@angular/core@6.1.0",
  "_inBundle": false,
  "_integrity": "sha512-gWu9Q7q2+fhFC5dl/BvGW7Ha7NUJtK9wQLYQlfIMim4lKTOiM1/S0MYBVMrEq58ldMr9DnA35f5jGno3x6/v+g==",
  "_location": "/@angular/core",
  "_phantomChildren": {},
  "_requested": {
    "type": "version",
    "registry": true,
    "raw": "@angular/core@6.1.0",
    "name": "@angular/core",
    "escapedName": "@angular%2fcore",
    "scope": "@angular",
    "rawSpec": "6.1.0",
    "saveSpec": null,
    "fetchSpec": "6.1.0"
  },
  "_requiredBy": [
    "/"
  ],
  "_resolved": "https://registry.npmjs.org/@angular/core/-/core-6.1.0.tgz",
  "_spec": "6.1.0",
  "_where": 
  "author": {
    "name": "angular"
  },
  "bugs": {
    "url": "https://github.com/angular/angular/issues"
  },
  "dependencies": {
    "tslib": "^1.9.0"
  },
  "description": "Angular - the core framework",
  "es2015": "./fesm2015/core.js",
  "esm2015": "./esm2015/core.js",
  "esm5": "./esm5/core.js",
  "fesm2015": "./fesm2015/core.js",
  "fesm5": "./fesm5/core.js",
  "homepage": "https://github.com/angular/angular#readme",
  "license": "MIT",
  "main": "./bundles/core.umd.js",
  "module": "./fesm5/core.js",
  "name": "@angular/core",
  "ng-update": {
    "packageGroup": [
      "@angular/core",
      "@angular/bazel",
      "@angular/common",
      "@angular/compiler",
      "@angular/compiler-cli",
      "@angular/animations",
      "@angular/elements",
      "@angular/platform-browser",
      "@angular/platform-browser-dynamic",
      "@angular/forms",
      "@angular/http",
      "@angular/platform-server",
      "@angular/platform-webworker",
      "@angular/platform-webworker-dynamic",
      "@angular/upgrade",
      "@angular/router",
      "@angular/language-service",
      "@angular/service-worker"
    ]
  },
  "peerDependencies": {
    "rxjs": "^6.0.0",
    "zone.js": "~0.8.26"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/angular/angular.git"
  },
  "sideEffects": false,
  "typings": "./core.d.ts",
  "version": "6.1.0"
}

[aVolpe]

The easiest way to solve this issue is to copy the filter pipe (https://github.com/solodynamo/ng2-search-filter/blob/master/src/ng2-filter.pipe.ts) and use as a normal pipe (import in your main module).

I can't reproduce your issue with a fresh jhispter project.

[shivroy121]

i have used like u have suggested. i posted to know more about why this happening.

Thanks Avolpe for your support.