Angular 4 documentation offline computer

Angular 4のドキュメント（https://angular.io/docs）、のローカル/オフラインバージョンを検索したいと思います（インターネットにアクセスできない、熱意とその選択肢）。不幸にも使われる。Angular 4 documentation offline computer

検索の多くの時間後には、誰もが唯一のangularJS 1.0バージョンのために、この作業のために簡単な解決策を見つけることができなかったようだ。..

私も用意し、インターネットなしでローカルで実行している上、成功せずにangular documentation projectのクローンを作成しようとしています。

出典

2017-10-02 octo-developer

クロムを使用すると、ディスク上の各ページをローカルに保存できます。しかし、あなたが必要とするすべてのページのためにそれを行う必要があるので、面倒です。右クリックして名前を付けて保存、ページ全体を選択 – Mehdi

はい、私はより便利なソリューションを好むでしょう:) –

angular-cliを使用する場合は、ngビルドを使用してアングル4プロジェクトを作成できます。 "dist"ディレクトリには、必要なファイルがすべてあります。

ナビゲータで「index.html」を開くと、プロジェクトを実行できます。 IIEサーバーをお持ちの場合は、空のWebサイトを作成することができます。

重要：サーバーを使用しない場合は、ng build -prodを実行した後でindex.htmlを編集して「base」を変更して閉じる必要がありますタグスクリプト（あなたも.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>

出典

2017-10-02 19:51:13 Eliseo

あなたはもっと情報を追加してください。私は私の質問で述べたように私はドキュメントをクローンする必要があるという意味ですか？ –

私の答えを完成 – Eliseo

ねえ、まだそれを得ることができませんでした.. あなたは何をすべきかを段階的に説明できますか？最終結果は一種のローカルサイトになります。 –

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

あなたはのdocument.write（ ""）で置き換えたindex.htmlを編集する必要があります--prod構築NG行った後

Index.htmlとなります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>

出典

2017-10-13 10:33:36 Eliseo

この方法は少しトリッキーですが動作します。 angular.ioウェブサイトのオフラインバージョンをダウンロードするには、Google Chromeブラウザが必要です。手順は次のとおりです。