Firebase Hosting for Your Angular Application

Please refer to below steps to host your application:

Modification in angular.json file:

locate to your app and add (baseHref & deployUrl) parameters under your app-config: ({your_appname} > architect > build > options)

"version": 1,
 "projects": {
   "myapp": {
     "projectType": "application",
     "schematics": {
       "@nrwl/angular:component": {
         "style": "scss"
       }
     },
     "root": "apps/myapp",
     "sourceRoot": "apps/myapp/src",
     "prefix": "app",
     "architect": {
       "build": {
         "builder": "@angular-devkit/build-angular:browser",
         "options": {
           "baseHref": "/",
           "deployUrl": "/",
           "outputPath": "dist/apps/myapp",
           "index": "apps/myapp/src/index.html",

• E.g: myapp > architect > build > options
• look for Test Env. File under your app:

• Add Test Env. (below code) to your App-config:
• E.g.: ({your_appname} > architect > build > configurations)

"test": {
         "fileReplacements": [
           {
             "replace": "apps/myapp/src/environments/environment.ts",
             "with": "apps/myapp/src/environments/environment.test.ts"
           }
          ]
        }

• Build Your App:
  • Commands: npm run nxhm build {your_appname} — –c=test
  • E.g.: npm run nxhm build myapp — –c=test

• Once your build is successful, Follow Usual Firebase commands:

You can delete .firebaserc and firebase.json if you want to change configuration.

•Commands: 

Firebase init

* You are initialising in an existing Firebase project directory

? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. (Press <space> to select, <a> to toggle all, <i> to invert selecti
on)
 ◯ Database: Deploy Firebase Realtime Database Rules
 ◯ Firestore: Deploy rules and create indexes for Firestore
 ◯ Functions: Configure and deploy Cloud Functions
❯◯ Hosting: Configure and deploy Firebase Hosting sites  - Select it by space
 ◯ Storage: Deploy Cloud Storage security rules
 ◯ Emulators: Set up local emulators for Firebase features


• Select Existing project or create a new project based on your req.
• Select your build location
? What do you want to use as your public directory? (public) 

? What do you want to use as your public directory? dist/apps/site-development
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? File dist/apps/site-development/index.html already exists. Overwrite? No

•E.g.: dist/apps/{your_appname}

•Configure as a single page: Type: Yes, or y.

•Then Run command: “firebase deploy”
•Once successfully deployed, you can check link in your terminal,
•Open “Hosting URL” link in any browser

Generated .firebase.json and .firebaserc

#firebase.json
{
  "hosting": {
    "public": "dist/apps/myapp",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

#.firebaserc
{
  "projects": {
    "default": "myapp-test-env"
  }
}