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

[madmath03]

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

### The log given by the failure
<!-- Normally this include a stack trace and some more information. -->

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.

[bogacg]

I had similar problem. In my case I'm using tsconfig path mapping and reference AppModule in main.ts with that reference:

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

I get the same type of error: Could not read file (/src/@app/app.module.ts).

Changing back only that reference to import { AppModule } from './app/app.module'; in main.ts results execution of ng add @angular/pwa as expected

[madmath03]

We went for the same solution of import { AppModule } from './app/app.module';.

Knowing this workaround makes the issue less critical but it's still a bit weird to be forced to do this just to add a component 😉

[cedvdb]

it also doesn't find it if you have alias for imports

[kasir-barati]

Is this issue abandoned @kyliau? I faced in 2022. After 2 years this issue still exists :face_with_thermometer:?

You can reproduce the issue in this repo. Just do ng add @angular/material

BTW I hope this issues resolve. @angular-robot