Repository navigation
ng add @angular/pwa cannot find AppModule if imported through index.ts #11499
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.tsin 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.
This method is called by updateAppModule from
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.
Activity
bogacg commentedon Jul 13, 2018
I had similar problem. In my case I'm using tsconfig path mapping and reference
AppModulein main.ts with that reference: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 expectedmadmath03 commentedon Jul 19, 2018
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 commentedon Oct 2, 2018
it also doesn't find it if you have alias for imports
kasir-barati commentedon Jun 20, 2022
Is this issue abandoned @kyliau? I faced in 2022. After 2 years this issue still exists 🤒?
You can reproduce the issue in this repo. Just do
ng add @angular/materialBTW I hope this issues resolve. @angular-robot