Angular 4 documentation offline computer [closed]

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.

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.

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

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

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>

//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>

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.

来源：https://stackoverflow.com/questions/46532182/angular-4-documentation-offline-computer

标签

angular

offline-caching