ERROR in Error: Error encountered resolving symbol values statically.

[fredbi]

Hello. Your book is most useful. Great work!
Eventually I decided to try and use your wizard.
Got the following build error when attempting to bind the WizardModule class in my main app.

ERROR in Error: Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function (position 194:50 in the original .ts file), resolving symbol NgModule in /var/disk2/thefundschain/poc.1.0.2/src/dltshift.com/thefundschain/clients/www/issuerApps/node_modules/primeng-extensions-wizard/node_modules/@angular/core/core.d.ts, resolving symbol WizardModule in /var/disk2/thefundschain/poc.1.0.2/src/dltshift.com/thefundschain/clients/www/issuerApps/node_modules/primeng-extensions-wizard/components/wizard.module.d.ts, resolving symbol WizardModule in /var/disk2/thefundschain/poc.1.0.2/src/dltshift.com/thefundschain/clients/www/issuerApps/node_modules/primeng-extensions-wizard/components/wizard.module.d.ts at positionalError (/var/disk2/thefundschain/poc.1.0.2/src/dltshift.com/thefundschain/clients/www/issuerApps/node_modules/@angular/compiler/bundles/compiler.umd.js:25134:35) at simplifyInContext (/var/disk2/thefundschain/poc.1.0.2/src/dltshift.com/thefundschain/clients/www/issuerApps/node_modules/@angular/compiler/bundles/compiler.umd.js:24977:27) at StaticReflector.simplify (/var/disk2/thefundschain/poc.1.0.2/src/dltshift.com/thefundschain/clients/www/issuerApps/node_modules/@angular/compiler/bundles/compiler.umd.js:24991:13) at StaticReflector.annotations (/var/disk2/thefundschain/poc.1.0.2/src/dltshift.com/thefundschain/clients/www/issuerApps/node_modules/@angular/compiler/bundles/compiler.umd.js:24418:41) at _getNgModuleMetadata (/var/disk2/thefundschain/poc.1.0.2/src/dltshift.com/thefundschain/clients/www/issuerApps/node_modules/@angular/compiler-cli/src/ngtools_impl.js:138:31) at _extractLazyRoutesFromStaticModule (/var/disk2/thefundschain/poc.1.0.2/src/dltshift.com/thefundschain/clients/www/issuerApps/node_modules/@angular/compiler-cli/src/ngtools_impl.js:109:26) at /var/disk2/thefundschain/poc.1.0.2/src/dltshift.com/thefundschain/clients/www/issuerApps/node_modules/@angular/compiler-cli/src/ngtools_impl.js:129:27 at Array.reduce (native) at _extractLazyRoutesFromStaticModule (/var/disk2/thefundschain/poc.1.0.2/src/dltshift.com/thefundschain/clients/www/issuerApps/node_modules/@angular/compiler-cli/src/ngtools_impl.js:128:10) at Object.listLazyRoutesOfModule (/var/disk2/thefundschain/poc.1.0.2/src/dltshift.com/thefundschain/clients/www/issuerApps/node_modules/@angular/compiler-cli/src/ngtools_impl.js:53:22) at Function.NgTools_InternalApi_NG_2.listLazyRoutes (/var/disk2/thefundschain/poc.1.0.2/src/dltshift.com/thefundschain/clients/www/issuerApps/node_modules/@angular/compiler-cli/src/ngtools_api.js:91:39) at AotPlugin._getLazyRoutesFromNgtools (/var/disk2/thefundschain/poc.1.0.2/src/dltshift.com/thefundschain/clients/www/issuerApps/node_modules/@ngtools/webpack/src/plugin.js:207:44) at _donePromise.Promise.resolve.then.then.then.then.then (/var/disk2/thefundschain/poc.1.0.2/src/dltshift.com/thefundschain/clients/www/issuerApps/node_modules/@ngtools/webpack/src/plugin.js:443:24)

in:
app.module.ts, I declared the following:

`
// Prime NG components (primeng/primeng imports all components)
import { ButtonModule } from 'primeng/components/button/button';
...
import { TreeTableModule } from 'primeng/components/treetable/treetable';

// PrimeNG contributions
import { WizardModule } from 'primeng-extensions-wizard/components/wizard.module';
`

I use np.m package rel. 2.1.0. Excerpt from my saved package.json dependencies:

"dependencies": { "@angular/animations": "^4.4.6", "@angular/common": "^4.2.4", "@angular/compiler": "^4.2.4", "@angular/compiler-cli": "^4.4.6", "@angular/core": "^4.2.4", "@angular/forms": "^4.2.4", "@angular/http": "^4.2.4", "@angular/platform-browser": "^4.2.4", "@angular/platform-browser-dynamic": "^4.2.4", "@angular/platform-server": "^4.4.6", "@angular/router": "^4.2.4", "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.5", "core-js": "^2.4.1", "font-awesome": "^4.7.0", "primeng": "^4.2.2", "primeng-extensions-wizard": "^2.1.0", "rxjs": "^5.4.2", "zone.js": "^0.8.14" },

OS: Linux UBUNTU 14.04 x64
angular/cli: 1.4.4
node: 6.11.3
typescript: 2.3.4

The import line by itself does nothing. This is the one which triggers the build error. When I remove the reference from @NgModule( imports: []), the build returns to ok.

@NgModule({ // Components used in this page // @todo: investors should move to the distributor's apps suite declarations: [ AppComponent, ... ], imports: [ BrowserModule, BrowserAnimationsModule, FormsModule, HttpModule, // PrimeNG modules ButtonModule, ... TreeTableModule, **WizardModule,** // Routes accessible from main landing pages routes ],

[ova2]

It was working. In the meanwhile all Angular related versions werde changed and users reports this issue time to time. I have to investigate more time to solve it. I will keep you informed.

[fredbi]

Hello. Thank you for your prompt answer.

I don't think it is related to your code, but rather to the npm packaging vs @angular/cli.

I've had similar issues (e.g. the infamous "xxx in not an NgModule") on packages working fine when using source directly and no more working when using their npm package.

Upgraded to @angular/cli@1.4.9 with no more success.

[ova2]

It seems to be an issue with Angular CLI if you use Wizard with Angular CLI in AOT mode. See similar issues:

angular/angular-cli#3707
angular/angular-cli#4647
angular/angular-cli#3854

I have never tried Wizard with Angular CLI. The Wizard component was just a demonstration of custom component. Sorry, but I assume I can not fix this issue. I only use arrow functions in forEach like this

                this.steps.toArray().forEach((step: StepComponent, index: number) => {
                    // show / hide the step
                    let selected = index === curIndex;
                    step.active = selected;

                    if (selected) {
                        // emit currently selected label
                        this.change.next(step.label);
                    }
                });

Theoretically I can switch to normal functions, but it's not worth for the book. The Wizard component is not for production, it is only for demonstration purpose.

[fredbi]

Thanks anyway.
I'll check it further out but I don't think I am building with IOT : angular CLI defaults to JIT build when building with --dev target.
I admit the 'wontfix' decision is probably the correct one. Frustrating, though...

[ova2]

@fredbi Well, I will try to include the Wizard into a fresh created project with Angular CLI when I have more time.