angular / angular/angular-cli

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

オープン
#11,499 コメント 4 件 リアクション 3 件 担当者 0 名 GitHub で見る
area: @angular/pwa freq1: low severity3: broken type: bug/fix
主要言語
TypeScript
スター
27k
フォーク
11.8k
平均マージ
14時間 23分
マージ済み PR(30日)
162

説明

### 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:
```typescript
export * from './app.module';
```
* In the `main.ts`, import the App module indirectly by using its parent folder:
```typescript
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
```

### 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](https://github.com/Monogramm/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.

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

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

調査の方向性

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 の本文から書いたものです。

評価

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

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

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