ERROR in Error encountered resolving symbol values statically - Angular CLI

[bytesfromali]

I just tried the library on an angular cli setup, and the moment I add angular2-json-schema-form into my app module or any other module, I am getting the above error. The log is as below:

The issue is coming the moment I am adding JsonSchemaFormModule.forRoot(), in the import array of my module.

ERROR in Error encountered resolving symbol values statically. Calling function 'JsonSchemaFormModule', function calls are not supported. Consider
replacing the function or lambda with a reference to an exported function, resolving symbol AppModule in C:/Projects/sample-portal-old/src/app/app.module.ts, resolving symbol AppModule in C:/Projects/sample-portal-old/src/app/app.module.ts

My Setup:
angular-cli: 1.0.0-beta.24
node: 7.2.1
os: win32 x64
@angular/common: 2.4.1
@angular/compiler: 2.4.1
@angular/core: 2.4.1
@angular/forms: 2.4.1
@angular/http: 2.4.1
@angular/platform-browser: 2.4.1
@angular/platform-browser-dynamic: 2.4.1
@angular/router: 3.4.1
@angular/compiler-cli: 2.4.1

I did some research of my own about this issue and a lot of libraries are giving this issue.
Reference:
angular/angular-cli#3674 (comment)
angular/angular-cli#3707
auth0/angular2-jwt#258

Most of the comments made me conclude that metadata need to be published with the library as well.

Since I am new to angular so could not look more deeper into this issue. Can you have a look onto this.

[empirefox]

Try again with src like import { JsonSchemaFormModule } from 'angular2-json-schema-form/src'.

[bytesfromali]

@empirefox: It worked, Thanks for the help. had to install lodash & @types/lodash after importing angular2-json-schema-form/src.

@dschnelldavis: you should update the document for the cli project, it will help others. you can close the issue now.

[dschnelldavis]

I think I've fixed this issue, but I'd like to make sure before I close it.

I moved @types/lodash to dependencies in package.json to automatically include it - which means you no longer have to separately import lodash or @types/lodash. So if you upgrade to the latest version from NPM (currently 0.3.0-alpha.23) you can uninstall lodash and @types/lodash (unless you're also using them for something else in your project), and it should still work.

I also added a separate section to the readme describing how to install with Angular CLI, explaining that you have to use import { JsonSchemaFormModule } from 'angular2-json-schema-form/src';. Please take a look at the new readme and let me know if the new instructions are clear enough to enable future Angular CLI users to install without problems. As soon as you confirm they are, I'll close this.

Thanks!

[bytesfromali]

@dschnelldavis The documentation looks great. I will update the npm package later since I am using lodash for other purposes as well.

[dschnelldavis]

Great. Thanks for the feedback.

[jh-code]

I was getting the same error, and I switched to importing from source and I get tons of different errors now. They look like this:

Error at /home/ensync/Development/op-w2/build/node_modules/angular2-json-schema-form/src/frameworks/material-design/material-textarea.component.ngfactory.ts:460:43: Property 'options' is private and only accessible within class 'MaterialTextareaComponent'.
Error at /home/ensync/Development/op-w2/build/node_modules/angular2-json-schema-form/src/frameworks/material-design/material-textarea.component.ngfactory.ts:460:89: Property 'options' is private and only accessible within class 'MaterialTextareaComponent'.
Error at /home/ensync/Development/op-w2/build/node_modules/angular2-json-schema-form/src/frameworks/material-design/material-textarea.component.ngfactory.ts:510:48: Property 'updateValue' is private and only accessible within class 'MaterialTextareaComponent'.

I'm also NOT using Angular CLI, but a custom webpack setup. It works in my development environment, these errors only arise when I try to AoT compile the app. Any idea why this might be happening?

Edit: The errors from app.component.ngfactory.ts are my fault though. The ones before it were caused by the library.

[jh-code]

Upon further investigation, in order for it to be AoT compatible, all methods and properties accessed by the template must be declared public. http://stackoverflow.com/a/39379451

[dschnelldavis]

@jh - I have only a little experience with webpack, and almost none with AoT, but I would like this library to work with both.

Could you please post basic directions, or links for directions elsewhere, describing how to create a similar setup to the one you're using, so I can recreate the errors you got and then update the library to fix them?

Thanks.

[jh-code]

@dschnelldavis Basically to make it AoT compatible, your code needs to be statically analyzable. Here is an article explaining more about it and how to achieve it. The setup I am using can be found here.

[dschnelldavis]

As of 0.4.0-alpha.11, I believe this issue has finally been fixed for good.

@jh-code Thank you for the article. It was tremendously helpful. It didn't cover everything, but it covered the basics well and gave me a good place to start for the rest.

This library's current build process uses Rollup for publishing to NPM, and Webpack for local testing with the demonstration playground, and both build systems appear to work fine. (As of version 0.4.0, we no longer use SystemJS at all.) I also did a series of tests running the NPM/Rollup version through the AoT compiler, and made updates until it compiled without errors.

If anyone still has this problem with version 0.4.0-alpha.11 or later let me know and I'll re-open this issue again.

[pdinesh80]

I see a similar issue in AOT build, I'm using the latest version of angular2-json-schema-form, Here is the error I see

Angular compilation done, starting webpack bundling.
Error: Metadata version mismatch for module /bld/workspace/test/node_modules/angular2-json-schema-form/angular2-json-schema-form.d.ts, found version 4, expected 3
at StaticSymbolResolver.getModuleMetadata (/bld/workspace/test/node_modules/@angular/compiler/@angular/compiler.es5.js:25586:7)
at StaticSymbolResolver._createSymbolsOf (/bld/workspace/test/node_modules/@angular/compiler/@angular/compiler.es5.js:25374:10)
at StaticSymbolResolver.getSymbolsOf (/bld/workspace/test/node_modules/@angular/compiler/@angular/compiler.es5.js:25355:12)