403 (forbidden) error - Angular 5 with systemjs

[johnlalu]

Bug Report or Feature Request (mark with an x)

- [ ] Regression (a behavior that used to work and stopped working in a new release)
- [x] Bug report -> please search issues before submitting
- [ ] Feature request
- [ ] Documentation issue or request

I am working on setting up ng2-pdf-viewer with angular 5 using systemjs. I get the following error. Fetch error: 403 Forbidden
Instantiating http://localhost:5614/node_modules/ng2-pdf-viewer/bundles

I am attaching a screenshot of the error as well.

The versions I am using:
ng2-pdf-viewer: 4.1.1
pdfjs-dist: 0.1.1
Angular: 5.1.3

The following is my system.config.js. I will attach a text file of that too.

/**

• System configuration for Angular samples

• Adjust as necessary for your application needs.
  */
  (function (global) {
  System.config({
  paths: {
  // paths serve as alias
  'npm:': 'node_modules/',
  'plugin-babel': 'node_modules/systemjs-plugin-babel/plugin-babel.js',
  'systemjs-babel-build': 'node_modules/systemjs-plugin-babel/systemjs-babel-browser.js',
  'systemjs': 'node_modules/systemjs/dist/system.js'
  },
  // map tells the System loader where to look for things
  map: {
  // our app is within the app folder
  'app': 'app',

       // angular bundles
       '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
       '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
       '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
       '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
       '@angular/common/http': 'npm:@angular/common/bundles/common-http.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/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
       '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
       '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
       '@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js',
       '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
       '@angular/cdk': 'npm:@angular/cdk/bundles/cdk.umd.js',
       '@angular/cdk/a11y': 'npm:@angular/cdk/bundles/cdk-a11y.umd.js',
       '@angular/cdk/accordion': 'npm:@angular/cdk/bundles/cdk-accordion.umd.js',
       '@angular/cdk/bidi': 'npm:@angular/cdk/bundles/cdk-bidi.umd.js',
       '@angular/cdk/coercion': 'npm:@angular/cdk/bundles/cdk-coercion.umd.js',
       '@angular/cdk/collections': 'npm:@angular/cdk/bundles/cdk-collections.umd.js',
       '@angular/cdk/keycodes': 'npm:@angular/cdk/bundles/cdk-keycodes.umd.js',
       '@angular/cdk/layout': 'npm:@angular/cdk/bundles/cdk-layout.umd.js',
       '@angular/cdk/observers': 'npm:@angular/cdk/bundles/cdk-observers.umd.js',
       '@angular/cdk/overlay': 'npm:@angular/cdk/bundles/cdk-overlay.umd.js',
       '@angular/cdk/platform': 'npm:@angular/cdk/bundles/cdk-platform.umd.js',
       '@angular/cdk/portal': 'npm:@angular/cdk/bundles/cdk-portal.umd.js',
       '@angular/cdk/table': 'npm:@angular/cdk/bundles/cdk-table.umd.js',
       '@angular/cdk/scrolling': 'npm:@angular/cdk/bundles/cdk-scrolling.umd.js',
       '@angular/cdk/stepper': 'npm:@angular/cdk/bundles/cdk-stepper.umd.js',
       '@angular/cdk/table': 'npm:@angular/cdk/bundles/cdk-table.umd.js',
       '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
       '@angular/material/core': 'npm:@angular/material/bundles/material.umd.js',
       '@angular/material/dialog': 'npm:@angular/material/bundles/material.umd.js',
       '@angular/material/snack-bar': 'npm:@angular/material/bundles/material-snack-bar.umd.js',
       '@angular/material/expansion': 'npm:@angular/material/bundles/material-expansion.umd.js',
       '@angular/material/form-field': 'npm:@angular/material/bundles/material-form-field.umd.js',
       
       // other libraries
       'rxjs': 'npm:rxjs',
       'traceur': 'node_modules/traceur/bin/traceur.js',
       'tslib': 'npm:tslib',
       'moment': 'node_modules/moment',
       'xlsx': 'node_modules/xlsx/dist/xlsx.core.min.js',
       'ng2-pdf-viewer': 'node_modules/ng2-pdf-viewer/bundles',
       'pdfjs-dist': 'node_modules/pdfjs-dist'
   },
   // packages tells the System loader how to load when no filename and/or no extension
   packages: {
       'app': { main: 'main', defaultExtension: 'js' },
       'rxjs': { main: './bundles/rx.js', defaultExtension: 'js' },
       'tslib': { main: 'tslib.js', defaultExtension: 'js' },
       'traceur': { main: 'traceur' },
       'moment': { defaultExtension: 'js' },
       'ng2-pdf-viewer': { defaultExtension: 'js' },
       'pdfjs-dist': { defaultExtension: 'js' },
       '@angular-mdl/core': { main: 'bundle/core.js', defaultExtension: 'js' }
   }
  

  });
  })(this);

system.config.txt

Thank you

[johnlalu]

I've made it past the 403 error issue. Now I am getting the following error.
Error: Module not already loaded loading "pdfjs-dist/build/pdf"

I've tracked it down to this line in the umd file.
window['pdfjs-dist/build/pdf'] = require('pdfjs-dist/build/pdf');

[stefanocke]

@johnlalu , we got beyond this error by setting module format to "cjs".
Not sure, if this is the proper approach... but it seems to convince SystemJS to do the "resolve" the right way...
'ng2-pdf-viewer': { defaultExtension: 'js', format: 'cjs' },

[andrespinov]

I've made it past the 403 error issue. Now I am getting the following error.
Error: Module not already loaded loading "pdfjs-dist/build/pdf"

I've tracked it down to this line in the umd file.
window['pdfjs-dist/build/pdf'] = require('pdfjs-dist/build/pdf');

@johnlalu Hi mate! Do you remember how did you fix the Forbbiden (Error 403) issue?