Question

我想找到Angular 4文档的本地/离线版本（https://angular.io/docs），我可以在离线环境中使用（根本没有互联网访问，热心和它的替代品）不能不幸地使用。

经过几个小时的搜索后，似乎没有人能找到这个任务的简单解决方案，仅适用于angularJS 1.0版本。

我还尝试克隆angular documentation project但没有成功在没有互联网的情况下在本地运行它。

Answer 1

首先转到this one此网站
然后从菜单

this one

检查您要进入列表的项目，然后单击“应用” DevDocs.io
然后从“菜单”转到Preference并安装所有要在离线状态下查看的文档。
这就是全部!!!现在你甚至可以在离线状态下看到它。

Answer 2

转到所需页面并将其打印在工具部分中或按ctrl + p并将其另存为pdf

Answer 3

对于那些不知道什么是热情的人？用于语言和框架文档的脱机桌面应用程序您可以从下面的链接dwonload zeal 桌面应用程序：

https://zealdocs.org/download.html

它可以脱机工作！，您可以下载任何要以离线模式访问的内容

Answer 4

如果您使用angular-cli，则可以使用 ng build 构建角度4项目。在你的＆＃34; dist＆＃34;目录中包含您需要的所有文件。

如果您打开＆＃34; index.html＆＃34;在导航器中，您可以执行该项目。如果您有IIE服务器，则可以创建一个空网站

重要提示：如果您不使用服务器，则在执行build -prod后，您必须编辑de index.html并更改＆＃34; base＆＃34;和关闭标记脚本（您也可以更改.js的名称）

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

Answer 5

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

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';
}

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() {
  }
}

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() {
  }
}

执行build -prod后，必须编辑index.html替换为document.write（“”）

Index.html就像

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

Answer 6

这种方法有点棘手，但有效。您只需要谷歌浏览器浏览器即可下载angular.io网站的离线版本。步骤如下：

在chrome浏览器中打开angular.io。
至少打开一次您想要离线阅读的所有页面。页面将缓存在浏览器中。
现在转到更多工具＆gt;添加到桌面并单击添加。

您的离线版angular.io位于桌面上。在断开互联网连接后尝试一下。

注意：如果您尚未在步骤3之前打开所有页面，则没有问题。重新连接到互联网并在桌面上添加的快捷方式中打开所有这些链接。

Angular 4文档离线计算机

6 个答案: