404 issue signature-pad and text-mask about angular

[manishkumar-tudip]

Hey @srinathswaminathan thanks for reaching us.
Which module loader you are using in your stack ?
For "systemjs" module loader you can try with this systemjs config.

`(function (global) {
System.config({
defaultJSExtensions: true,
paths: {
'npm:': 'node_modules/'
},
map: {
app: 'app',
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

  'rxjs':                      'npm:rxjs',
  'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
  'ng2-formio': 'npm:ng2-formio/dist/index.js',
  'ng2-bootstrap': 'npm:ng2-bootstrap',
  'ng2-select': 'npm:ng2-select/bundles',
  'angular2-text-mask': 'npm:angular2-text-mask/dist/angular2TextMask.js',
  'text-mask-core': 'npm:text-mask-core',
  'angular2-signaturepad': 'npm:angular2-signaturepad',
  'signature_pad': 'npm:signature_pad/signature_pad.js',
  'moment': 'npm:moment/moment.js',
  'formiojs': 'npm:formiojs/dist/formio.js',
  'formio-utils': 'npm:formio-utils/src/index.js',
  'lodash': 'npm:lodash',
  'core-js': 'npm:core-js'
},

packages: {
  app: {
    main: './main.js',
    defaultExtension: 'js'
  },
  rxjs: {
    defaultExtension: 'js'
  },
  'angular2-signaturepad': {
    main: 'index.js'
  }
}

});
})(this);`

Let us know if this helps.

[srinathswaminathan]

thank you but now also signaturepad 404 error will occur...

[srinathswaminathan]

any other suggestion.

[manishkumar-tudip]

Please provide more details on the stack you are using and stack trace of the error you are facing. That will help addressing the issue. Thanks again for reaching us.

[srinathswaminathan]

Doc1.docx

[srinathswaminathan]

localhost/:8 GET http://localhost:3000/styles.css
formio.js:11 Uncaught ReferenceError: require is not defined
at formio.js:11
(anonymous) @ formio.js:11
zone.js:1382 GET http://localhost:3000/angular2-signaturepad.js 404 (Not Found)
scheduleTask @ zone.js:1382
ZoneDelegate.scheduleTask @ zone.js:245
Zone.scheduleMacroTask @ zone.js:171
(anonymous) @ zone.js:1405
send @ VM159:3
fetchTextFromURL @ system.src.js:1051
(anonymous) @ system.src.js:1778
ZoneAwarePromise @ zone.js:518
(anonymous) @ system.src.js:1777
(anonymous) @ system.src.js:2806
(anonymous) @ system.src.js:3384
(anonymous) @ system.src.js:3707
(anonymous) @ system.src.js:4099
(anonymous) @ system.src.js:4562
(anonymous) @ system.src.js:4831
(anonymous) @ system.src.js:407
ZoneDelegate.invoke @ zone.js:232
Zone.run @ zone.js:114
(anonymous) @ zone.js:502
ZoneDelegate.invokeTask @ zone.js:265
Zone.runTask @ zone.js:154
drainMicroTaskQueue @ zone.js:401
ZoneTask.invoke @ zone.js:339
(index):26 Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/angular2-signaturepad.js
Error: XHR error (404 Not Found) loading http://localhost:3000/angular2-signaturepad.js
at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:3000/node_modules/zone.js/dist/zone.js:698:29)
at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:265:35)
at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:154:47)
at XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:335:33)
Error loading http://localhost:3000/angular2-signaturepad.js as "angular2-signaturepad" from http://localhost:3000/node_modules/ng2-formio/dist/templates/bootstrap.tpl.build.js
at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:3000/node_modules/zone.js/dist/zone.js:698:29)
at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:265:35)
at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:154:47)
at XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:335:33)
Error loading http://localhost:3000/angular2-signaturepad.js as "angular2-signaturepad" from http://localhost:3000/node_modules/ng2-formio/dist/templates/bootstrap.tpl.build.js
(anonymous) @ (index):26
ZoneDelegate.invoke @ zone.js:232
Zone.run @ zone.js:114
(anonymous) @ zone.js:502
ZoneDelegate.invokeTask @ zone.js:265
Zone.runTask @ zone.js:154
drainMicroTaskQueue @ zone.js:401
ZoneTask.invoke @ zone.js:339
zone.js:1382 GET http://localhost:3000/angular2-signaturepad/signature-pad.js 404 (Not Found)
scheduleTask @ zone.js:1382
ZoneDelegate.scheduleTask @ zone.js:245
Zone.scheduleMacroTask @ zone.js:171
(anonymous) @ zone.js:1405
send @ VM159:3
fetchTextFromURL @ system.src.js:1051
(anonymous) @ system.src.js:1778
ZoneAwarePromise @ zone.js:518
(anonymous) @ system.src.js:1777
(anonymous) @ system.src.js:2806
(anonymous) @ system.src.js:3384
(anonymous) @ system.src.js:3707
(anonymous) @ system.src.js:4099
(anonymous) @ system.src.js:4562
(anonymous) @ system.src.js:4831
(anonymous) @ system.src.js:407
ZoneDelegate.invoke @ zone.js:232
Zone.run @ zone.js:114
(anonymous) @ zone.js:502
ZoneDelegate.invokeTask @ zone.js:265
Zone.runTask @ zone.js:154
drainMicroTaskQueue @ zone.js:401
ZoneTask.invoke @ zone.js:339
zone.js:1382 GET http://localhost:3000/angular2-signaturepad/signature-pad.js 404 (Not Found)
scheduleTask @ zone.js:1382
ZoneDelegate.scheduleTask @ zone.js:245
Zone.scheduleMacroTask @ zone.js:171
(anonymous) @ zone.js:1405
send @ VM159:3
fetchTextFromURL @ system.src.js:1051
(anonymous) @ system.src.js:1778
ZoneAwarePromise @ zone.js:518
(anonymous) @ system.src.js:1777
(anonymous) @ system.src.js:2806
(anonymous) @ system.src.js:3384
(anonymous) @ system.src.js:3707
(anonymous) @ system.src.js:4099
(anonymous) @ system.src.js:4562
(anonymous) @ system.src.js:4831
(anonymous) @ system.src.js:407
ZoneDelegate.invoke @ zone.js:232
Zone.run @ zone.js:114
(anonymous) @ zone.js:502
ZoneDelegate.invokeTask @ zone.js:265
Zone.runTask @ zone.js:154
drainMicroTaskQueue @ zone.js:401
ZoneTask.invoke @ zone.js:339

[manishkumar-tudip]

Please provide your updated systemjs config, it seems like missing configuration for the "angular2-signaturepad".

[srinathswaminathan]

/**

• System configuration
  */
  (function (global) {
  System.config({
  defaultJSExtensions: true,
  paths: {
  // paths serve as alias
  'npm:': 'node_modules/'
  },
  // map tells the System loader where to look for things
  map: {
  // our app is within the app folder
  app: 'app',
  // angular bundles
  // "angular2-jwt": "node_modules/angular2-jwt/angular2-jwt",
  '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
  '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
  '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
  '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
  '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
  '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
  '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
  '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
  'ng2-modal' : 'npm:ng2-modal',

  'ng2-formio' : 'npm:ng2-formio',
  'ng2-bootstrap' : 'npm:ng2-bootstrap',
  //'angular2-text-mask':'node_modules/ng2-formio/angular2-text-mask/dist/angular2TextMask.js',
  //'angular2-signature-pad':'node_modules/ng2-formio/angular2-signature-pad/dist/angular2TextMask.js',

  'ng2-select' : 'npm:ng2-select',
  'formio-utils' : 'npm:formio-utils/src/index.js',
  'formiojs' : 'npm:formiojs/dist/formio.js',
  'core-js' : 'npm:core-js',
  'moment' : 'npm:moment/moment.js',
  'lodash' : 'npm:lodash',

  '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
  '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
  '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
  '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
  '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
  '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
  '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
  '@angular/forms/testing': 'npm:@angular/forms/bundles/forms-testing.umd.js',
  'rxjs':'npm:rxjs',
  'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
  'ng2-toastr' : 'npm:ng2-toastr',
  'angular2-datatable' : 'npm:angular2-datatable',
  'ng2-popover': 'npm:ng2-popover',
  "ng2-dropdown": "npm:ng2-dropdown",
  "integralui-web": "npm:integralui-web",
  'angular2-text-mask': 'npm:angular2-text-mask/dist/angular2TextMask.js',
  'angular2-signaturepad': 'npm:angular2-signaturepad',
  'text-mask-core': 'npm:text-mask-core'

  },

  // packages tells the System loader how to load when no filename and/or no extension
  packages: {
  app: {
  main: './main.js',
  defaultExtension: 'js'
  },

  rxjs: {
  defaultExtension: 'js'
  },
  'lodash':{
  defaultExtension: 'js',
  main: './index.js'
  },
  'angular2-in-memory-web-api': {
  main: './index.js',
  defaultExtension: 'js'
  },
  "ng2-modal": {
  "main": "index.js",
  "defaultExtension": "js"
  },
  'angular2-datatable': {
  main: 'index.js',
  defaultExtension: 'js'
  },
  "ng2-popover": {
  "main": "index.js",
  "defaultExtension": "js"
  },
  "ng2-dropdown": {
  "main": "index.js",
  "defaultExtension": "js"
  },
  'integralui-web': {
  defaultExtension: 'js'
  },
  'angular2-signaturepad': {
  main: 'index.js'
  }

  }
  });
  })(this);

[manishkumar-tudip]

Please update :
'ng2-formio' : 'npm:ng2-formio' to 'ng2-formio': 'npm:ng2-formio/dist/index.js'
and add 'signature_pad': 'npm:signature_pad/signature_pad.js', in map of your systemjs config.

[srinathswaminathan]

issue fixed, ok thank you manishkumar.