laravel5.2上でAngular2のQUICKSTART を動かす方法

【2016/10/21 add postscript】

Before I knew it, Angular2 had been released.
On this occasion, I think let’s start the learning of Angular2.
By the way, I don’t know AngularJS1 little.

There is no value to traced the tutorial of official page normally.
Then I’ll try to run the QUICKSTART of Angular2 on laravel.

■Angular2 – QUICKSTART
https://angular.io/docs/ts/latest/quickstart.html

Complete source is as follows.

■github
https://github.com/dog-ears/angular2-quickstart-on-laravel

I use Cloud9 as development environment
Let’s go!

(1) install laravel

Please install the laravel to Cloud9 previously wrote the bottom of the article (1) to the reference.

http://dog-ears.net/laravel/20160223/

(2) update “node" and “npm"

At the moment, in Cloud9,
node version is 4.4.0
npm version is 2.14.20

Version required is below.
node v4.x.x ~
npm 3.x.x ~

Then, I update only npm.

■How to update Node.js and npm(Japanese only)
http://parashuto.com/rriver/tools/updating-node-js-and-npm

npm update -g npm

(3) setting of node_modules

Usually, “node_modules" folder will be made at the same level as the package.json.
But This time, I want to place “node_modules" folder on “public / node_modules".

■set “node_modules" on another place(Japanese only)
https://lowreal.net/2014/02/14/1

i) create “/public/node_modules" folder
ii) Before “npm install", create symlink from “/node_modules"(same level as package.json) to “/public/node_modules" with command “ln -sf"
iii) run “npm install"( * I run this, later in section(5) )

And add .gitignore below.
/public/node_modules

(4) Create each configuration file

■package.json
https://github.com/dog-ears/angular2-quickstart-on-laravel/blob/master/package.json

“start": “tsc && tsc -w",
I revised partially because I don’t need server.

【2016/10/21 postscript】
I modified package.json partially.

Before modification HTML and CSS files in “resources/assets/typescript" folder is not copied to public folder.
(tsc command compile only *.ts files and move to public folder)
Then I done as below.

i) install cpx

npm install cpx

ii) install npm-run-all

npm install npm-run-all

iii) modify script in package.json as below.

"start": "npm-run-all -p tsc:w copyhtmlcss",
"copyhtmlcss": "cpx \"./resources/assets/typescript/**/{*.html,*.css}\" ./public -w",

【postscript is over】

■tsconfig.json
https://github.com/dog-ears/angular2-quickstart-on-laravel/blob/master/tsconfig.json

Add “rootDir" and “outDir".
set “outDir" to output compiled files on public folder.

※"rootDir" often make us mistake.

(ref) TSC with allowJs compiles its own compiled JS outside rootDir
http://stackoverflow.com/questions/37845385/tsc-with-allowjs-compiles-its-own-compiled-js-outside-rootdir

Everyone may thought only files in “rootDir" is compiled.
But actually, this setting define output directory hierarchy.

In other words,
if setting is not specified, compiled files is created on /public/resources/assets/typescript/app/—.
if setting is specified, compiled files is created on /public/app/—.

Originally, in the case where the specified input file, use command like below
tsc [directory] / *. ts
But I failed with that method.

Since all *.ts file under the root is compiled, I use “exclude" setting
“exclude": [“node_modules","vendor","public"]

※It may good to use “include" instead of “exclude"

■typings.json
→Official page as it is.

■systemjs.config.js
→Official page as it is. But put it on /public/js/

(5) npm install

(6) Create ts files

Create below files on /resources/assets/typescript/app/
Contents is same as official page.

■app.module.ts
■app.component.ts
■main.ts

(7) Modify view file

Modify “resources/views/welcome.blade.php"

■welcome.blade.php
https://github.com/dog-ears/angular2-quickstart-on-laravel/blob/master/resources/views/welcome.blade.php
※I modified path of js and css.

And Create style.css on public/css/

(8) compile ts file

run below command at root

tsc

Congraturation.
If You do “Run Project" on Cloud9, you can see QUICKSTART.

Let’s try it!