Trying to integrate with Angular 2 Project - Getting error

[anupamarachuri]

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!

[ebrehault]

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

[fbessou]

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

[anupamarachuri]

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 

[anupamarachuri]

Accidentally closed. Please find my comment above.

[fbessou]

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 ?

[anupamarachuri]

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.

[fbessou]

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 ?

[anupamarachuri]

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.

[fbessou]

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

[anupamarachuri]

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.

[Paladinium]

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

[daniele-pecora]

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