How to add ngx-restangular to angular-seed?

Question

I have a skeleton application build with mgechev/angular-seed and 2muchcoffeecom/ngx-restangular. I would like to integrate them but I cannot find out the solution how to do it.

Before I successfully add few packages to project.config.ts simply following angular-seed documentation.

Here is a piece of configuration that works fine:

...
  # tools/config/project.config.ts 

  let additionalPackages: ExtendPackages[];
  additionalPackages = [ {
      name: 'angular2-jwt',
      path: 'node_modules/angular2-jwt',
      packageMeta: {
          defaultExtension: 'js',
      }
  }, {
      name: 'ngx-progressbar',
      path: 'node_modules/ngx-progressbar/bundles/ngx-progressbar.umd.js',
  }, {
      name: 'ng2-charts',
      path: 'node_modules/ng2-charts/bundles/ng2-charts.umd.min.js'
  }, {
      name:'ngx-bootstrap',
      path:'node_modules/ngx-bootstrap/bundles/ngx-bootstrap.umd.min.js'
  }, {
      name:'ngx-bootstrap/*',
      path:'node_modules/ngx-bootstrap/bundles/ngx-bootstrap.umd.min.js'
  }, {
      name:'ng2-select-compat',
      path:'node_modules/ng2-select-compat/bundles/ng2-select-compat.umd.min.js'
  }, {
      name:'ngx-avatar',
      path:'node_modules/ngx-avatar/ngx-avatar.umd.js'
  }];
...

But when I'm trying to add ngx-restangular:

...
# tools/config/project.config.ts 

const additionalPackages: ExtendPackages[] = [
    {
        name: 'ngx-restangular',
        path: 'node_modules/ngx-restangular/dist/esm/src/',
        packageMeta: {
            defaultExtension: 'js',
            main: './index.js',
        }
    }];
...

Application throws an error:

(index):60 SyntaxError: Unexpected token < at eval (<anonymous>)

In the browser network tab I can see that ngx-restangular files are loading:

index.js
ngx-restangular.module.js
ngx-restangular.js
ngx-restangular-http.js
ngx-restangular.config.js
ngx-restangular-config.factory.js
ngx-restangular-helper.js

Link to Github repository. To run it in your local env, please simply clone/fork and npm install && npm start

Link configuration file project.config.ts

@AlfMoh `node_modules/ngx-restangular/dist/esm/src//index.js` https://gist.github.com/tulik/a916e0774d343a0c5592b09bf7c613b4 — Łukasz D. Tulikowski, Dec 16 '17 at 15:41

score 2 · Answer 1 · answered Dec 19 '17 at 15:43

2

From looking at this:

Error: SyntaxError: Unexpected token <

It seems its trying to parse a html 404 response. Its quite possible its trying to access a file that it cannot locate. I see you are using .umd.js. Is this correctly configured within your config file? Something like this:

additionalPackages.forEach(function (pkgName) {
 packages['@angular/' + pkgName] = { main: 'bundle/'+ pkgName + '.umd.js', defaultExtension: 'js' };
}

The link i passed in here maybe of some help also. Hope this helps!

answered Dec 19 '17 at 15:43

ShaneG

1,498
7
16

1

Unfortunately there is no `umd.min.js` file for ngx-restangular. Solution with path `node_modules/ngx-restangular/dist/esm/src/` is loading `ngx-restangular` files. In compiled JS file https://gist.github.com/tulik/9d1e4ea5201e48abfbd8d1c5e861f193 it can't find `var rxjs_1 = require("rxjs");` which seems to be defined in `angular-seed` here: https://github.com/mgechev/angular-seed/blob/master/tools/config/seed.config.ts#L609 – Łukasz D. Tulikowski Dec 22 '17 at 12:11

How to add ngx-restangular to angular-seed?

1 Answers1