How to build browser version in Ionic 4

I have just installed Ionic on a new machine. Using the starter template I found no issues about building for the browser platform.

You should try Ionic Cordova run browser

Basically what I did was

npm install ionic cordova -g

ionic start --angular

Gave the project a name (and selected the super template)

changed directory to the project directory

npm install

ionic cordova run browser

and all is working fine

@thorvaldaagaard method, or

update to latest :slight_smile:

@angular-devkit/architect”: “~0.7.2”,
@angular-devkit/build-angular”: “~0.7.2”,
@angular-devkit/core”: “~0.7.2”,
@angular-devkit/schematics”: “~0.7.2”,
@ionic/ng-toolkit”: “^1.0.0”,
@ionic/schematics-angular”: “^1.0.0”,

Hi,
don’t build with browser target but u need build PWA

something like this
npm run ionic:build -- --prod

https://blog.ionicframework.com/how-to-make-pwas-with-ionic/

1 Like

ionic start proname blank --angular is creating project in ionic 3 and
ionic cordova run browser is running project in browser like ionic serve , I am trying to build project in Ionic 4 and there I am facing above problem.

I have updated mentioned libraries to latest version. But still getting same error.

    "@angular-devkit/architect": "^0.7.5",
    "@angular-devkit/build-angular": "^0.7.5",
    "@angular-devkit/core": "^0.7.5",
    "@angular-devkit/schematics": "^0.7.5",
    "@ionic/ng-toolkit": "^1.0.8",
    "@ionic/schematics-angular": "^1.0.6",

I have tried this command but getting below error while build .

npm ERR! missing script: ionic:build

and the build script is like below in package.json

  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },

hi, sorry
u are using ionic 4 beta also check here https://beta.ionicframework.com/docs/publishing/progressive-web-app

1 Like

In index.html, you need to change
<base href="/" />
to
<base href="." />
This will let you upload the directory to a web server.

2 Likes

Is it really safe changing base href to that?

@giovannipds @haik changing the base href had no effect for me. Have you found another workaround?

Thanks,
Ryan

This command just worked for me (no need to edit any files)

ionic build --prod

It can be found in the beta documentation.

Thank you for your reply.
I have tried with your solution and tried to build using ionic build --prod but it is showing blank page with below console status when opened index.html from www folder.

Can you please suggest me on this ?

the built product of the app isn’t working on the browser when i click on the www.

I have used tabs and changed the base href="/" to base href="."
Anyone have a solution to fix this .

Have you resolved this? I have the same problem.

Yes, I did. I don’t remember exactly what issue I’ve read but, this is the solution for my use case - changing <base href="/" /> at src/index.html was not an option, since that would make it stop working for app stores / cordova, android / ios. Apps need <base href /> as "/" but my browser needed it as "/app/". Here what I’ve used:

ionic build --prod --service-worker -- --base-href /app/

You can even edit package.json and create a new script like build:prod, like this:

{
  ...,
  "scripts": {
    ...,
    "build:prod": "ionic build --prod --service-worker -- --base-href /app/"
  },
  ...
}

This uses an option of angular, not Ionic itself, but, it works!
Note: you also don’t need to add browser as platform for Ionic 4 / cordova since this platform is not officially supported by Ionic 4 team.
Hope to have helped somehow. Keep dev-ing!

2 Likes

@dvtopiya @gulullu

You could try the following command. Note there is an empty – between --prod and --base-href and it is not a type ( see https://github.com/ionic-team/ionic-cli/issues/3600 for more info). Change http://example.org/app/ to the domain url where the files are going to be served from. Hope that helps

ionic build browser --prod – --base-href http://example.org/app/

So you just noticed that Ionic 4 was released and you finally want to get started with cross platform app development? Well today is your days because we’ll go through building your first Ionic 4 application with HTTP Calls to the Open Movie Database!

Whether you are completely new to Ionic at all or have used other versions of Ionic before and now decided to get started with version 4, we go through all the basics to setup a new app, routing and even API calls to display async data inside our app.

Setting up Our Ionic 4 App

If you are new to Ionic you need to make sure you have the Node Package Manager installed but if you have worked with other web technologies before chances are pretty good you already got everything you need.

So then if you also haven’t used Ionic before, you need to install it trough npm and then you are finally ready to create your Ionic 4 project!

To setup a blank project you can use the Ionic CLI so we end up with a fresh Ionic 4 project with Angular support (you could also use React or Vue, better support coming later this year).

Once the project is created we cd into the folder and also use the CLI, which basically uses the Angular CLI under the hood, to create new pages for our app that we want to display.

ionic g page pages/movies
ionic g page pages/movieDetails
ionic g service services/movie

This will open the browser with the preview of your app which will reload automatically once you change anything inside your project.

Speaking of project, we got a bunch of files and folders in here, let’s see what all of this means. We will focus on the src folder of our app since we don’t have to worry about the rest for now.

This is the folder where we will make all the code changes that follow later in this tutorial. It already contains a home folder that’s basically a page like we created before, but I like to have all pages in their own pages folder so you can remove the home folder as well for now.

The pages folder contains the actual views/pages of our app, which means the element we will see on the screen. Right now we already got 2 pages in here, and each page you create with the CLI comes with 4 files:

module.ts: The Angular module for a page. Each page is basically their own module (related to the Angular architecture) with imports and styling
page.html: The HTML markup for a page
.scss: The styling for the specific page (more on global styling later)
page.spec.ts: An automatically added testing file for your page. Good if you want to set up automated unit tests
page.ts: The controller for a page that contains the Javascript code that manages the functionality

@Sujan12
So we need t follow your step then to merge it with java we need to copy the ontent of www folder correct?
I tried to copy the content of www/ into java web project but still facing same issue.
could you plz share the solution

Thanks,

SOLVED

@haik Yes your suggestion worked.

Thanks to all for discussing in great details.

This one worked for me,
I used my folder name instead of /app/ in the above code
and uploaded everything under that folder and found working good.