How to add PWA support in Angular project?

[its-ratikant]

I have created plain Nx workspace with an Angular app in it. How can I add PWA support to this project? I remember without Nx in plain Angular project we can add like this:

ng add @angular/pwa --project *project-name*

Any ways / commands we have in Nx to achieve this?

[brandonroberts]

If you created the workspace with the Angular preset, that command still works the same. If you created an empty workspace and added an Angular application you can install the package and run the schematic manually.

npm install @angular/pwa --save-dev
nx g @angular/pwa:ng-add --project *project-name*

[Captainnik53]

Got same error few days back.
Nx version - 14.2.4

Commands used -
npm install @angular/pwa --save-dev
nx g @angular/pwa:ng-add --project project-name

Tried to uninstall pwa, clear npm cache and installed again but still got the same error. IMHO some dependency in package.json is causing mess with pwa installation generator, due to which it is giving error when updating the files

it only errors on attempts to actually write the files (+1)

[leosvelperez]

There was an issue that was fixed in #10758 and released in v14.3.5. Please migrate to the latest version to get the fix.

[naftaliDigitalowl]

same here:
after nx migrate latest - [email protected]

[naftaliDigitalowl]

the command: npm install @angular/pwa && npx nx g @angular/pwa:ng-add

after installing the packages that the error I'm getting:

[NX] Angular devkit readJsonWorkspace fell back to Nx workspaces logic
[NX] Angular devkit called writeWorkspace, this may have had unintended consequences in angular.json
[NX] Double check angular.json before proceeding
[NX] Angular devkit readJsonWorkspace fell back to Nx workspaces logic
TypeError: this.host.readText is not a function

[olubiyiontheweb]

If you had dependency issues with this, run

npm update
npm install 

that solved it for me.

[hmendezm]

Hi guys,

I am trying to apply pwa but I got the errro below. Does someone have any idea how to make this work?

I have NX version 14.5.10
"@angular/pwa": "^14.2.4",

PS C:\Projects\pivotal> nx g @angular/pwa:ng-add --project dashboard --verbose

>  NX  Generating @angular/pwa:ng-add

[NX] Angular devkit called `writeWorkspace`, this may have had unintended consequences in workspace.json
[NX] Double check workspace.json before proceeding
            adding dependency (@angular/service-worker)
            Updating appmodule
SchematicsException [Error]: Bootstrap call not found
    at findBootstrapModulePath (C:\Projects\pivotal\node_modules\@angular\pwa\node_modules\@schematics\angular\utility\ng-ast-utils.js:66:15)
    at getAppModulePath (C:\Projects\pivotal\node_modules\@angular\pwa\node_modules\@schematics\angular\utility\ng-ast-utils.js:85:32)
    at C:\Projects\pivotal\node_modules\@angular\pwa\node_modules\@schematics\angular\service-worker\index.js:63:64      
    at callRuleAsync (C:\Projects\pivotal\node_modules\@angular\pwa\node_modules\@angular-devkit\schematics\src\rules\call.js:78:24)
    at MergeMapSubscriber.project (C:\Projects\pivotal\node_modules\@angular\pwa\node_modules\@angular-devkit\schematics\src\rules\call.js:70:68)
    at MergeMapSubscriber._tryNext (C:\Projects\pivotal\node_modules\@angular\pwa\node_modules\rxjs\internal\operators\mergeMap.js:67:27)
    at MergeMapSubscriber._next (C:\Projects\pivotal\node_modules\@angular\pwa\node_modules\rxjs\internal\operators\mergeMap.js:57:18)
    at MergeMapSubscriber.Subscriber.next (C:\Projects\pivotal\node_modules\@angular\pwa\node_modules\rxjs\internal\Subscriber.js:66:18)
    at MergeMapSubscriber.notifyNext (C:\Projects\pivotal\node_modules\@angular\pwa\node_modules\rxjs\internal\operators\mergeMap.js:93:26)
    at SimpleInnerSubscriber._next (C:\Projects\pivotal\node_modules\@angular\pwa\node_modules\rxjs\internal\innerSubscribe.js:27:21)

 >  NX   Bootstrap call not found

[hmendezm]

I fixed my issue by commenting on my code in main.ts and adding the following code. After this is applied, I just put it back how was before

// import('./bootstrap') .catch((err) => {throw err;});

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

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

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

I hope this help some one
Best

[andvrz]

This helped, thank you!

[muhammedgaygisiz]

#10678 (comment) solved the issue for me...

[BruceArmstrong007]

hi, tried adding @angular-devkit/schematics as dev dependancy

npm i -D @angular-devkit/schematics

and still showing same errors

NX Generating @angular/pwa:ng-add

[NX] Angular devkit called writeWorkspace, this may have created 'workspace.json' or 'angular.json
[NX] Double check workspace configuration before proceeding
SchematicsException [Error]: Bootstrap call not found
at findBootstrapModulePath (D:\code\Angular\My-Chat\node_modules@angular\pwa\node_modules@schematics\angular\utility\ng-ast-utils.js:66:15)
at getAppModulePath (D:\code\Angular\My-Chat\node_modules@angular\pwa\node_modules@schematics\angular\utility\ng-ast-utils.js:85:32)
at D:\code\Angular\My-Chat\node_modules@angular\pwa\node_modules@schematics\angular\service-worker\index.js:63:64
at callRuleAsync (D:\code\Angular\My-Chat\node_modules@angular-devkit\schematics\src\rules\call.js:78:24)
at MergeMapSubscriber.project (D:\code\Angular\My-Chat\node_modules@angular-devkit\schematics\src\rules\call.js:70:68)
at MergeMapSubscriber._tryNext (D:\code\Angular\My-Chat\node_modules@angular-devkit\schematics\node_modules\rxjs\internal\operators\mergeMap.js:67:27)
at MergeMapSubscriber._next (D:\code\Angular\My-Chat\node_modules@angular-devkit\schematics\node_modules\rxjs\internal\operators\mergeMap.js:57:18)
at Subscriber.next (D:\code\Angular\My-Chat\node_modules@angular-devkit\schematics\node_modules\rxjs\internal\Subscriber.js:66:18)
at MergeMapSubscriber.notifyNext (D:\code\Angular\My-Chat\node_modules@angular-devkit\schematics\node_modules\rxjs\internal\operators\mergeMap.js:93:26)
at SimpleInnerSubscriber._next (D:\code\Angular\My-Chat\node_modules@angular-devkit\schematics\node_modules\rxjs\internal\innerSubscribe.js:27:21)

NX Bootstrap call not found

Pass --verbose to see the stacktrace.

[Emkacf]

@BruceArmstrong007 Did you fix your issue?

[BruceArmstrong007]

will try again, and let u know if i find a solution

[devian02]

I was able to resolve the issue by creating an app.module file (which was missing in my full standalone app):

@NgModule({})
export class AppModule { }

Then I ran the following command: npx nx generate @angular/pwa:pwa --project={project-name}

Next, I moved the ServiceWorkerModule import inside importProvidersFrom in the main.ts file and deleted app.module file.

...

bootstrapApplication(AppComponent, {
  providers: [
    importProvidersFrom(
      ServiceWorkerModule.register('ngsw-worker.js', {
        enabled: true,
        registrationStrategy: 'registerWhenStable:30000'
      }),
    ),
  ],
}).catch((err) => console.error(err));

Finally, after restarting the serve, everything was working as expected.

I hope this solution works for you as well.

[afranzy]

ng-add with peer-legacy-deps.
It will be useful to use ng-add with --legacy-peer-deps.

Adding @angular/pwa to mono repo throws up error
nx g @angular/pwa:ng-add --project client

NX Generating @angular/pwa:ng-add

⠦ Installing packages (npm)...npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: @angular/[email protected]
npm ERR! Found: @angular/[email protected]
npm ERR! node_modules/@angular/cli
npm ERR! dev @angular/cli@"~16.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peerOptional @angular/cli@"^16.1.0" from @angular/[email protected]
npm ERR! node_modules/@angular/pwa
npm ERR! @angular/pwa@"^16.1.1" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: @angular/[email protected]
npm ERR! node_modules/@angular/cli
npm ERR! peerOptional @angular/cli@"^16.1.0" from @angular/[email protected]
npm ERR! node_modules/@angular/pwa
npm ERR! @angular/pwa@"^16.1.1" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR!
npm ERR! For a full report see:
npm ERR! C:\Users\niiam\AppData\Local\npm-cache_logs\2023-06-22T22_56_17_262Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\niiam\AppData\Local\npm-cache_logs\2023-06-22T22_56_17_262Z-debug-0.log
✖ Package install failed, see above.
UnsuccessfulWorkflowExecution [Error]: Workflow did not execute successfully.
at ChildProcess. (C:\Users\niiam\testdev\afranzy-integrated\node_modules@angular-devkit\schematics\tasks\package-manager\executor.js:151:31)
at ChildProcess.emit (node:events:513:28)
at maybeClose (node:internal/child_process:1098:16)
at ChildProcess._handle.onexit (node:internal/child_process:304:5)
The generator workflow failed. See above.

[gwesterman]

Please add support for --legacy-peer-deps, the command won't run otherwise.

[baffioso]

Got it working by using the version of already installed Angular packages along with --legacy-peer-deps:

npm install @angular/pwa@*version* --save-dev --legacy-peer-deps
npx nx g @angular/pwa:ng-add --project *project_name*