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 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:
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.
© 2022 - 2024 — McMap. All rights reserved.