I installed angular2-recaptcha in my project ().

I have added systemjs.config.js:

System.config({
  map: {
    'angular2-recaptcha': 'node_modules/angular2-recaptcha'
  },
  packages: {
    app: {
      format: 'register',
      defaultExtension: 'js'
    },
    'angular2-recaptcha': {defaultExtension: 'js', main:'index'}
  }
});

index.html:

<script src="systemjs.config.js"></script>
<script>
 System.import('app').catch(function(err){
     console.error(err);
 });
</script>

But I am getting this error in browser console:

  Uncaught ReferenceError: System is not defined
    at localhost/:29
piler.es5.js:15996 Uncaught Error: Unexpected module 'ReCaptchaModule' declared by the module 'AppModule'. Please add a @Pipe/@Directive/@Component annotation.
    at syntaxError (piler.es5.js:1690)
    at piler.es5.js:15430
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver.webpackJsonp.../../../piler/@angular/piler.es5.js.CompileMetadataResolver.getNgModuleMetadata (piler.es5.js:15412)
    at JitCompiler.webpackJsonp.../../../piler/@angular/piler.es5.js.JitCompiler._loadModules (piler.es5.js:26795)
    at JitCompiler.webpackJsonp.../../../piler/@angular/piler.es5.js.JitCompiler._pileModuleAndComponents (piler.es5.js:26768)
    at JitCompiler.webpackJsonp.../../../piler/@angular/piler.es5.js.JitCompilerpileModuleAsync (piler.es5.js:26697)
    at PlatformRef_.webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_._bootstrapModuleWithZone (core.es5.js:4536)
    at PlatformRef_.webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_.bootstrapModule (core.es5.js:4522)
    at Object.../../../../../src/main.ts (main.ts:11)

Please help me! Where is my mistake?

I installed angular2-recaptcha in my project (https://github./xmaestro/angular2-recaptcha).

I have added systemjs.config.js:

System.config({
  map: {
    'angular2-recaptcha': 'node_modules/angular2-recaptcha'
  },
  packages: {
    app: {
      format: 'register',
      defaultExtension: 'js'
    },
    'angular2-recaptcha': {defaultExtension: 'js', main:'index'}
  }
});

index.html:

<script src="systemjs.config.js"></script>
<script>
 System.import('app').catch(function(err){
     console.error(err);
 });
</script>

But I am getting this error in browser console:

  Uncaught ReferenceError: System is not defined
    at localhost/:29
piler.es5.js:15996 Uncaught Error: Unexpected module 'ReCaptchaModule' declared by the module 'AppModule'. Please add a @Pipe/@Directive/@Component annotation.
    at syntaxError (piler.es5.js:1690)
    at piler.es5.js:15430
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver.webpackJsonp.../../../piler/@angular/piler.es5.js.CompileMetadataResolver.getNgModuleMetadata (piler.es5.js:15412)
    at JitCompiler.webpackJsonp.../../../piler/@angular/piler.es5.js.JitCompiler._loadModules (piler.es5.js:26795)
    at JitCompiler.webpackJsonp.../../../piler/@angular/piler.es5.js.JitCompiler._pileModuleAndComponents (piler.es5.js:26768)
    at JitCompiler.webpackJsonp.../../../piler/@angular/piler.es5.js.JitCompiler.pileModuleAsync (piler.es5.js:26697)
    at PlatformRef_.webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_._bootstrapModuleWithZone (core.es5.js:4536)
    at PlatformRef_.webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_.bootstrapModule (core.es5.js:4522)
    at Object.../../../../../src/main.ts (main.ts:11)

Please help me! Where is my mistake?

• javascript
• angular
• typescript

1 Answer 1

You need to load SystemJS library, not only the config:

<script src="systemjs/dist/system.js"></script>   <---------------------
<script src="systemjs.config.js"></script>
<script>
    System.import('app').catch(function(err){ console.error(err); });
</script>

Also, System usage is deprecated, use SystemJS whereSystem is global object is expected, for example instead of System.import useSystemJS.import.