Production build using AOT is not working.
Closed this issue · 16 comments
Hi,
at first, thank you very much for creating Angular6 version of this library. We using them on our projects and update to angular 6 is one of my current tasks.
We faced various type of errors which we can fix somehow (see our fork: https://github.com/jakubjosef/Angular6-json-schema-form).
Right now we have working version (except custom layouting which is also not working and it's very important for us) but in general we have working version but this version cannot be compiled for production use using AOT. We see very weird error:
~/xxx/xxx angular6 yarn build:prod
yarn run v1.7.0
$ ng build --prod
Date: 2018-07-23T16:31:49.517Z - Hash: b30aed42afefba54fbff - Time: 35644ms
1 unchanged chunks
chunk {scripts} scripts.e3a6c46eaad619fb8878.js (scripts) 156 kB [rendered]
chunk {0} runtime.a66f828dca56eeb90e02.js (runtime) 1.05 kB [entry] [rendered]
chunk {1} styles.a253ac1ee1863b4bf008.css (styles) 175 kB [initial] [rendered]
chunk {2} polyfills.98574895d130bf971ae7.js (polyfills) 66.3 kB [initial] [rendered]
ERROR in ./node_modules/angular2-json-schema-form/json-schema-form.ngfactory.js
Module not found: Error: Can't resolve 'json-schema-form' in '/Users/xxx/xxx/xxx/node_modules/angular2-json-schema-form'
ERROR in ./src/app/app.module.ngfactory.js
Module not found: Error: Can't resolve 'json-schema-form' in '/Users/xxx/xxx/xxx/src/app'
ERROR in ./src/app/form-generation-page/form-generation-page.component.ngfactory.js
Module not found: Error: Can't resolve 'json-schema-form' in '/Users/xxx/xxx/xxx/src/app/form-generation-page'
ERROR in ./src/app/form-generator/add-item/add-item.component.ngfactory.js
Module not found: Error: Can't resolve 'json-schema-form' in '/Users/xxx/xxx/xxx/src/app/form-generator/add-item'
ERROR in ./src/app/form-generator/array-table-widget/array-table-widget.component.ngfactory.js
Module not found: Error: Can't resolve 'json-schema-form' in '/Users/xxx/xxx/xxx/src/app/form-generator/array-table-widget'
ERROR in ./src/app/form-generator/recurcive-test-widget/recurcive-test-widget.component.ngfactory.js
Module not found: Error: Can't resolve 'json-schema-form' in '/Users/xxx/xxx/xxx/src/app/form-generator/recurcive-test-widget'
ERROR in ./src/app/form-generator/test-widget/test-widget.component.ngfactory.js
Module not found: Error: Can't resolve 'json-schema-form' in '/Users/xxx/xxx/xxx/src/app/form-generator/test-widget'
ERROR in chunk main [initial]
[name].[chunkhash:20].js
/Users/xxx/xxx/xxx/node_modules/@angular-devkit/build-optimizer/src/build-optimizer/webpack-loader.js??ref--17-0!/Users/xxx/xxx/xxx/node_modules/@ngtools/webpack/src/index.js!/Users/xxx/xxx/xxx/src/main.ts fb795d43c3239ca08ae66e0032f6b7c5
Unexpected token (133:27655)
|
|
| var AppModuleNgFactory = /*@__PURE__*/ /*@__PURE__*/ __WEBPACK_MODULE_REFERENCE__0_c9b5636d66__(__WEBPACK_MODULE_REFERENCE__436_4170704d6f64756c65__, [__WEBPACK_MODULE_REFERENCE__437_417070436f6d706f6e656e74__], function (_l) { return __WEBPACK_MODULE_REFERENCE__0_c9b56d6f64__([__WEBPACK_MODULE_REFERENCE__0_c9b56d7064__(512, __WEBPACK_MODULE_REFERENCE__0_436f6d706f6e656e74466163746f72795265736f6c766572__, __WEBPACK_MODULE_REFERENCE__0_c9b5436f646567656e436f6d706f6e656e74466163746f72795265736f6c766572__, [[8, [__WEBPACK_MODULE_REFERENCE__441_c9b5456d7074794f75746c6574436f6d706f6e656e744e67466163746f7279__, __WEBPACK_MODULE_REFERENCE__444_4e6762416c6572744e67466163746f7279__, __WEBPACK_MODULE_REFERENCE__450_4e6762546f6f6c74697057696e646f774e67466163746f7279__, __WEBPACK_MODULE_REFERENCE__455_4e676254797065616865616457696e646f774e67466163746f7279__, __WEBPACK_MODULE_REFERENCE__476_4e6762446174657069636b65724e67466163746f7279__, __WEBPACK_MODULE_REFERENCE__478_4e67624d6f64616c4261636b64726f704e67466163746f7279__, __WEBPACK_MODULE_REFERENCE__482_4e67624d6f64616c57696e646f774e67466163746f7279__, __WEBPACK_MODULE_REFERENCE__485_4e6762506f706f76657257696e646f774e67466163746f7279__, __WEBPACK_MODULE_REFERENCE__497_4d61744469616c6f67436f6e7461696e65724e67466163746f7279__, __WEBPACK_MODULE_REFERENCE__504_4d6174446174657069636b6572436f6e74656e744e67466163746f7279__, __WEBPACK_MODULE_REFERENCE__504_4d617443616c656e6461724865616465724e67466163746f7279__, __WEBPACK_MODULE_REFERENCE__507_546f6f6c746970436f6d706f6e656e744e67466163746f7279__, __WEBPACK_MODULE_REFERENCE__546_4164645265666572656e6365436f6d706f6e656e744e67466163746f7279__, __WEBPACK_MODULE_REFERENCE__546_4f6e654f66436f6d706f6e656e744e67466163746f7279__, __WEBPACK_MODULE_REFERENCE__546_427574746f6e436f6d706f6e656e744e67466163746f7279__... and many many more.
Are you using this library in some application?
Can you help us a little bit with debugging / fixing this issue?
Thank you very much in advance @hamzahamidi .
Oh men, i just saw your new commits in main repo. Going to check it, thank you again.
@jakubjosef Thank you for your feedback. I just released the version 1.0.2 which supports AOT let me know if you still face the same issue. Also note that the imports are now from angular6-json-schema, so verify that you completely deleted angular2-json-schema
@hamzahamidi Thanks for your quick answer, actually I fighting against this library for few days :)
Unfortunately using your version directly caused some seen errors for us:
At first we using a custom form directives so I have to add.
export * from './lib/widget-library/widget-library.service';
to the public_api.ts file (this is one our fixes in my fork).
With this fix we have I see next error we somehow fixed before:
$ ng build --prod
ERROR in Error during template compile of 'AppModule'
Function calls are not supported in decorators but 'Bootstrap4FrameworkModule' was called in 'JsonSchemaFormModule'
'JsonSchemaFormModule' calls 'Bootstrap4FrameworkModule'.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
We hardcoded bootstrap provider to the forRoot function of JsonSchemaFormModule.
If we pass null framework to the forRoot function I can see this error:
ERROR in : Invalid provider for the NgModule 'JsonSchemaFormModule in /Users/xxx/xxx/xxx/node_modules/angular2-json-schema-form/angular6-json-schema-form.d.ts' - only instances of Provider and Type are allowed, got: [JsonSchemaFormService in /Users/xxx/xxx/xxx/node_modules/angular2-json-schema-form/angular6-json-schema-form.d.ts, ɵa in /Users/xxx/xxx/xxx/node_modules/angular2-json-schema-form/angular6-json-schema-form.d.ts, WidgetLibraryService in /Users/xxx/xxx/xxx/node_modules/angular2-json-schema-form/angular6-json-schema-form.d.ts, ?null?]
Without our extra imports of WidgetLibraryService and classic usage of JsonSchemaFormModule.forRoot(Bootstrap4FrameworkModule) I see this error:
yarn run v1.7.0
$ ng build --prod
Date: 2018-07-23T17:18:36.084Z
Hash: dd188a29660ab9f5380e
Time: 7870ms
chunk {scripts} scripts.e3a6c46eaad619fb8878.js (scripts) 156 kB [rendered]
chunk {0} runtime.a66f828dca56eeb90e02.js (runtime) 1.05 kB [entry] [rendered]
chunk {1} styles.a253ac1ee1863b4bf008.css (styles) 175 kB [initial] [rendered]
chunk {2} polyfills.47128b287f32f00ed880.js (polyfills) 130 bytes [initial] [rendered]
chunk {3} main.179049c6a74691736097.js (main) 128 bytes [initial] [rendered]
ERROR in Error during template compile of 'AppModule'
Function calls are not supported in decorators but 'Bootstrap4FrameworkModule' was called in 'JsonSchemaFormModule'
'JsonSchemaFormModule' calls 'Bootstrap4FrameworkModule'.
src/app/form-generator/test-widget/test-widget.component.ts(2,33): error TS2305: Module '"/Users/xxx/xxx/xxx/node_modules/angular6-json-schema-form/angular6-json-schema-form"' has no exported member 'WidgetLibraryService'.
Package used directly from npm registry, version 1.0.2.
Thank for your feedback I'm working on it
I'm also working on it, with some of my fixes I'm getting pretty close to solution, I'm joining your and mine versions together. Also you have to check this article: https://codewithstyle.info/creating-angular-npm-packages-with-ng-packagr/
Right now i facing this problem
yarn run v1.7.0
$ ng build --prod
Date: 2018-07-23T17:41:47.677Z
Hash: 8fd22709befdff4f1aaf
Time: 7998ms
chunk {scripts} scripts.e3a6c46eaad619fb8878.js (scripts) 156 kB [rendered]
chunk {0} runtime.a66f828dca56eeb90e02.js (runtime) 1.05 kB [entry] [rendered]
chunk {1} styles.a253ac1ee1863b4bf008.css (styles) 175 kB [initial] [rendered]
chunk {2} polyfills.47128b287f32f00ed880.js (polyfills) 130 bytes [initial] [rendered]
chunk {3} main.179049c6a74691736097.js (main) 128 bytes [initial] [rendered]
ERROR in : Invalid provider for ɵb in /Users/xxx/xxx/xxx/node_modules/angular2-json-schema-form/angular6-json-schema-form.d.ts. useClass cannot be undefined.
Usually it happens when:
1. There's a circular dependency (might be caused by using index.ts (barrel) files).
2. Class was used before it was declared. Use forwardRef in this case.
Accoring to my previous research, this is most likely caused by some bug in Typescript barrel files, so changing imports for Boostrap4 like this worked last time.
jakubjosef@63825d9
EDIT: ok, this version is fully working for me, for yarn start(dev mode) and for yarn build:prod(prod build). But i'm still having problems with complete non-functional layouting. Do you using custom layouts?
I see why demo is working properly, this is because you importing this library directly from projects not as a library.
If you change the line 13 in demo.module.ts to this you can see the same errors like I saw.
import {
JsonSchemaFormModule, NoFrameworkModule, MaterialDesignFrameworkModule,
Bootstrap3FrameworkModule, Bootstrap4FrameworkModule
} from 'json-schema-form';
But layouting is working properly in demo, so i still investigating our problems.
EDIT: ok layouting problems was caused by problems in our code. So using your version with our changes in forRoot function works completely.
@jakubjosef can you Test this PR #6 & give me your feedback before I merge It. I changed the way modules are imported now:
import { MaterialDesignFrameworkModule } from 'angular6-json-schema-form';
imports: [
BrowserModule,
MaterialDesignFrameworkModule,
...
It's the same way for the other modules
Bootstrap4FrameworkModule,
Bootstrap3FrameworkModule,
NoFrameworkModule
The new release 1.0.3 is AOT compatible.
@hamzahamidi Sorry for delay, Good job, it's working in our application without any change. But also without styles, bootstrap 4 styling is not working for me. Even other styling frameworks not work.
So right now you don't importing JsonSchemaFormModule at all?
That's kinda confusing for me. You can at least consider to rename Bootstrap4FrameworkModule to JsonSchemaFormWithBootstrapModule or something like that. Because using current naming it's impossible to know Bootstrap4FrameworkModule is something related with JsonSchemaForm.
Thank you for your work.
Just to confirm that 1.0.3 now works for prod builds. But I also lost material look&feel like jakub with bootstrap. I'm using MaterialDesignFrameworkModule.
@jakubjosef @scheuchzer I can't seem to reproduce this issue. Are you sure you imported Bootstrap4FrameworkModule like this, note that you shouldn't import JsonSchemaFormModule :
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { Bootstrap4FrameworkModule } from 'angular6-json-schema-form';
import { AppComponent } from './app.component';
@NgModule({
declarations: [ AppComponent ],
imports: [
BrowserModule
Bootstrap4FrameworkModule
],
providers: [],
bootstrap: [ AppComponent ]
})
export class AppModule { }And you use the component like the following:
<json-schema-form
loadExternalAssets="true"
[schema]="schema"
framework="bootstrap-4"
(onSubmit)="submit($event)">
</json-schema-form>If you still face the same issue, can you make a repository to reproduce this issue?
I missed that I have to configure the framework attribute now. Unfortunately I'm away and can't retest it right now. Thanks for the hint.
@hamzahamidi @scheuchzer Exactly I also missed the the new framework property. With "bootstrap-4" it's finally working. Name confusion was resolved using custom import like this:
import {
Bootstrap4FrameworkModule as JsonSchemaFormWithBootstrap,
} from 'angular6-json-schema-form';
So I'm happy now :)
@hamzahamidi Thanks for your work.
@hamzahamidi Setting framework="material-design" worked! Thanks