Angular 4 documentation offline computer

Question

I would like to find a local/offline version of the Angular 4 documentation (https://angular.io/docs), that I could use in an offline environement (no internet access at all, zeal and its alternatives) could not be used unfortunatly.

After many hours of searches it seems that nobody could find a simple solution for this task, only for the angularJS 1.0 version..

I have also tried cloning the angular documentation project without success on running it locally without internet available.

with chrome, you can save locally each page on your disk. But it's tedious as you will have to do it for every page you need. right click and hit save as, select page complete — Mehdi, Oct 02 '17 at 19:18
If you use firefox you can use this addon [Angular Doc Offline](https://addons.mozilla.org/en-US/firefox/addon/angular-doc-offline?utm_source=stackoverflow&utm_medium=social&utm_campaigcn=first-release) ..it fetches angular site and caches it on your browser so you can browse it offline — Mostafa, Nov 16 '21 at 18:08

score 16 · Answer 1 · answered Feb 22 '18 at 11:12

Go to DevDocs.io this website first
Then go to Preference from Menu
Check item that you want to get in list and click Apply
Then go to Offline from Menu and install all documents those you want to see on offline.
That's all !!! Now you can see that even in offline.

score 1 · Answer 2 · answered Jan 17 '18 at 09:54

1

Go to the page you want and print it in tools sections or press ctrl+p and save it as pdf

answered Jan 17 '18 at 09:54

Keerthi Reddy Yeruva

861
1
16
43

nadir hamidou · Answer 3 · 2018-09-17T13:48:47.280

1

for persons who dosn't know what zeal is ? offline desktop application for languages and frameworks documentation you can dwonload zeal desktop application from the link below :

https://zealdocs.org/download.html

it works offline ! and you can download whatever you want to access it in offline mode

edited Sep 17 '18 at 13:48

answered Sep 13 '18 at 10:47

nadir hamidou

423
2
7
18

The OP clearly mentions he does not intend to use zeal in his environment. – sɐunıɔןɐqɐp Sep 13 '18 at 11:16
i didn't see that, however it could help other persons who doesn't know zeal method. – nadir hamidou Sep 17 '18 at 13:44

Eliseo · Answer 4 · 2017-10-04T08:56:28.277

0

if you use angular-cli, you can build an angular 4 project using ng build . In your "dist" directory you have all the files you need.

If you open the "index.html" in a navigator you can execute the project. If you have a IIE server you can create a empty Web site

IMPORTANT: if you don't use a server, after execute ng build --prod you must be edit de index.html and change "base" and close tag script (you can change the names of .js too)

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
        <title>AppNew</title>
        <base href="/Users/Usuario/Documents/app-new/dist/">
        <link rel="icon" type="image/x-icon" href="favicon.ico">
          <link href="styles.css" rel="stylesheet"/>
    </head>
    <body>
        <app-root/>
        <script type="text/javascript" src="inline.js"></script>
        <script type="text/javascript" src="polyfills.js"></script>
        <script type="text/javascript" src="vendor.js"></script>
        <script type="text/javascript" src="main.js"></script>
    </body>
</html>

edited Oct 04 '17 at 08:56

answered Oct 02 '17 at 19:51

Eliseo

50,109
4
29
67

1

can you please add more information? Do you mean that I need to clone the docs as i mentioned in my question? – octo-developer Oct 04 '17 at 07:57
Completed my answer – Eliseo Oct 04 '17 at 08:57
hey, still could not get it.. could you please explain step by step what to do? the final result will be a kind of local site of angular.io – octo-developer Oct 11 '17 at 10:17
Sorry for delay. I'll think that it's possible, but there are a problem: the routes. You must use a HashLocationStrategy. see my example in the answer – Eliseo Oct 13 '17 at 10:24

score 0 · Answer 5 · answered Oct 13 '17 at 10:33

//app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HashLocationStrategy,LocationStrategy,CommonModule } from '@angular/common';

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { WellcomeComponent } from './wellcome/wellcome.component';

const appRoutes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'wellcome', component: WellcomeComponent },
  {path: '**', redirectTo: '', pathMatch: 'full' }
]
@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    WellcomeComponent
  ],
  imports: [
    BrowserModule,
    CommonModule,
    RouterModule.forRoot(appRoutes)
  ],
  providers: [
    { provide: LocationStrategy, useClass: HashLocationStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

the app.component.ts

//app.component.ts
import { Component } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

@Component({
  selector: 'app-root',
  template:`
  <div style="text-align:center">
  <p>
  <a [routerLink]="['/']">Home</a>
  </p>
  <p>
  <a [routerLink]="['/wellcome']">Wellcome</a>
  </p>
  <h1>
    Welcome to {{title}}!
  </h1>
</div>
<h2>Here are router-outlet: </h2>
<router-outlet></router-outlet>`,
})
export class AppComponent {
  title = 'app';
}

the wellcome.component.ts

//wellcome.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-wellcome',
  template:`
  <p>
  wellcome works!
</p>
  `
})
export class WellcomeComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }
}

the home.component.ts

//home.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  template:`
  <p>
  home works!
</p>
  `
})
export class HomeComponent implements OnInit {

    constructor() { }

  ngOnInit() {
  }
}

after you do ng build --prod you must edit the index.html replacing by document.write("")

Index.html will be like

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>AppNew</title>
        <script>document.write("<base href='"+window.location.href+"'/>") </script>
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <link rel="icon" type="image/x-icon" href="favicon.ico">
        <link href="styles.d41d8cd98f00b204e980.bundle.css" rel="stylesheet"/>
    </head>
        <body>
            <app-root/>
            <script type="text/javascript" src="inline.2833f8af5a9f1ba869e4.bundle.js"/>
            <script type="text/javascript" src="polyfills.8eba0ab53b5457105d75.bundle.js"/>
            <script type="text/javascript" src="vendor.aeea1adcdc349547d6f1.bundle.js"/>
            <script type="text/javascript" src="main.c39d8a271dce22bb4c5c.bundle.js"/>
    </body>
</html>

score 0 · Answer 6 · answered Jan 02 '18 at 13:49

This method is little tricky but it works. You only requires google chrome browser to download offline version of angular.io website. The steps are as follows:

Open angular.io in chrome browser.
Open all the pages at least once that you wanted to be available for offline reading. The pages will cached in browser.
Now goto More tools > Add to Desktop and click add.

Your offline version of angular.io is on desktop. Try it after disconnecting from the internet.

Note: If you have not opened all the pages before step 3. There is no problem. Reconnect to internet and open all those links in the added shortcut on the desktop.

Angular 4 documentation offline computer

6 Answers6

Linked