Angular-CLI in Rails

Bài đăng này đã không được cập nhật trong 2 năm

Trong bài viết trước, mình có giới thiệu về cách sử dụng Angular2 trong Rails. Tuy nhiên, vấn đề config ứng dụng như typescript, nodejs.. là tương đối phức tạp và làm mất nhiều thời gian cho các bạn. Để giải quyết vấn đề này, Google đã cho ra đời một công cụ rất mạnh để giúp cho dev quản lý được project tốt hơn. Đó là AngularCli. Nó là công cụ tuyệt vời để tạo dựng môi trường phát triển nhanh hơn, dễ dàng hơn qua những command đơn giản, và giúp cho việc bảo trì cho ứng dụng angular 2. Bài viết này mình hướng dẫn các bạn sử dụng AngularCLI trong ứng dụng Rails.

Yêu cầu cấu hình.

Angular CLI yêu cầu:

# node -v
nodejs >= 6.9
# npm -v
npm >=  3.0.0

Các bước thiết lập

1. Tạo 1 ứng dụng Ruby on Rails

rails new rails-angular-cli -T && cd rails-angular-cli

2. Sau đó, bạn cần cài đặt CLI bằng lệnh sau:

npm install -g @angular/cli

3. Sau khi cài CLI bạn có thể kiểm tra quá trình cài đặt có thành công hay không, bạn dùng câu lệnh: ng version. Ta được kết quả sau:

    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
@angular/cli: 1.0.4
node: 7.10.0
os: linux x64

4. Bây giờ, Angular CLI đã được cài đặt. Bạn cần tạo 1 ứng dụng Angular 2:

ng new ng-app

5. Tiếp theo bạn di chuyển các file sau ra ngoài thư mục ng-app bằng câu lệnh

mv ng-app/tsconfig.json .
mv ng-app/package.json .
mv ng-app/karma.conf.js .
mv ng/protractor.conf.js .

6. Tiếp theo, bạn cần sửa 1 số thông số trong các file để đảm bảo đúng đường dẫn đến các tập tin nguồn. Sau khi chỉnh sửa bạn có các file có nội dung tương tự như sau

/ tsconfig.json
...
"outDir": "public/app",
"baseUrl": "ng-app/src",
...

/karma.conf.js
...
files: [
  { pattern: './ng-app/src/test.ts', watched: false }
],
preprocessors: {
  './ng-app/src/test.ts': ['@angular/cli']
},
...

7. Tiếp theo, bạn cần chạy lệnh sau để sinh ra các tập tin đi kèm

ng build

8. Sau đó, bạn cần thêm các tệp Javascript được tạo ra trước thẻ đóng </body> vào file sau

 #app/views/layouts/application.html.erb
<app-root>Loading…</app-root>
<script type="text/javascript" src="/app/inline.js"></script>
<script type="text/javascript" src="/app/styles.bundle.js"></script>
<script type="text/javascript" src="/app/main.bundle.js"></script>

9. Cuối cùng bạn chạy rails s và được kết quả như sau: 10. Bây giờ bạn có thể cd ng-app và sử dụng Angular CLI để Generating Components, Directives, Pipes and Services