Issue: Encounter StaticInjectorError while working with deployed Angular CLI project

We encountered an issue while attempting to deploy our Angular CLI (v.1.7.1) project on GitHub Pages and Firebase, resulting in the same outcome for both platforms.

The ng serve command functions flawlessly on localhost:4200, and everything goes smoothly when executing the production build with 

ng build --prod --base-href "https://<user-name>.github.io/<repo>/"
and ngh. The files are being loaded, but upon opening the application, only a blank index.html is displayed, accompanied by the following error in the console:

main.e17a4a9….bundle.js:1 ERROR Error: StaticInjectorError(Ru)[e -> e]: 
  StaticInjectorError(Platform: core)[e -> e]: 
    NullInjectorError: No provider for e!
    at e.get (main.e17a4a9….bundle.js:1)
    at main.e17a4a9….bundle.js:1
    at e (main.e17a4a9….bundle.js:1)
    at e.get (main.e17a4a9….bundle.js:1)
    at main.e17a4a9….bundle.js:1
    at e (main.e17a4a9….bundle.js:1)
    at e.get (main.e17a4a9….bundle.js:1)
    at Ii (main.e17a4a9….bundle.js:1)
    at main.e17a4a9….bundle.js:1
    at Ni (main.e17a4a9….bundle.js:1)

angularfirebasenpmgithub-pages

Answer №1

When creating your app, make sure to disable the optimization feature:

ng build --prod --optimization=false

By doing this, any errors that occur will be clearly identified rather than simply showing an "e".

Answer №2

If you're currently working with angular version 4.2.4, consider updating it to 4.4.3 in your package.json file and then run npm install.

This simple step may just be the solution to your issue. However, if you are using angular 5, rest assured that this problem has already been reported on Angular CLI of another library, and a fix has been implemented!

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

Gridster2 for Angular: Resolving Overlapping Grid Items during Drag

The Angular version being used is 4.0.0 The angular-gridster2 library version being used is 2.10.0 When dragging the items randomly over other items, they become overlapped (as shown in the image below) The circled numbers represent the number of column ...

angularoverlapangular-gridster2

Encountered an issue while trying to install through npm due to an invalid JSON

Previously, I had npm installed, but I had to uninstall it for some reason. Now, I am trying to reinstall npm in order to create a React app using this command. npx create-react-app ip_tracker During the installation process, I encountered the following ...

node.jsnpmpackage.json

The Foundation CLI is malfunctioning, throwing a ReferenceError stating that primordials are not defined

Running Windows 10 (64 bit) with Node v13.0.1 and npm 6.12.0, I encountered an issue while attempting to install foundation-cli globally. When I run the command "foundation new" or "foundation -v", I receive the error message "ReferenceError: primordials ...

node.jsnpmcommand-line-interfacezurb-foundation

How to install Sails js on an Ubuntu VPS with version 16.04?

I am currently using Sails JS (version 0.12.4) on my local Ubuntu machine with the following versions: node -v = v4.5.0, nodejs -v = v4.5.0, npm -v = 2.15.9, and sudo npm -v = 3.10.0 Everything works fine on my local setup, but I'm having trouble in ...

node.jsubuntunpmsails.jsnvm

Getting the id of a single object in a MatTable

I'm currently working on an angular 8 application where I've implemented angular material with MatTableDatasource. My goal is to retrieve the id from the selected object in my list: 0: {id: "e38e3a37-eda5-4010-d656-08d81c0f3353", family ...

javascriptangulartypescriptangular-material

"Oops, looks like the command you're trying to run

I've successfully installed nodejs using Chris Lea's version with the following commands: sudo add-apt-repository ppa:chris-lea/node.js sudo apt-get update sudo apt-get install nodejs npm Next, I proceeded to install Yeoman, Grunt CLI, and Bowe ...

ubuntunpmyeoman

What is the best way to conceal the parent ul when at the li level?

html component <div class="select-wrapper select"> <input (click)="toggleOptionsView()" type="text" class="select-dropdown" data-activates="select-options-524f0174-3e9b-445a-8bf3-e304572eb476" value="Choose your option"> <ul [n ...

angular

The specified attribute "matListItemTitle" is invalid in this context

Having trouble incorporating a list from Angular Material into an Angular project. WebStorm is showing the error mentioned in the title above. I came across the problem here, but in this scenario, I am unable to use matListItemTitle as a dynamic parameter ...

angularangular-materialwebstorm

The specified Native Component "SRSRadialGradient" could not be located in the UIManager

My goal is to implement the react-native-radial-gradient package in my expo project. Do I have to do anything specific before using it, or is there a compatibility issue that needs to be addressed? ...

react-nativenpmexporadial-gradients

Having trouble installing packages with npm - npm is throwing an error: npm ERR! Unexpected end of input

I'm facing an issue while trying to install React in a new project as Npm is not allowing me to install any modules, not even Express. When attempting to create an app, I encounter the following error: @DESKTOP-AV5KJN8 MINGW64 ~/Documents/CodeProjects ...

node.jsnpm

Ensure that an HTTP post request is successfully completed before proceeding to execute the next HTTP post request within a loop

I have a loop that sends a HTTP post request each time it iterates. for(let i = 1; i < this.data.length; i++) { let arr = this.data[i]; this.http.post('link here', { name: arr[0], gender: arr[1], course: ar ...

node.jsangular

How to set up and utilize an npm (Node.js) module on a Windows 2008 server

Looking for some guidance - how can I fix this issue? Everything is running smoothly on my Windows 7 laptop, but encountering errors on the Windows 2008 server. Here's what's set up: 1. ASP.NET Core App and NodeServices being used on Windows Ser ...

node.jsasp.net-corenpmwindows-server-2008-r2cypress

Vue Page fails to scroll down upon loading

I am facing a challenge with getting the page to automatically scroll down to the latest message upon loading. The function works perfectly when a new message is sent, as it scrolls down to the latest message instantly after sending. I've experimented ...

javascripthtmlfirebasevue.jsdom

In Ionic 2, any modifications made to the data model will only be reflected in the user interface after there is

Q) Why does my data seem to magically appear on the UI after interacting with it, even though I have made changes in the backend? For instance, when fetching and updating data bound to a list, such as: this._LocalStorageService.getClients().then( (data ...

typescriptangularionic2

Setting a binary value for an angular checkbox through user input: a step-by-step guide

As a newcomer to Angular, I am currently in the process of creating a straightforward registration page by following this tutorial. The essential information I need to capture includes the user's email address, username, password, and a binary value i ...

angular

Modifying the onclick event of a button: A guide

Once a user selects the Add button located below the photo, that specific image is to be appended to the table adjacent to the list and subsequently transforms the add button into a REMOVE button. eg. Current status: https://i.stack.imgur.com/8eJoS.png ...

angular

unable to retrieve JSON sub-elements

I encountered an issue while attempting to iterate through the JSON object provided. When trying to access the content-items using page.content-items, I received an error message. Is it possible to access an object that has a key with "-" in its name? Co ...

javascriptjsonangular

ng-bootstrap Datepicker with current date displayed as a placeholder

I have been using ng-bootstrap Datepicker and have implemented it like demonstrated in this example on Plunker. <div class="input-group"> <input class="form-control" placeholder="yyyy-mm-dd" name="dp" [(ngModel)]="model" ngbDatepicker ...

angulardatepickerng-bootstrap

Challenges Encountered when Making Multiple API Requests

I've encountered a puzzling issue with an ngrx effect I developed to fetch data from multiple API calls. Strangely, while some calls return data successfully, others are returning null for no apparent reason. Effect: @Effect() loadMoveList$: Obse ...

javascriptangulartypescriptngrx-effects

Console displays errors upon downloading code from git repository

Having recently downloaded a zip file from git, I extracted all files and opened them in VS Code. Following the instructions in the readme.md file, I attempted to install all dependencies but encountered the following message: npm install up to date, audi ...

reactjsnpm