在 Angular 独立项目中找不到“ng add @angular/pwa”引导程序调用

Question

我正在尝试添加 @angular/pwa 但它显示“未找到引导程序调用”。值得一提的是，我删除了app.module.ts并且我在每个地方都使用独立组件，例如组件，现在不存在模块。所以，现在我的应用程序从main.ts如下所示开始引导，

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

我创建了一个临时的 app.module 安装 pwa，然后将更改从 app.module 移至 main.ts：

暂时编辑main.ts并添加app.module：

src/main.ts

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

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

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

应用程序/应用程序模块.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

将 app.module.ts 的更改复制到 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'
    })),

删除app.module并恢复main.ts