"ng add @angular/pwa" 在 angular 独立项目中找不到引导调用

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

我创建了一个安装了pwa的临时app.module，然后将更改从app.modul移动到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));

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

将对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

Answer 2

我在main.ts中的自定义代码也遇到了同样的问题。我将其恢复为默认值，并成功添加了@angular/pwa。

之后，您可以恢复到您的自定义主.ts.