404 Error with /node_modules/pdfjs-dist/build/pdf.combined during npm start

[samuelzhong]

I am getting this error during npm start without .js extension - but the pdf.combined.js is in that directory.
if I added "pdf.combined" with ".js" in node_modules/ng2-pdf-viewer/dist/pdf-viewer.component.min.js, the app can start.

Please kindly advise the issue.

Thanks!

16.08.27 18:40:16 404 GET /node_modules/pdfjs-dist/build/pdf.combined

[VadimDez]

@samuelzhong, Are you using Webpack or SystemJS?
Thank you!

[samuelzhong]

I am using SystemJS. thanks!

[VadimDez]

@samuelzhong Could you specify what do you have in start script ?

[samuelzhong]

I added in :

'ng2-pdf-viewer': 'node_modules/ng2-pdf-viewer',
'pdfjs-dist': 'node_modules/pdfjs-dist'

and
'ng2-pdf-viewer': { main: 'dist/pdf-viewer.component.min.js'}

in map and packages as below.

/**

• System configuration for Angular 2 samples
• Adjust as necessary for your application needs.
  */
  (function(global) {
  // map tells the System loader where to look for things
  var map = {
  'app': 'app', // 'dist',
  '@angular': 'node_modules/@angular',
  'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
  'rxjs': 'node_modules/rxjs',
  'ng2-modal': 'node_modules/ng2-modal',
  'ng2-pdf-viewer': 'node_modules/ng2-pdf-viewer',
  'pdfjs-dist': 'node_modules/pdfjs-dist'
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
  'app': { main: 'main.js', defaultExtension: 'js' },
  'rxjs': { defaultExtension: 'js' },
  'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
  "ng2-modal": { main: 'index.js', defaultExtension: 'js' },
  'ng2-pdf-viewer': { main: 'dist/pdf-viewer.component.min.js'}
  };
  var ngPackageNames = [
  'common',
  'compiler',
  'core',
  'forms',
  'http',
  'platform-browser',
  'platform-browser-dynamic',
  'router',
  'router-deprecated',
  'upgrade',
  ];
  // Individual files (~300 requests):
  function packIndex(pkgName) {
  packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
  }
  // Bundled (~40 requests):
  function packUmd(pkgName) {
  packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
  }
  // Most environments should use UMD; some (Karma) need the individual index files
  var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
  // Add package entries for angular packages
  ngPackageNames.forEach(setPackageConfig);
  var config = {
  map: map,
  packages: packages
  };
  System.config(config);
  })(this);

[VadimDez]

@samuelzhong add 'pdfjs-dist': { defaultExtension: 'js' } to your packages in your system-config, so that it looks like this:

const packages: any = {
  'ng2-pdf-viewer': { main: 'dist/pdf-viewer.component.min.js', defaultExtension: 'js' },
  'pdfjs-dist': { defaultExtension: 'js' }
};

[rohan2934]

i am getting the error while adding ng2-pdf-viewer component and i am using SystemJS.

and my SystemJs file code is.

'@angular/common': 'node_modules/@angular/common/bundles/common.umd.js',
'@angular/compiler': 'node_modules/@angular/compiler/bundles/compiler.umd.js',
'@angular/core': 'node_modules/@angular/core/bundles/core.umd.js',
'@angular/forms': 'node_modules/@angular/forms/bundles/forms.umd.js',
'@angular/http': 'node_modules/@angular/http/bundles/http.umd.js',
'@angular/platform-browser': 'node_modules/@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/router': 'node_modules/@angular/router/bundles/router.umd.js',

  '@angular/common/testing': 'node_modules/@angular/common/bundles/common-testing.umd.js',
  '@angular/compiler/testing': 'node_modules/@angular/compiler/bundles/compiler-testing.umd.js',
  '@angular/core/testing': 'node_modules/@angular/core/bundles/core-testing.umd.js',
  '@angular/http/testing': 'node_modules/@angular/http/bundles/http-testing.umd.js',
  '@angular/platform-browser/testing':
    'node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js',
  '@angular/platform-browser-dynamic/testing':
    'node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
  '@angular/router/testing': 'node_modules/@angular/router/bundles/router-testing.umd.js',

  'app/*': '/app/*',
  // For test config
  'dist/dev/*': '/base/dist/dev/*',
  '*': 'node_modules/*',
  'moment': `node_modules/moment/moment.js`,
  'ng2-pdf-viewer': { main: 'dist/pdf-viewer.component.min.js', defaultExtension: 'js' },
  'pdfjs-dist': 'node_modules/pdfjs-dist',
  'ng2-select': 'node_modules/ng2-select/ng2-select.js',    
  'ng2-pagination': 'node_modules/ng2-pagination/dist/ng2-pagination.js',  
  'traceur': 'node_modules/traceur/src/traceur.js',

[VadimDez]

@rohan2934 According to your configuration node_modules/ng2-pdf-viewer/ is missing...

  'moment': `node_modules/moment/moment.js`,
  'ng2-pdf-viewer': { main: 'dist/pdf-viewer.component.min.js', defaultExtension: 'js' },
  'pdfjs-dist': 'node_modules/pdfjs-dist',
  'ng2-select': 'node_modules/ng2-select/ng2-select.js',    
  'ng2-pagination': 'node_modules/ng2-pagination/dist/ng2-pagination.js',  
  'traceur': 'node_modules/traceur/src/traceur.js',

instead of

  'ng2-pdf-viewer': { main: 'dist/pdf-viewer.component.min.js', defaultExtension: 'js' },

try this:

  'ng2-pdf-viewer': { main: 'node_modules/ng2-pdf-view/dist/pdf-viewer.component.min.js', defaultExtension: 'js' },

[rohan2934]

thank you @VadimDez it works..