angular / angular/angular-cli

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

Open
#11,499 4 comments 3 reactions 0 assignees View on GitHub
area: @angular/pwa freq1: low severity3: broken type: bug/fix
Dominant language
TypeScript
Stars
27k
Forks
11.8k
Avg merge
14h 23m
Merged PRs (30d)
162

Description

### 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.

Contributor guide

Open the contributing guide

Research direction

Start in packages/schematics/angular/utility/ng-ast-utils.ts at findBootstrapModulePath, then follow its use in packages/schematics/angular/service-worker/index.ts by updateAppModule. Reproduce with an AppModule re-exported through app/index.ts and ng add @angular/pwa; done means the indirect import resolves to the real module file instead of attempting to update /src/app.ts.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
cli
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.