angular-seed: angular-in-memory-web-api not working

Got it working!!!

The project.config needed another line adding:

this.SYSTEM_CONFIG_DEV.paths['angular2-google-maps/core'] = `${this.APP_BASE}node_modules/angular2-google-maps/core/core.umd.js`;

this.SYSTEM_BUILDER_CONFIG.packages['angular2-google-maps/core'] = {
    main: 'core.umd.js',
    defaultExtension : 'js'
}

Using “core.umd.js” didn’t work during the production build. Changing it to ‘index.js’ works fine.

@mgechev @elemental21 Its definitely something to do with the module.

It looks like the module is having trouble fetching the angular2-google-maps. Its strange because it works fine locally using npm run start. Then when I do a build.prod the build breaks because it can’t find the node module.

In my above code I’ve followed this: http://plnkr.co/edit/YX7W20?p=preview

And in the project.config I have this:

` this.SYSTEM_CONFIG_DEV.paths['angular2-google-maps/core'] = `${this.APP_BASE}node_modules/angular2-google-maps/core/core.umd.js`;

Error I get is:

Error on fetch for angular2-google-maps/core.js at file:///c:/source/myApp/angul r-seed/node_modules/angular2-google-maps/core.js

• Seems like its trying to get the file from “angular2-google-maps/core.js” , could this be the problem?

@elemental21 @mgechev I’ve added your code from above.

I get the same error

@elemental21 Thank you for your help above. I tried a few of those things but still no luck.

This is how I’ve tried to add angular2-google-maps:

This is my seed.config:

  SYSTEM_CONFIG_DEV: any = {
    defaultJSExtensions: true,
    paths: {
      [this.BOOTSTRAP_MODULE]: `${this.APP_BASE}${this.BOOTSTRAP_MODULE}`,
      '@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',


      'angular2-google-maps/core': 'node_modules/angular2-google-maps/core/core.umd.js',


      'app/*': '/app/*',
      // For test config
      'dist/dev/*': '/base/dist/dev/*',
      '*': 'node_modules/*'
    },
    packages: {
    }
  };

  /**
   * The configuration of SystemJS of the application.
   * Per default, the configuration of the `dev` environment will be used.
   * @type {any}
   */
  SYSTEM_CONFIG: any = this.SYSTEM_CONFIG_DEV;

  /**
   * The system builder configuration of the application.
   * @type {any}
   */
  SYSTEM_BUILDER_CONFIG: any = {
    defaultJSExtensions: true,
    base: this.PROJECT_ROOT,
    packageConfigPaths: [
      join('node_modules', '*', 'package.json'),
      join('node_modules', '@angular', '*', 'package.json')
    ],
    paths: {
      // Note that for multiple apps this configuration need to be updated
      // You will have to include entries for each individual application in
      // `src/client`.
      [join(this.TMP_DIR, this.BOOTSTRAP_DIR, '*')]: `${this.TMP_DIR}/${this.BOOTSTRAP_DIR}/*`,
      'dist/tmp/node_modules/*': 'dist/tmp/node_modules/*',
      'node_modules/*': 'node_modules/*',
      '*': 'node_modules/*'
    },
    packages: {
      '@angular/common': {
        main: 'index.js',
        defaultExtension: 'js'
      },
      '@angular/compiler': {
        main: 'index.js',
        defaultExtension: 'js'
      },
      '@angular/core/testing': {
        main: 'index.js',
        defaultExtension: 'js'
      },
      '@angular/core': {
        main: 'index.js',
        defaultExtension: 'js'
      },
      '@angular/forms': {
        main: 'index.js',
        defaultExtension: 'js'
      },
      '@angular/http': {
        main: 'index.js',
        defaultExtension: 'js'
      },
      '@angular/platform-browser': {
        main: 'index.js',
        defaultExtension: 'js'
      },
      '@angular/platform-browser-dynamic': {
        main: 'index.js',
        defaultExtension: 'js'
      },
      '@angular/router': {
        main: 'index.js',
        defaultExtension: 'js'
      },
      'rxjs': {
        main: 'Rx.js',
        defaultExtension: 'js'
      },



      'angular2-google-maps/core': {
        defaultExtension: 'js'
      }



    }
  };

This is my project.config:

import { join } from 'path';

import { SeedConfig } from './seed.config';

/**
 * This class extends the basic seed configuration, allowing for project specific overrides. A few examples can be found
 * below.
 */
export class ProjectConfig extends SeedConfig {

  PROJECT_TASKS_DIR = join(process.cwd(), this.TOOLS_DIR, 'tasks', 'project');

  constructor() {
    super();
    // this.APP_TITLE = 'Put name of your app here';

    /* Enable typeless compiler runs (faster) between typed compiler runs. */
    // this.TYPED_COMPILE_INTERVAL = 5;

    // Add `NPM` third-party libraries to be injected/bundled.
    this.NPM_DEPENDENCIES = [
      ...this.NPM_DEPENDENCIES,
      // {src: 'jquery/dist/jquery.min.js', inject: 'libs'},
      // {src: 'lodash/lodash.min.js', inject: 'libs'},
    ];

    // Add `local` third-party libraries to be injected/bundled.
    this.APP_ASSETS = [
      ...this.APP_ASSETS,
      // {src: `${this.APP_SRC}/your-path-to-lib/libs/jquery-ui.js`, inject: true, vendor: false}
      // {src: `${this.CSS_SRC}/path-to-lib/test-lib.css`, inject: true, vendor: false},
    ];

    this.addPackageBundles({
      name: 'angular2-google-maps/core',
      path: 'node_modules/angular2-google-maps/core/core.umd.js'
    });

    /* Add to or override NPM module configurations: */
    // this.mergeObject(this.PLUGIN_CONFIGS['browser-sync'], { ghostMode: false });
  }

}

This is the error I get:

This is my node modules file structure for angular2-google-maps:

@elemental21 How did you get your third party library added? Could you share your app module file and your seed.config file please ?

I’m struggling to add angular2-google-maps.

This is the issue I made: Really struggling to add angular-google-maps to the build.prod #1592

I’m having trouble getting it in the build.prod and therefore its breaking my build to prod preventing me from releasing. However, My product relies on angular-google-maps.

I’ve npm install the node module and got it working locally using npm run start which is pointing to serve.dev

Any help would be great!

Most likely the issue is related to misconfiguration of the angular-in-memory-web-api bundle.

I’ll take a look at it later today and share with you what I found.