Closed anupamarachuri closed 4 years ago
Hi, which version of Angular 2 are you using and which version of angular2-schema-form are you using?
Note: there is no need to ping a bunch of people when you post an issue here :)
Hi,
Thank you very much for replying!
The version of Angular 2 is: 2.0.0-rc.5 Angular2-schema-form is: angular2-schema-form@^1.0.0-alpha.3
The demo project on its own works, but when I integrate with my Big Project, it does not. I have given the path to resolve for both angular2-schema-form as well as for ng2sf-tinymce.
The version of ng2sf-tinymce is: "ng2sf-tinymce@^1.0.4"
The error I am getting is:
Error: ReferenceError: 'exports' is undefined
at Anonymous function (eval code:1:31)
at eval code (eval code:1:2)
at ZoneDelegate.prototype.invoke (http://localhost:5555/node_modules/zone.js/dist/zone.js?1473184844077:330:14)
at Zone.prototype.run (http://localhost:5555/node_modules/zone.js/dist/zone.js?1473184844077:225:18)
at Anonymous function (http://localhost:5555/node_modules/zone.js/dist/zone.js?1473184844077:586:18)
at ZoneDelegate.prototype.invokeTask (http://localhost:5555/node_modules/zone.js/dist/zone.js?1473184844077:363:18)
Evaluating http://localhost:5555/node_modules/ng2sf-tinymce/dist/index.js
Error loading http://localhost:5555/node_modules/ng2sf-tinymce/dist/index.js as "ng2sf-tinymce" from http://localhost:5555/app/+dynamicui/dynamic.module.js
Accidentally closed. Please find my comment above.
The ng2sf-tinymce module and the angular2 schema form module are built as common-js module (which makes use of the exports object). It seems like your error is happening at execution time and not at compile time. How are you importing these modules ?
This is the app.module.ts:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { APP_BASE_HREF } from '@angular/common';
import { RouterModule } from '@angular/router';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { routes } from './app.routes';
import { AboutModule } from './+about/about.module';
import { HomeModule } from './+home/home.module';
import { SharedModule } from './shared/shared.module';
import { DynamicModule} from './+dynamicui/dynamic.module';
@NgModule({
imports: [BrowserModule, HttpModule, RouterModule.forRoot(routes), AboutModule, HomeModule, SharedModule.forRoot(),DynamicModule],
declarations: [AppComponent],
providers: [{
provide: APP_BASE_HREF,
useValue: '<%= APP_BASE %>'
}],
bootstrap: [AppComponent]
})
export class AppModule { }
This is the main.ts:
import { platformBrowserDynamic,bootstrap } from '@angular/platform-browser-dynamic';
// The app module
import { AppModule } from './app.module';
// Compile and launch the module
//noinspection TypeScriptValidateTypes
platformBrowserDynamic().bootstrapModule(AppModule);
And the DynamicComponent is made of the Angular2ShemaForm.
These modules were bundled as commonjs1 library.
In 435390345e4f983521473964e609a202214da75b I updated it so that it is bundled as commonjs2 so that it uses module.exports
instead of exports
. Can you update your dependencies and see if it solves your problem ?
I took the latest version of angular2-schema-form and integrated with my project again. But got these two errors now:
1) Run time error: XHR error (404 Not Found) loading http://localhost:5555/node_modules/lodash.get.js Error loading http://localhost:5555/node_modules/lodash.get.js as "lodash.get" from http://localhost:5555/node_modules/angular2-schema-form/dist/index.js
2) Compile time errors: I have set "noImplicitAny": false in tsconfig.json.
dist/src/schema-form/model/formproperty.d.ts(49,23): error TS7006: Parameter 'FormProperty' implicitly has an 'any' type.
dist/src/schema-form/model/formproperty.d.ts(49,37): error TS7006: Parameter 'string' implicitly has an 'any' type.
dist/src/schema-form/model/formproperty.d.ts(50,32): error TS7006: Parameter 'FormProperty' implicitly has an 'any' type.
This issue has been reported in this pull request. This seems to be linked to npm not downloading nested dependencies. I will dig into this soon but as a temporary solution you can install the 'validator' and 'lodash.get' modules yourself:
npm install -D lodash.get
npm install -D validator
Even after installing the above getting the same error. The runtime is looking for lodash.get.js, however in the node modules of lodash.get, there is only index.js.
@anupamarachuri this is an angular2-seed topic (I'm using it, too). There are libraries that need extra effort to make it work like angular2-schema-form. I got it working by extending tools/config/project.config.ts as follows:
const lodashGet = {
main: 'index.js',
defaultExtension: 'js'
};
this.SYSTEM_BUILDER_CONFIG.packages['lodash.get'] = lodashGet;
this.SYSTEM_CONFIG_DEV.packages['lodash.get'] = lodashGet;
After that, the development server needs to be restarted. I'm using an older version of angular2-seed and thus I'm not 100% sure whether SYSTEM_BUILDER_CONFIG and SYSTEM_CONFIG_DEV still have the same name. I see that they also have an example for lodash in their own project.config.ts: https://github.com/mgechev/angular-seed/blob/master/tools/config/project.config.ts
At least you have some idea where too look for a solution...
Angular version is now 9, this is not an issue anymore
Hi @kiorky / @ebrehault / @regilero / @jpoliva / @samaradona
I am trying to integrate with a normal Angular 2 project but am getting error when I am trying to add:
import { disableDeprecatedForms, provideForms} from "@angular/forms" import { WidgetRegistry } from "angular2-schema-form";
bootstrap: [AppComponent,[disableDeprecatedForms(),provideForms(),WidgetRegistry]]
My current project is just a seed project of Angular 2: https://github.com/mgechev/angular2-seed
My requirement is to have some pages dynamic and some pages static. So I tried both bootstrapping inside the the about.module.ts and also inside the app.module.ts
I am pretty new to Angular 2 and not able to find out why the integration is not working. Could you please help in integrating this?
Thank you!