Guide to hosting AngularJS Material documentation on a local server

After gathering the latest angularjs material, I noticed that the links in the document lead to absolute URLs at material.angularjs.org/.... I wish to have access to read the documentation and demonstration content locally.

Answer №1

Here are the steps you need to follow (specifically for Windows users):

  • Start by installing git, Node v6.10.3

    To get Git, visit

    https://git-for-windows.github.io/

    For Node v6.10.3, go to

    https://nodejs.org/en/blog/release/v6.10.3/

  • Next, install dependencies like npm, gulp, and http-server (you can use cmd or PowerShell)

    To install npm, use

    npm install <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5638263b1665786766786766">[email protected]</a>

    For gulp, run npm install --global gulp-cli

    And for http-server installation, run npm install http-server -g

  • Proceed by cloning the angular-material repository:

    git clone https://github.com/angular/material.git

  • Build the repository:

    cd material
    npm install

  • Now, build the docs:

    gulp build; gulp docs; gulp watch --dev

  • To run the docs:

    cd dist/docs; http-server

Finally, access or

*A big thank you to Prerak Sola

Answer №3

To create the offline documentation, you can start by completing the following steps:

  • Firstly, make sure to have git, nodejs, and npm installed on your system.
  • Next, install gulp globally:
    npm install --global gulp-cli

  • Then, clone the angular-material repository using this command:

    git clone https://github.com/angular/material.git

  • Proceed to build the repository:
    cd material
    npm install

  • Finally, generate the documentation:
    gulp watch site --dev

Currently, there seems to be an issue with the documentation building process. You can view the problem and any updates provided in this link.

Update:
According to the latest response mentioned here, it is advised to install node v6.10.3 and npm 3.10.10 specifically for generating the docs locally. Once these versions are installed, you can follow the above steps as usual.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using Vue.js, separate the values that are separated by commas

I am looking to extract values from a string and store them in an array for use in displaying values in a dropdown format within Vuejs String str = "abc,123,676,uuu". Once I have iterated through the values <li v-for = "value i ...

What is the best way for Cucumber to move on to the next annotation only after ensuring all async requests from the previous one have finished processing?

I am looking to set up a basic test using Selenium and Cucumber for logging into my web application and confirming that the main page is displayed correctly. Currently, all three tests are returning true even before the page is fully loaded. The issue ar ...

npm installation of bootstrap fails with error message "Module not found: 'jQuery'

Just starting out with node, npm, and express.js. I recently discovered that you can use Bootstrap by running npm install. So, I went ahead and installed Bootstrap with npm install bootstrap --save, and did the same for jQuery and required them in my app. ...

Sharing data between AngularJS 1.5.x components using a shared service

As a newcomer to angularjs, I have a few questions regarding a project I am working on. The task involves retrieving a complex tree-like form object from the server and binding it to 4 different components or tabs. To achieve this, I created a Service spec ...

The API designed to accept JSON data via a POST request is receiving a different data type than expected

I have a task to develop an API that receives JSON data in NODE.JS via the POST method. To simplify request management, I utilize Express and BodyParser library to handle the body of POST requests. The data is structured in a JavaScript object like this: ...

Error: Unable to access null properties while attempting to address Readonly property error by implementing an interface

Here is the code snippet I am working with: interface State { backgroundColor: boolean; isLoading: boolean; errorOccured: boolean; acknowledgment: string; } export class GoodIntention extends React.Component<Props, State> { ... onCli ...

Running a Python Selenium script

I need some help executing this script using selenium. <div class="vbseo_liked"> <a href="http://www.jamiiforums.com/member.php?u=8355" rel="nofollow">Nyaralego</a> , <a href="http://www.jamiiforums.com/member.php?u=8870" rel="nofollo ...

The functionality of window.location.href seems to be malfunctioning on mobile devices within an ionic application

Attempting to open a view with a function call from the UI side <ion-option-button class="button-light icon ion-chatbubble" ng-click="openView('username')"></ion-option-button> The controller code for this action is as follows: $sc ...

Is there a way to instruct npm to compile a module during installation using the dependencies of the parent project?

I am curious about how npm modules are built during installation. Let me give you an example: When I check the material-ui npm module sources on GitHub, I see the source files but no built files. However, when I look at my project's node_modules/mate ...

Is it preferable to share the .vue file or the compiled component in Vue?

When creating unique components, is it more advantageous to release the original .vue file or distribute a compiled version through webpack or another bundling tool? Additionally, is there an official reference document outlining best practices for releas ...

Utilizing .isDisplayed() in conjunction with .each() in ProtractorJS for Angular: A guide

Currently, I am working on setting up a test within my Angular application. The goal of this test is to click on an element and check if a specific object is displayed. While I believe the code provided below should work, I am aware that the isDisplayed( ...

Continue to run upon clicking the button in the Document Object Model

I want the code to constantly change instead of executing only once. By default, the button has a dark mode for text and the background color is pink. When you click the button, the background color changes to black and the text in the button turns into li ...

Issue with page refreshing not functioning on localhost in Rails and AngularJS collaboration

I recently encountered a strange issue while working on my Rails 4.2 + AngularJS 1.5 project. Whenever I attempt to refresh (F5) the main web-page, there's about a 9 out of 10 chance that the refresh doesn't happen correctly. In these cases, all ...

"Error message pops up indicating the dispatcher is missing while using npm link with a local project

Currently, I am working on a React component library that I want to integrate into a local project for testing purposes. My initial approach was to use npm link to connect the component library with my local project. However, during this process, I encount ...

Having trouble turning off a multi-select drop down option

Hello, I'm a newcomer to AngularJs and facing an issue with disabling my multiselect dropdown under a specific condition. Initially, I attempted to disable the dropdown using the following code: document.getElementById("multidropdown").disabled = tr ...

Tips for choosing a href link from a JSON data structure

I'm struggling with JSON. I have a JSON object that looks like this: {main: "<a href="www.google.com"><img src="google_logo.png"></a>"} This is just a small part of my code. For example, I access the "main" object with json.main an ...

Having issues with displaying a pie chart in a React application using Chart.js

I am currently experiencing a problem with displaying a pie chart in a React component using the react-chartjs-2 library and Chart.js. The data for the chart is retrieved from an API, and I expect the chart to appear once the data is ready. However, despit ...

Troubleshooting the issue with mocking API and creating a regular expression to match the dynamic part of a URL

I am struggling to create a mock for an API that includes dynamic parts in the URL. I attempted to use a regular expression, but it is not functioning as expected. The URL I am trying to mock is: https://example.com/programs/2fcce6e3-07ec-49a9-9146-fb84fb ...

send the variable to the deferred done function

Having trouble passing a variable into a done callback. var getDataForCompany = function(company_id) { $.ajax({ type: "post", url: url, data:{ company_id: company_id } }).done(function(returnedData, textStatus, j ...

What is causing the Firebase emulator to crash when I run my Express code?

This project is utilizing express.js along with firebase. Whenever attempting to access a different file containing routes, it results in failure. Instead of successful emulation, an error is thrown when running this code: const functions = require(" ...