Skip to content

A demo of hosting static non-Angular HTML using Angular CLI

License

Notifications You must be signed in to change notification settings

DevIntent/angular-cli-static

Folders and files

NameName
Last commit message
Last commit date

Latest commit

6f5b7ee · Sep 23, 2019

History

9 Commits
Sep 23, 2019
Sep 22, 2019
Sep 23, 2019
Sep 23, 2019
Sep 22, 2019
Sep 22, 2019
Sep 23, 2019
Sep 23, 2019
Sep 23, 2019
Sep 23, 2019
Sep 23, 2019
Sep 22, 2019
Sep 23, 2019

Repository files navigation

Angular CLI Static

This experimental project was generated with Angular CLI version 9.0.0-next.5.

Development server

  1. Run npm start for a dev server
  2. Navigate to http://localhost:4200/

The app will automatically reload if you change any of the source files.

Build

  • Run npm run build to build the project
  • Run npm run build:prod flag for a production build

The build artifacts will be stored in the dist/ directory.

Deploy

  1. Change .firebaserc to point to your Firebase Hosting project
  2. Ensure that you are logged in to Firebase: npm run login
  3. Run npm run deploy

Key Configuration Steps

  1. Create a workspace without an app:
ng new --create-application=false angular-cli-static
  1. Create a minimal app:
ng g app --style=scss --minimal=true --routing=false --skip-tests=true static-html
  1. Comment out zone.js import in polyfills.ts
  2. In angular.json clear out "fileReplacements": []
  3. Remove app/, environments/
  4. Remove the following Angular dependencies from package.json's dependencies:
    • @angular/animations
    • @angular/forms
  5. Remove the following dependencies from package.json's devDependencies:
    • codelyzer
    • @angular/language-service
  6. Remove codelyzer from rulesDirectory and remove all of the Codelyzer rules from the workspace tslint.json
  7. Remove directive-selector and component-selector rules from your app's tslint.json
  8. Enable Deployment to Firebase
ng add @angular/fire
  1. Update your firebase.json to work with a static site rather than a SPA
  "rewrites": [
    {
      "source": "/",
      "destination": "/index.html"
    }
  ]
  1. Add a 404.html and 404.css
  2. Update your project's assets list in angular.json to include the new files
    "assets": [
      "projects/static-html/src/favicon.ico",
      "projects/static-html/src/404.html",
      "projects/static-html/src/404.css",
      "projects/static-html/src/assets"
    ],