Troubleshooting Problem with Installing Angular2-Google-Maps Component in FountainJS Application

Using the FountainJS Angular2 generator with Typescript and Systems.js has been helpful for scaffolding my project. Check it out here

However, I encountered an issue while trying to add a component to the project. Upon importing {GOOGLE_MAPS_DIRECTIVES}, an error message popped up:

system.src.js:1057 GET http://localhost:3000/node_modules/angular2-google-maps/core/index.js 404 (Not Found)

https://i.sstatic.net/LLlBo.png

I referred to the 'getting started' section on this website and added some code to the jspm.config.js file. However, I couldn't find the angular-cli-build.js file in my project.

Here is a snippet of my jspm.config.js:

SystemJS.config({
  packageConfigPaths: [
    'npm:@*/*.json',
    'npm:*.json',
    'github:*/*.json'
  ],
  map: {
    // Maps configuration
  },
  packages: {
    // Packages configuration
  }
});

Answer №1

If you encounter the error

node_modules/angular2-google-maps/core/index.js 404 (Not Found)
, it could be due to node_modules not being accessible by the web server used with npm run serve.

To resolve this issue and make node_modules available to client code, you can add a route for it in conf/browsersync.conf.js:

  routes: {
    '/node_modules': 'node_modules',

Alternatively, consider using jspm instead of npm to install angular2-google-maps:

jspm install angular2-google-maps

Jspm will then update the jspm.config.js file to ensure proper mapping for angular2-google-maps.

However, after fixing the 404 error, you might encounter a new issue:

system.src.js:123 Uncaught (in promise) Error: (SystemJS) core_1.NgModule is not a function
TypeError: core_1.NgModule is not a function

This could indicate that the latest version of angular2-google-maps may be incompatible with angular2-rc4 installed by generator-fountain-angular2. More information on this compatibility issue can be found here.

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

What makes a pristine form essential in angular at all times?

Here is the code snippet: <form #userForm="ngForm" (ngSubmit)="save(userForm)"> <input type="email" #contactEmail="ngModel" email minlength="2" [(ngModel)]="contactInformation.email" class="form-control" id="contactEmail" name="contactEmail" ...

Verify that the Angular service has been properly initialized

I am currently testing my Angular service using Karma-Jasmine and I need to verify that the loadApp function is called after the service has been initialized. What would be the most effective approach for testing this? import { Injectable, NgZone } from ...

React Query mutation encountered a TS2554 error: Type argument was not valid

I'm a beginner when it comes to TypeScript and I am using react-query. I tried using mutate, but it is causing an error. TS2554: Expected 1-2 arguments, but got 3. interface: interface ChangePassword{ email: string; password: string; conf ...

How to display a modal within a router-link in Vue 3?

Below are buttons with router-links. However, I only want the calculator button to open a modal. When I execute the code provided, all buttons trigger the modal instead of just the calculator button. Output: https://i.sstatic.net/layQ1.png Router-link C ...

Creating an external link in Angular with query parameters

I have created an app where users have their addresses listed, and I want to implement a feature that allows me to open Google Maps when clicking on the address. However, I am currently facing an issue where instead of getting the actual value of {{ this. ...

Is it possible for Typescript interface A to extend B while lacking certain properties from B?

My confusion lies in understanding how TypeScript interfaces function effectively. Here's what I currently have: import type { Socket, Handshake } from 'socket.io'; import type { Session } from './session'; export interface Sessio ...

Unable to send messages despite successful connection through Sockets.io

My Java Server is set up to listen for messages from an Ionic 2 Client using Sockets.io. The server can successfully send messages to the client, but I am facing issues with getting the client to send messages back to the server. For example, when the jav ...

Angular reference numbers vs ngModel

When is it necessary to use [(ngModel)] on an input, and when can I simply use #reference? For instance: <div class="form-group"> <div class="input-group mb-2"> <input type="text" class="form-control" [(ngModel)]="newUser"> < ...

arranging data in html table columns using angular 2

I am facing a challenge where I require each column of a table to be sorted in ascending order every time it is clicked. The sorting logic implemented is a standard JavaScript method. While this method works well in most scenarios, it encounters issues whe ...

Sending Disabled Form Field Input Value in Angular 2 POST Request

I'm working on a form with an email field that I want to populate using interpolation. However, I also want to prevent users from changing the email address once it's displayed. To achieve this, I tried adding the disabled attribute to the input ...

Issues with Google maps are causing multiple maps to malfunction

After incorporating some jquery code to create multiple maps upon window load, I noticed a peculiar issue with the maps - they all display the same location despite having different latitudes and longitudes set. Upon inspecting the code responsible for cr ...

How can I properly customize and expand upon a Material UI ListItem component?

I'm currently working with TypeScript version 3.4.5 and Material UI version 4.2. I have the following code snippet: interface MyItemProps { name: string; value: string; } function Item({ name, value, ...props }: ListItemProps<'li&apo ...

What is the source of the compiler options in tsconfig.json?

Currently utilizing Typescript in NestJs, I have incorporated various packages. However, the specific package responsible for altering these settings remains unknown to me: "checkJs": false, "skipLibCheck": true Is there a method to ...

Leverage the power of TypeScript custom transformer and project reference for enhanced

I am currently working on a project that involves using both project references and custom transformers. The issue I am facing is that project references require the use of TSC for incremental compilation, but when TSC is used, the transformers are not app ...

Move after a specified amount of time

I'm struggling to implement a 6-second redirect in my Angular application that will take users to the homepage. The only resources I've found on this topic are for AngularJS. --------------------UPDATE--------------- Here are my current routes: ...

How can I store the status of checked and unchecked checkboxes in an array of objects using Angular 7?

I have a set of checkboxes with a parent-child structure, and their values are generated dynamically in a loop. When I click the submit button, I want to capture the selected or unselected values in the specified format (as shown in the commented output) ...

Loading an external npm package in Angular 8

I am facing an issue with importing the dragscroll.js package. I have attempted to import it in both the index.html file and angular.json file but keep getting this error message: dragscroll.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND My project ...

How to Add a Rule to an Existing Application Load Balancer Listener using AWS CDK

When I inherited a project, I discovered an application load balancer with a HTTPS Listener that was set up before I began using CDK. This listener currently has 13 rules in place that route requests based on hostname to different fargate instances, with ...

Angular form retains the previous value when saving

I encountered an issue with my form component where it displays previous values instead of updated ones during a save operation. The strange part is that if I close the form and reopen it, the new values are then shown correctly. It seems like the problem ...

The RxJs Observer connected to a websocket only triggers for a single subscriber

Currently, I am encapsulating a websocket within an RxJS observable in the following manner: this.wsObserver = Observable.create(observer=>{ this.websocket.onmessage = (evt) => { console.info("ws.onmessage: " + evt); ...