Using angular2-google-maps in conjunction with an Angular2 application

I have successfully integrated the angular2-google-map with my angular2 application.

Below is the content of app.module.ts file:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';
import { AgmCoreModule} from 'angular2-google-maps/core';
@NgModule({
  imports:      [ BrowserModule, AgmCoreModule.forRoot({apiKey: 'AIzaSyAe3ci9yavJcWt7MaJE8DusAuZo-QeRqkU'}) ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ],
})
export class AppModule { }

In order to install angular2-google-maps, I used the following command:

npm install angular2-google-maps --save

The installation was successful. However, when I try to run the application using npm start, an error is encountered:

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

Although the angular2-google-maps folder exists within the node_modules directory, I am facing this issue. Can anyone assist me in resolving it?

Answer №1

You may have forgotten to include the map for system.config.js

'angular2-google-maps/core': 'npm:angular2-google-maps/core/core.umd.js'

By adding the above code snippet to your systemjs configuration, the module loader will be able to properly load core.umd.js when you attempt to import angular2-google-maps/core.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular Iframe Integration

I was attempting to add an iframe into my angular application, but I noticed that the iframe appears very small. Here is an example of what I mean: https://stackblitz.com/edit/angular-iframe-src?file=src%2Fapp%2Fapp.component.html Is there a way for me t ...

The error message "TypeError: 'results.length' is not an object" occurred within the Search Component during evaluation

Having trouble with a search feature that is supposed to display results from /api/nextSearch.tsx. However, whenever I input a query into the search box, I keep getting the error message TypeError: undefined is not an object (evaluating 'results.lengt ...

What exactly is happening with this Plunkr code?

When variables or expressions are used within brackets [] in Angular, what is the scope of these variables? In the Plunkr code provided below, the variable helloWorld is defined in the rio-app but utilized in the rio-hello. Does Angular search all the way ...

The ngx-translate/core is throwing an error message that says: "HttpClient provider not found!"

I recently downloaded the ngx-translate/core package and have been diligently following the provided documentation. However, I'm facing an issue with getting the translations to work. Here are the steps I've taken: 1] Definition in the AppModul ...

Chaining based on conditions in JavaScript and TypeScript

How can I conditionally add a function to a chain in JavaScript? For instance, if modifier is true, I want myKey to be required using Joi.string().required(). If it is false, then just use Joi.string(): function customJoi(modifier) { return Joi.object({ ...

What is the proper method for utilizing an object as a dependency when using useEffect?

Currently, I am in the process of developing a react hook that takes in a query object. export function useMyQuery(query: QueryObjectType) { React.useEffect(executeQuery, [ query ]); // ... } Unfortunately, whenever my hook is called during a re- ...

The issue with transferring state does not seem to be resolved in Angular 17, causing problems with APIs being accessed

During my project, I successfully implemented SSR and the transfer state feature on Angular 15 version. The APIs were called from the server side without any issues. However, when I migrated to Angular 17, I encountered a problem where the transfer state n ...

Having trouble locating the TypeScript compiler in Visual Studio 2017?

In an attempt to develop an application in Visual Studio using TypeScript, I meticulously followed the instructions outlined here and proceeded to install the necessary TypeScript compiler for version 2.2 of the project via NPM. npm install typescript ...

What is the process for displaying all items within an object in Ionic 3?

Perhaps my question is not very clear, but what I am attempting to do is when the Feed item in the categories screen is clicked, all companies related to Feeding will be listed on the companies screen. I am quite confused because each category may have mu ...

The importation of TypeScript source modules is not compiled accurately in the distribution folder

Currently, I am working on a REST API in TypeScript with the following structure: ├── dist │ ├── index.js │ ├── library.js ├── src │ ├── index.ts │ ├── library.ts ├── node_modules ├── package. ...

How to integrate a function with .NET Core, TypeScript, webpack, and npm module in Visual Studio 2019?

I recently developed a straightforward npm module: lib.js: var myMath = function(a, b){ //this.sum = a + b; return a + b; }; export default myMath; lib.d.ts: export var MyMath: (x: number, y: number) => number; In my package.json file, ...

Declaration files for Typescript ESLint configurations

I've been researching this issue online, but I haven't been able to find any solutions. It could be because I'm not entirely sure what's causing the problem. What I'm trying to do is set a global value on the Node.js global object ...

Can anyone point me to the Angular-2-Release that is located on the https://code.angularjs.org

Word has it that angular 2 has finally made its debut. Personally, I'm not a big fan of relying on npm and bower to automatically load my components. I prefer to keep my dependencies minimal and fully understand each one. Additionally, I like to utili ...

Pass the previousItem to the click event handler within the *ngFor loop

Could I possibly retrieve the previous value of an item in an *ngFor loop when a specific event like click() is triggered? For instance: <myItem *ngFor="let data of dataList"> <div (click)="onClick(data, prevData)"> </myItem ...

Angular Material 2's md-table component

Currently, I am working on utilizing the Angular Material Table. Within the HTML code snippet provided, we can see: <ng-container cdkColumnDef="userId"> <md-header-cell *cdkHeaderCellDef> ID </md-header-cell> <md-cell *cdkCellDef= ...

Sending an interface object to a custom component using ngFor

I'm facing a challenge with this task. The child component I'm working on includes the following: ChildComponent @Input() record : InterfaceRecord; Where InterfaceRecord is defined as: export interface InterfaceRecord { ti ...

The try-catch statement in Typescript is generating an inconsistent return error

I've encountered an issue with a TypeScript function that is flagging inconsistent return error. The function includes a try block that returns a value and a catch block that throws an error, resulting in the inconsistency. I am struggling to find a w ...

Differentiate between function and object types using an enum member

I'm currently experimenting with TypeScript to achieve narrowed types when dealing with index signatures and union types without explicitly discriminating them, such as using a switch case statement. The issue arises in the code snippet below when at ...

Is it possible to load components lazily without lazy loading modules in Angular?

Lazy loading is a widely used strategy, especially in Angular where it typically applies at the module level. However, can components be lazily loaded as well? Most web tutorials explain how lazy loading works with modules, such as having a main module in ...

enhancing the types of parameters in a function declaration without relying on generics

My goal is to improve developer experience (DX) by expanding the types for parameters in a function signature. I want the tooltip when hovering over the following function to provide more detailed information: type Props = { a: number; }; const func = ( ...