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!