Set folders to Build Ionic project for WWW

Ionic Framework Ionic Angular
1

I want to generate the Build for my web page with Ionic, as being my first page, I’m having difficulties in organizing the folders.

I want to save the .map, .js files in an assets / js part, for example, and leave only the index.html in the main folder.

image

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "defaultProject": "app",
  "newProjectRoot": "projects",
  "projects": {
    "app": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "allowedCommonJsDependencies": [
              "lodash",
              "socket.io-client",
              "jquery",
              "flat",
              "rxjs/internal/operators/map"
            ],
            "aot": true,
            "outputPath": "www",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": [
              {
                "glob": "**/*",
                "input": "src/assets",
                "output": "assets"
              },
              {
                "glob": "**/*.svg",
                "input": "node_modules/ionicons/dist/ionicons/svg",
                "output": "./svg"
              },
              "src/manifest.webmanifest"
            ],
            "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "./node_modules/@angular/material/prebuilt-themes/blue-theme.css",
              "src/theme/variables.scss",
              "src/global.scss",
              "src/assets/css/style.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
            ]
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb"
                }
              ],
              "serviceWorker": true,
              "ngswConfigPath": "ngsw-config.json"
            },
            "ci": {
              "budgets": [
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb"
                }
              ],
              "progress": false
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "app:build",
            "ssl": true,
            "sslKey": "./ssl/key.key",
            "sslCert": "./ssl/cert.crt"
          },
          "configurations": {
            "production": {
              "browserTarget": "app:build:production"
            },
            "ci": {
              "progress": false
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "app:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "styles": [
              "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css"
            ],
            "scripts": [],
            "assets": [
              {
                "glob": "favicon.ico",
                "input": "src/",
                "output": "/"
              },
              {
                "glob": "**/*",
                "input": "src/assets",
                "output": "/assets"
              },
              "src/manifest.webmanifest"
            ]
          },
          "configurations": {
            "ci": {
              "progress": false,
              "watch": false
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "tsconfig.app.json",
              "tsconfig.spec.json",
              "e2e/tsconfig.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "app:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "app:serve:production"
            },
            "ci": {
              "devServerTarget": "app:serve:ci"
            }
          }
        },
        "ionic-cordova-build": {
          "builder": "@ionic/angular-toolkit:cordova-build",
          "options": {
            "browserTarget": "app:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "app:build:production"
            }
          }
        },
        "ionic-cordova-serve": {
          "builder": "@ionic/angular-toolkit:cordova-serve",
          "options": {
            "cordovaBuildTarget": "app:ionic-cordova-build",
            "devServerTarget": "app:serve"
          },
          "configurations": {
            "production": {
              "cordovaBuildTarget": "app:ionic-cordova-build:production",
              "devServerTarget": "app:serve:production"
            }
          }
        }
      }
    }
  },
  "cli": {
    "defaultCollection": "@ionic/angular-toolkit",
    "analytics": "820db662-be0f-47e5-8145-605d6529689a"
  },
  "schematics": {
    "@ionic/angular-toolkit:component": {
      "styleext": "scss"
    },
    "@ionic/angular-toolkit:page": {
      "styleext": "scss"
    }
  }
}
2

This raises the question why you would want this?

Consider what is generated as a black box u put on the server.

Besides map files should not exist in your production build as it contains the source. And they wont give your configuration

1 Like
3

Thanks Tommertom,

I understood it is a black box, so can I remove the the .js files? except the files inside of script request?

When I generate the build, using ionic build --prod, the list of files on picture appear.

image
image770×526 85 KB

Whe I try to load this page, appear this fail.

image
image961×558 24.3 KB

4

You should not be removing anything from what is generated. The thing you may touch is the configuration of the build (angular.json for instance) or the flags you pass on. In your case, given limited experience I suspect, I say: do not touch angular.json and don’t try to be smart on what the build generates.

As to the errors, I don’t know what is happening. But one reason can be that your server is not configured properly? How did you serve this? Using ionic serve? Or did you use your own http server?

If you did the latter, then you need to assure the server rewrites all routes to index.html.

The scripts in the script request you are referring to have their own internal referrals to other js files. That is because, a.o. bundles load lazily.

5

Hi @RRVieira,

As suggested by @Tommertom, you should not remove any file generated by an Angular build.

Angular, partition your project in small JS bundle with hashed name (13-es2015.xxxxx), and load them when needed.

the files inside of script request

Will lately request other files.

What i see

From what I’m seeing, I figuring that you’r opening the index.html file in a web browser directly.

That can’t work like that unfortunately :confused: .

When you requesting file on a web page web browser use HTTP protocol.

A web server that will “serve” your files is required to be able to access those files trough HTTP request.

If you look at your screen captures, the only ones that work are those that are served externally [google, facebook]

What I suggest you

If you want to launch your Angular application on a web browser you should rather use ionic serve as explained in Ionic documentation

I’m not full experimented in Ionic (but I know more in Angular) so maybe someone can be more precise on this. But for me the builded application in www folder is only used for generate platform specific app through Cordova or Capacitor.

What I strongly advise you

Change your screen capture it contain your Google tag id, even if it’s easily accessible when inspecting your website, you should rather not expose it in a public forum ;).

6

Hi @Tommertom @GThireau1
I always appreciate the willingness of everyone in the forum to want to help with questions, thank you.

I´m using xampp to load the site, after set the base <base href="http://localhost/isequi/" />
and localhost to the others files, I could load the page.

<script src="http://localhost/isequi/runtime-es2015.6806b70351db134765c1.js" type="module"></script>
<script src="http://localhost/isequi/runtime-es5.6806b70351db134765c1.js" nomodule defer></script>

But I did not find the file that load the i18n json

image
image719×47 2.4 KB

7

Will be good to have the answer to this one

8

For a PWA solution that will run in english and portuguese.

9

These json files are in your src/assets folder?

They should be copied automatically to the bundle

10

They are inside src/asstes.

image

After run ionic build --prod the files was copied.

image

But even with base href set, the location still wrong to load.

image

11

That is not the base href out of the box

I think it is / only

Definitely not www. U changed this yourself?

Check a new project and make sure this is right?

12

I not changed, it was set by default.

image

13

Angular is a very opinionated framework. I think that’s generally a good thing, because web apps are very complicated beasts and it’s remarkably easy to make choices you will regret later when there are so many moving parts.

I would suggest dropping everything you are doing and reading this instead. There is an Angular way to serve localized applications, and it’s much easier to use it instead of trying to reinvent it.

14

I am referring to the base-href in index.html. Not angular.json. The output path is different from the base href.

Not sure what is happening, but it seems we are trying to track down something you changed but forgot about :slight_smile:

15

Friends @rapropos and @Tommertom … Before run ionic build --prod and set the main folder in transloco-root.module.ts and now is working fine.

image
image447×582 45.8 KB

Thanks so much guys