Error message: Unable to locate Bootstrap call in standalone Angular project after executing 'ng add @angular/pwa' command

Having an issue while trying to integrate @angular/pwa, it keeps showing me an error saying "Bootstrap call not found". It's worth mentioning that I have removed app.module.ts and am using standalone components in various places without any module. Currently, my application is bootstraping from main.ts as shown below:

bootstrapApplication(AppComponent, {
  providers: [
    importProvidersFrom(AuthService),
    importProvidersFrom(ErrorHandlerService),
    importProvidersFrom(HttpClientModule),
    importProvidersFrom(
      RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules }),
      BrowserAnimationsModule
    ),
    {
      provide: ErrorHandler,
      useClass: ErrorHandlerService
    }
  ]
}).catch((err) => console.log(err));

Angular Version:
Angular CLI: 14.1.1
Node: 16.16.0
Package Manager: npm 8.15.1 
OS: linux x64

Angular: 14.1.1
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, language-service, material, platform-browser
... platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1401.1
@angular-devkit/build-angular   14.1.1
@angular-devkit/core            14.1.1
@angular-devkit/schematics      14.1.1
@schematics/angular             14.1.1
rxjs                            7.5.5
typescript                      4.6.4

Answer №1

Initially, I set up a temporary app.module with PWA installed and then transferred the changes from app.module to main.ts:

Temporarily edited main.ts and added the app.module content:

src/main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

app/app.module.ts

import {NgModule} from '@angular/core';


@NgModule({
  declarations: [
  ],
  imports: [
  ],
  providers: [
  ],
  bootstrap: []
})
export class AppModule { }



npm install @angular/pwa --save-dev 

nx g @angular/pwa:ng-add --project=champ-ng


CREATE apps/champ-ng/ngsw-config.json
CREATE apps/champ-ng/src/manifest.webmanifest
CREATE apps/champ-ng/src/assets/icons/icon-128x128.png
CREATE apps/champ-ng/src/assets/icons/icon-144x144.png
CREATE apps/champ-ng/src/assets/icons/icon-152x152.png
CREATE apps/champ-ng/src/assets/icons/icon-192x192.png
CREATE apps/champ-ng/src/assets/icons/icon-384x384.png
CREATE apps/champ-ng/src/assets/icons/icon-512x512.png
CREATE apps/champ-ng/src/assets/icons/icon-72x72.png
CREATE apps/champ-ng/src/assets/icons/icon-96x96.png
UPDATE workspace.json
UPDATE apps/champ-ng/src/app/app.module.ts
UPDATE apps/champ-ng/src/index.html

Copied the modifications from app.module.ts to main.ts

importProvidersFrom(ServiceWorkerModule.register('ngsw-worker.js', {
      enabled: !isDevMode(),
      // Register the ServiceWorker as soon as the application is stable
      // or after 30 seconds (whichever comes first).
      registrationStrategy: 'registerWhenStable:30000'
    })),

Removed app.module and reverted main.ts back to its original state

Answer №2

Encountered a similar problem with custom code in main.ts but managed to resolve it by reverting back to the default settings before adding @angular/pwa successfully.

You can then reintroduce your custom main.ts code afterwards.

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

Sequencing code execution correctly in Node.js

I am currently working on a website that consolidates articles based on user interests. Although I have a backend set up, I am struggling to execute the code in the correct sequence. Essentially, my database consists of MongoDB containing user informatio ...

Double submission issue with Angular form (multiple ajax requests)

My controller seems to be causing a form submission issue in AngularJS where the form is being submitted twice via a get request. Upon checking my database and the console network tab, I noticed that two submissions are logged, with the first submission sh ...

Angular 2: Utilizing Http Subscribe Method with "this" Context Pointer

Question: http.request('js/app/config/config.json').subscribe(data => { this.url = data.json().url; }); It seems that "this" is pointing to Subscriber instead of the parent class. I was under the impression that the fat- ...

Running the command "npm start" in ghost (node.js) is causing an error

After successfully installing node.js, I attempted to set up Ghost. However, when running the installation for Ghost using npm install --productions I encountered the following error: > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" da ...

What could be causing my if-else statement to malfunction in JavaScript?

I'm working on a form where certain conditions need to be met based on the selected order type. For instance, if a market order is chosen, the stop price and limit price should default to zero and become read-only fields. Similarly, selecting a limit ...

Is there a way to refresh the current page in Ionic 3 when the browser is reloaded?

I have encountered a problem in my work with an Ionic 3 App. I am looking for a solution where the browser will refresh the current page instead of redirecting me to the home page. Is this achievable? I attempted to solve it using the following code: thi ...

How can I retrieve an array from the server side using AngularJS?

Currently, I'm involved in developing a web application meant for team collaboration. While the login and signup pages have been set up, other members of my team are focusing on the server (built with node.js and express framework) and database aspect ...

Tips on crafting tailored CSS styling for targeted div elements such as before and after:

Looking to style specific div elements with the same class name? <div class="main"> <div class="banner_image"> banner 1</div> <div class="banner_image ">banner 2</div> <div class="banner_image ">banner 3</di ...

What steps can I take to identify and manage a browser's inability to play a media file?

I am currently utilizing a JavaScript utility to stream mp3 content. Unfortunately, there are instances where I direct users to a file that cannot be played due to external factors. In such cases, Firebug displays an error message indicating that the file ...

Experimenting with Cesium using Jasmine (Angular TypeScript)

I have a TypeScript app built using Angular that incorporates Cesium: cesium-container.component.ts import { Component, ElementRef } from '@angular/core'; import { Viewer } from 'cesium'; import { SomeOtherCesiumService } from 'sr ...

Using StencilJs/Jsx: Displaying nested components with rendered HTMLElements

Welcome to my custom component: @Component({ tag: "my-alert-list", styleUrl: "alert-list.scss", shadow: true, }) export class AlertList { @State() alertList: object[] = []; @Method() async appendAlert( type: string, message: string, ...

Add a CSS class to an innerHTML element just a single time

I currently have 2 files available: data.php page.php The data.php file is responsible for fetching a row from a SQL database and sending it to the page.php file. Within the page.php file, there is a JavaScript script that receives this row through AJAX ...

Restrictions on pairings of kind variables within generic utilization

Currently, I am creating a declaration file for a library called chart.js. The process of constructing a new chart involves the following: let chart = new Chart(ctx, { type: 'line', data: ..., options: ... }) The types of the data and options f ...

Extracting information from this array using JavaScript

After struggling for a day, I finally managed to get some output from PHP instead of just the word "array". What a relief! (check out this link for the solution) Basically, this is the data returned from an XMLHTTP request to PHP, handled through a JS ca ...

Typescript | The extension of formikProps on IProps in Typescript is lacking 27 Props

I'm currently working with Formik in TypeScript and I'm trying to integrate a simple form component into TS within another component where I extract the defaultValues and validationSchemas. The challenge lies in accessing only the necessary form ...

Updating classes when useState changes in React JS

I'm currently working on implementing a carousel slider in React. As I track the state to determine the specific class to add based on the state value (e.g., adding "-left-1/3" when the state is 2), everything seems to be functioning correctly. Howeve ...

The mat-select function is malfunctioning and failing to select any options

I am facing an issue with a form that includes a mat-select field. Even though I initialize this field with values fetched from the backend using an API call, the mat-select is not able to select any values from the available options. Despite trying variou ...

Grin schedule module JSON stream

I have integrated a Smile timeline widget on my website and successfully customized it following several tutorials. However, I am struggling to utilize a Json service instead of relying on data stored in a global variable within a JavaScript file. Despite ...

When I try to access localhost, it directs me to http://localhost:3000/myprofile%20 instead of localhost:/3000/myprofile

Every time I try to log into my profile page with the correct login credentials, I get redirected to http://localhost:3000/myprofile%20, but then receive a 404 error. This is what my code looks like: // Login Route router.post('/login', functi ...

What is the best way to incorporate a JavaScript library into my Angular 2 project?

I successfully installed Tween js using npm install tween, but I am unable to import it into my component. The library is located in node_modules/tween. I have tried: import * AS TWEEN from 'tween/tween.js' import {TWEEN} from 'tween&apos ...