Hacktoberfest 2026:メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

ng add @angular/pwa cannot find AppModule if imported through index.ts

オープン
#11,499 コメント 4 件 リアクション 3 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
3/5
見積もり時間
1〜2日
初心者へのやさしさ
55/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
停滞
技術スタック
angular, typescript
領域
cli

調査の方向性

packages/schematics/angular/utility/ng-ast-utils.ts の findBootstrapModulePath から開始し、続いて packages/schematics/angular/service-worker/index.ts での updateAppModule による使用箇所を追ってください。app/index.ts を介して再エクスポートされた AppModule と ng add @angular/pwa を使って再現します。間接的な import が /src/app.ts の更新を試みるのではなく、実際のモジュールファイルに解決されれば完了です。

索引モデルが issue の本文から書いたものです。

説明

area: @angular/pwa freq1: low severity3: broken type: bug/fix
Bug Report or Feature Request (mark with an x)
- [x] bug report -> please search issues before submitting
- [ ] feature request
Area
- [ ] devkit
- [x] schematics
Versions
$ node --version
v8.11.2
$ npm --version
5.6.0
Repro steps
  • Create an Angular 6 application
  • If not present, create a index.ts in the App module folder with at least the following content:
export * from './app.module';
  • In the main.ts, import the App module indirectly by using its parent folder:
import './polyfills.ts';

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';
import { AppModule } from './app'; // works because ./app/index.ts exports AppModule

if (environment.production) {
    enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);
  • Now use angular CLI to add PWA
$ ng add @angular/pwa --project <your-project-name-from-angular-json>
The log given by the failure
Installing packages for tooling via npm.

+ @angular/pwa@0.6.8
updated 1 package in 11.487s
Installed packages for tooling via npm.
Could not read file (/src/app.ts).
Desired functionality

Make PWA install work even when importing the AppModule indirectly (through an index.ts).

To be more accurate, the findBootstrapModulePath function from ng-ast-utils.d.ts should properly identify the AppModule path in this setup.
https://github.com/angular/angular-cli/blob/44086c60ff1d6c26d30850bef125120f6c498ac1/packages/schematics/angular/utility/ng-ast-utils.ts#L49

This method is called by updateAppModule from https://github.com/angular/angular-cli/blob/8ce5ef48b81af484c37123d36422b3c58ddc1ffd/packages/schematics/angular/service-worker/index.ts#L99

The failure occurs when trying to update the content of a file which does not exists. Checking the file exists and displaying a better message would also help.

Mention any other details that might be useful

The issue was encountered when attempting to add PWA to our NGXP Seed web side.

$ git clone https://github.com/Monogramm/ngxp-seed.git
$ git checkout develop
$ ng add @angular/pwa --project web

Since we managed to find out the root cause, the workaround of using the complete path will be used for now.

主要言語
TypeScript
スター
27k
フォーク
11.8k
平均マージ
17時間 25分
マージ済み PR(30日)
183

コントリビューションガイド

コントリビューションガイドを開く

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

angular/angular-cli のほかの issue

angular/angular-cli の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。