Cách tạo bộ cài đặt Offline và key active Visual Studio 2017. Tôi xin chi sẻ cách tạo bộ cài đặt Offline Visual Studio 2017 và Key bản quyền.

Các bạn có thể tải về Visual Studio 2017 tại link sau đây. Mặc định Visual Studio 2017 là bản cài đặt online, ngĩa là bạn cần internet để có thể tải về các gói cài đặt cần thiết cho tất cả các lần cài đặt.

Tải xuống Visual Studio 2017

Tạo bộ cài đặt Offline cho VS 2017 là một hình thức tải về các tập tin cài đặt cần thiết duy nhất một lần và sử dụng được cho các lần cài đặt sau mà không cần internet, và chúng ta sẽ phải sử dụng installer tương ứng mà bạn đã tải về từ trước tại trang chủ Miscrosoft.

Để tạo bộ cài offline, trước tiên các bạn tải về phiên bản mà bạn cần và nhớ nơi lưu trữ nó.

Ví dụ tôi tải về VS 2017 phiên bản Professional, tập tin installer được lưu tại “D:\Download \vs_professional.exe”

Sau khi tải xong tôi tiến hành tạo bộ cài đặt như sau. Hãy mở hộp thoại CMD lên và chạy tuần tự các đoạn lệnh sau.


cd /d "D:\Download"



vs_professional.exe --layout D:\vs2017offline --lang en-US


Đôi khi tân tập tin installer bạn tải về sẽ có dạng vs_professional__XXX, hãy đổi tên dòng command trên cho phù hợp.

Đợi hộp thoại sau hiện ra.

Sau đó chương trình sẽ tự động tải về bộ cài đặt với ngôn ngữ en-US. Tất cả các file sẽ được lưu ở D:\vs2017offline

Sau khi tải về hoàn tất, bạn chỉ việc sử dụng thư mục D:\vs2017offline để cài VS 2017.

Mặc định khi chạy command trên, bạn sẽ nhận được full bộ installer từ Microsoft. Để tùy chỉnh bộ cài đặt này các bạn có thể xem thêm tại đây.

Các bạn có thể active VS 2017 với key sau đây:

Visual studio 2017 professional key: KBJFW-NXHK6-W4WJM-CRMQB-G3CDH

Visual studio Enterprise Key: NJVYC-BMHX2-G77MM-4XJMR-6Q8QF

Visual studio Pro Keys

KBJFW-NXHK6-W4WJM-CRMQB-G3CDH OR HMGNV-WCYXV-X7G9W-YCX63-B98R2

//ST

While working on developing my own Web app, I got an issue with ViewChild annotation that always returns an object of undefined. I did an investigation and found out the problem is that I used ngIf directive within the component. Let’s see an example below and we are going to deeply dive into this one.

import { Component, ElementRef, ViewChild, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: `
    <div>
      <div>
          <input [(ngModel)]="inputValue" />
      </div>
      <div *ngIf="inputValue">
          <button #myButton>Click me</button>
      </div>
    </div>
  `
})

export class MyComponentComponent implements AfterViewInit {
  @ViewChild('myButton') button: ElementRef;

  constructor() { }

  ngAfterViewInit(): void {
    console.log(this.button);
    /*
    Result: undefined
    */
  }
}

Suppose I have an input field, and a button will be hidden by default. The button will only appear when the user types something in the text box to allow the user to click on it. In reality, we’re going to do other stuff. But in the case of this example, I’m using console.log(); to see the value of the element since I just wanted to show you the issue between ViewChild annotation and ngIf directive what I’m talking about. And the result of this console.log(this.button); is clearly undefined because the button element will not be created if the inputValue is null, it’s because ngIf directive will shape or reshape the DOM’s structure by adding or removing elements. And in this case, it’s not added yet. That’s why we got an object of undefined of the ViewChild.

So how will we fix that? We have two solutions for this one. Using hidden or style.display attribute.

Solution #1: Hidden attribute.

Instead of using ngIf directive, we now switch to use hidden attribute. Update the HTML code in the template, it is going to be changed like this. Since using the hidden attribute, the element is still generated in the DOM, and it’s just hidden from the UI so that the user will not see it.

<div>
    <div>
        <input [(ngModel)]="inputValue" />
    </div>
    <div [hidden]="!inputValue">
        <button #myButton>Click me</button>
    </div>
</div>

Solution #2: Style.display attribute

We’re going to bind display method to style.display attribute. In the class of ts file, display method will return a value of block or none that depends on inputValue. And the user will not see the button if display method returns block.

import { Component, ElementRef, ViewChild, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: `
    <div>
      <div>
          <input [(ngModel)]="inputValue" />
      </div>
      <div [style.display]="display()">
          <button #myButton>Click me</button>
      </div>
    </div>
  `
})

export class MyComponentComponent implements AfterViewInit {
  inputValue: string;
  @ViewChild('myButton') button: ElementRef;

  constructor() { }

  ngAfterViewInit(): void {
    console.log(this.button);
    /*
    Result: undefined
    */    
  }

  display(): string {
    if (this.inputValue) {
      return 'block';
    } else {
      return 'none';
    }
  }
}

Conclusions

Since the ngIf won’t add the element in if the expression is false. So the two solutions above are just to hide button from the UI in order for us to be able to get the Element from ViewChild.
Hope this helps you guys who have the same issue. If you have any questions or other workarounds, please add it to comment below.