[SOLVED] BUG ? Impossible to build a PWA in V4?

Ionic Framework
1

I want to build --prod a PWA with V4. I just installed the blank app, then tried to apply the method described by J.Morony :

ng add @angular/pwa --project app

then

ionic build --prod

Everything looks fine, for adding the pwa :

Installing packages for tooling via npm.                   
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported p
ent: {"os":"win32","arch":"x64"})                          
                                                           
+ @angular/pwa@0.9.0-beta.4                                
updated 1 package and audited 58385 packages in 12.516s    
found 0 vulnerabilities                                    
                                                           
Installed packages for tooling via npm.                    
CREATE ngsw-config.json (441 bytes)                        
CREATE src/manifest.json (1063 bytes)                      
CREATE src/assets/icons/icon-128x128.png (1253 bytes)      
CREATE src/assets/icons/icon-144x144.png (1394 bytes)      
CREATE src/assets/icons/icon-152x152.png (1427 bytes)      
CREATE src/assets/icons/icon-192x192.png (1790 bytes)      
CREATE src/assets/icons/icon-384x384.png (3557 bytes)      
CREATE src/assets/icons/icon-512x512.png (5008 bytes)      
CREATE src/assets/icons/icon-72x72.png (792 bytes)         
CREATE src/assets/icons/icon-96x96.png (958 bytes)         
UPDATE angular.json (5172 bytes)                           
UPDATE package.json (1856 bytes)                           
UPDATE src/app/app.module.ts (992 bytes)                   
UPDATE src/index.html (933 bytes)                          
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported p
ent: {"os":"win32","arch":"x64"})                          
                                                           
audited 58385 packages in 12.567s                          
found 0 vulnerabilities

and for building :

...
chunk {170} 170.7993da7199a1fd2be403.js () 2.82 kB  [rendered]
chunk {171} 171.89d9001dba6de6c5a870.js () 920 bytes  [rendered]

But when I put the www folder in my xampp server, it doesn’t load. Error 404, because these files miss www/ in their adress :

runtime.d5364023e16034fd31a0.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
styles.dd4f43e342edcea1bcac.css:1 Failed to load resource: the server responded with a status of 404 (Not Found)
polyfills.6efa91fd2e376d26b53c.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
main.2b9a5a6535f332f3126a.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
polyfills.6efa91fd2e376d26b53c.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
main.2b9a5a6535f332f3126a.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
/assets/icon/favicon.png:1 Failed to load resource: the server responded with a status of 404 (Not Found)
styles.dd4f43e342edcea1bcac.css:1 Failed to load resource: the server responded with a status of 404 (Not Found)

I also tried just to copy the www folder from a ‘normal’ --prod build (without ng add), the problem is the same…

Is it a bug ? What am I doing wrong ?

My ionic info :

Ionic:

   ionic (Ionic CLI)          : 4.1.2 (C:\Users\User\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.11
   @angular-devkit/core       : 0.8.3
   @angular-devkit/schematics : 0.8.3
   @angular/cli               : 7.0.0-beta.4
   @ionic/ng-toolkit          : 1.0.8
   @ionic/schematics-angular  : 1.0.6

Cordova:

   cordova (Cordova CLI) : 7.0.1
   Cordova Platforms     : none
   Cordova Plugins       : no whitelisted plugins (0 plugins total)

System:

   NodeJS : v8.11.3 (C:\Program Files\nodejs\node.exe)
   npm    : 6.4.1
   OS     : Windows 10
2

Configure your xampp to server the www folder directly or copy the files into your htdocs or whatever is configured to serve the files from.

3

The issue is related to the base Href.

Check out the deployment section of angular’s documentation. I found my answer there.

4

Not appliquable if you want to use a shared server…

I found a solution with the help of danieldugger :

ng build --prod --base-href=/www/

I still think there is a bug here, because the command

ionic build --prod  --base-href=/www/

doesn’t recognise the base href option

1 Like
5

A missing feature is not really a bug, but definitively something you should report at https://github.com/ionic-team/ionic-cli/issues