#angular-cli

Action:

When executing the command ng test

Solution:

Add in app.component.spec.ts

import {RouterTestingModule} from '@angular/router/testing';

beforeEach(async(() => {     TestBed.configureTestingModule({         declarations: [ AppComponent ],         imports: [ RouterTestingModule ] });

...

[AngularJS] 在 Angular CLI 中使用原生 Bootstrap

如果在網路上搜尋 AngularJS 或 Angular CLI 和 Bootstrap 的關鍵字

  不少文章都會提供使用 Ng-Bootstrap 或 Ngx-Bootstrap 的方式

  此篇主要講的是使用原生的 Bootstrap 和 Angular CLI 做使用

(more…)

I spent a lot of time to figure out why I cannot install angular -cli on my computer which run on win 10 64 bit. I use my company network with proxy in the middle and tons of time it stop at a 403 error and randomly in some packages. I gave up and installed a virtual Ubuntu for this such of installation. I works on my new Ubuntu. Hmm.

Look back a little bit and see where the hell issue can come. I though maybe nodejs version and npm. Some time for searching google to see if it is possible and try this post: https://blog.angular-university.io/getting-started-with-angular-2-in-the-enterprise-how-to-get-node-npm-and-angular-installed-in-your-corporate-windows-pc-with-no-admin-rights/

I install nvm for window as they suggested at https://github.com/coreybutler/nvm-windows, download the zip file and install the exe file inside after exstract.

I plan to install nodejs 6.9.0 and nvm list to see if it existed or not. You can use command: nvm install 6.9.0 to install it. After we have nodejs 6.9.0 we switch to it by nvm use 6.9.0

And then npm install -g @angular/cli to install angular cli.

Angular cli is a command line interface to scaffold and build angular apps using nodejs style (commonJs) modules.

Now, some commands: npm install -g angular -cli (this will install angular-CLI)

Angular CLI supports all major CSS preprocessors. Here is how you can use them easily.

In this small post, I will tell you about how you can initialize a new Angular 2 project.

EclipseでAngular2を用いたクライアントを作成する手順をまとめます。もし同じように挑戦したい方は、まず同じようにやってみてください。事前にEclipseをインストールし、Angular IDEを追加していることが前提となります。

まずEclipse上でプロジェクトを作成する。[New Project]を選択すると、事前にEclipseにAngular IDEをインストールできていれば下のようにAngularプロジェクトが選べる。(選べない場合はインストールできているか確認する)

Angularプロジェクトを選択し、必要な設定をすると、裏でAngular CLIというツールが動いて、テンプレートが生成される。なお、Angular CLIのバージョンはbeta.24以降が好ましい。古いと、「'listLazyRoutes' of undefined」という不可解なエラーが発生する場合があり、対処法が良く分からない。ドツボにはまる前に設定をしておくこと。

Finishを押してプロジェクトを作ると、以下のような画面が出てくる。ソフトのダウンロードに時間がかかるので3分位待つ必要があるので注意。

これでプロジェクトのテンプレートは完成。試しに以下のように虫を押すか、Start Server in Development Mode(Productionでも可)を押すと、ブラウザが立ち上がり、「app works!」と表示されるはずである。

今度は、完成したテンプレートをGitHubに登録するため、プロジェクト共有の設定を行う。まずは、プロジェクトを右クリックして[Share]>[Share Project..]を選択する。

出てきたダイアログの[Use or create repository in parent folder of project]を選択する。はじめは以下のように[Finish]が選択できない状態だが、[Create Repository]を押すと…

以下のように[Repository]の列に[.git]が出てきて、[Finish]が押せるようになる。

上記の作業が完了した時点でローカルのリポジトリは生成されるが、中身はまだ空である。ローカルのリポジトリに、ファイルを保存するためにはコミットを実行する。対象ファイルは、リストに表示されたファイル全てでOK(不要なものは事前に取り除かれているので)

コミットまでできたら、ローカルのリポジトリにファイルが保存された状態になる。

今度は、ローカルのリポジトリをGitHubにPushする。(これにより他の人が閲覧したり編集したりできるようになる)。

そのためにはまず、ローカルのリポジトリの設定画面で、Remoteの設定をする必要がある。(ローカルのリポジトリは、GitHubにあるオリジナルを持ってきたクローンであると教えてあげることで、ローカルのリポジトリの内容をGitHubに反映する=Pushできるようになる)。設定画面のURLにはGitHubで表示されるリポジトリのURLを入力する。

今回はGitHubに事前に登録してあるSSH公開鍵を使った認証をしたいので、↑のURLはSSHのものを選択している。↓の設定画面のPutty Key(秘密鍵)には、GitHubに登録してある公開鍵に対応したPuttyの秘密鍵のファイル(.ppkファイル)を設定している。

これで[Add New/Save]をすれば、 ローカルの編集をGitHub上にPushできるようになる。

 The Rig Windows 10 Docker 1.12.1-stable (build: 7135) node v6.9.1 npm v3.10.8 angular-cli: 1.0.0-beta.17 Goals Create a reusable/shareable development environment for angular2 websites Utilize windows UI code editor Run development server in docker container Create the image… Dockerfile FROM node:6.9.1 RUN npm i angular-cli -g EXPOSE 4200 EXPOSE 49153 Build it PS > docker build -t angular-cli .…