Trying to integrate with Angular 2 Project - Getting error about ngx-schema-form HOT 12 CLOSED

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.

from ngx-schema-form.

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 :)

from ngx-schema-form.

The Readme and the demo page have been updated and are now describing the step to create a RC6 compatible application. Hope it will help you. :)

from ngx-schema-form.

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 

from ngx-schema-form.

Accidentally closed. Please find my comment above.

from ngx-schema-form.

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 ?

from ngx-schema-form.

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.

from ngx-schema-form.

These modules were bundled as commonjs1 library.
In 4353903 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 ?

from ngx-schema-form.

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.

from ngx-schema-form.

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

from ngx-schema-form.

@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...

from ngx-schema-form.

Angular version is now 9, this is not an issue anymore

from ngx-schema-form.