ng add @angular/pwa cannot find AppModule if imported through index.ts
- 主要語言
- TypeScript
- 星號
- 27k
- 分支
- 11.8k
- 平均合併
- 14 小時 23 分鐘
- 30 天內合併 PR
- 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 開始,接著透過 updateAppModule 追蹤其在 packages/schematics/angular/service-worker/index.ts 中的使用。使用一個透過 app/index.ts 重新匯出的 AppModule 和 ng add @angular/pwa 重現;當間接匯入解析到實際的模組檔案,而不是嘗試更新 /src/app.ts 時,即表示完成。
由索引模型根據 Issue 內容生成。
評估
- 技術堆疊
- angular, typescript
- 領域
- cli
- Issue 類型
- 缺陷
- 難度
- 3/5
- 預估耗時
- 1-2 天
- 活躍度
- 停滯
- 描述清晰度
- 描述清楚
- 新手友好度
- 55/100