Can't use external dependencies in Angular2

0
votes

I've created an Angular2 project with Angular-CLI but when I try to install external dependencies the compiler doesn't move the folder from node_modules to dist/vendor.

This is what I've done:

$ npm install --save angular2-google-maps
$ ng serve

My component file:

import {Component} from 'angular2/core';
import {ANGULAR2_GOOGLE_MAPS_DIRECTIVES} from 'angular2-google-maps/core';

@Component({
  selector: 'contact',
  templateUrl: 'app/components/contact/contact.html',
  styleUrls: ['app/components/contact/contact.css'],
  providers: [],
  directives: [ANGULAR2_GOOGLE_MAPS_DIRECTIVES],
  pipes: []
})
export class Contact {
  lat: number = 51.678418;
  lng: number = 7.809007;
  constructor() {}
}

when I run ng serve and go to the web browser I get the following error:

Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:4200/angular2-google-maps/core

3
dependency-injectiontypescriptangular

3 Answers

0
votes

As written in the guidelines : https://angular-maps.com/docs/getting-started.html#package-installation

  • have you include the script as followed ?

<!-- ## ADD THE FOLLOWING LINE ## --> <script src="node_modules/angular2-google-maps/bundles/angular2-google-maps.js"></script>

  • have you injected the script as followed ?

bootstrap(AppComponent, [ANGULAR2_GOOGLE_MAPS_PROVIDERS]);

0
votes

The compiler moves any folder from src to dist. I’ve created a new folder in src called vendor with the external library so when the compiler moves this folder to dist, src/vendor merges with dist/vendor and the external library is now accesible.

I’ve also added the <script> reference. Now it works!

0
votes

I had the same issue and solved it by adding the following line to the packages configuration in system-config.ts:

/** User packages configuration. */
const packages: any = {
    'angular2-google-maps': { defaultExtension: 'js' }
};