Angular2 설치하기 - Laravel 5

Elixir 를 사용하는 방법은 이전 포스팅을 참고하여 주세요.

2016/06/13 - [프로그래밍/언어 - PHP] - Elixir 사용하기 - Laravel 5

package.json 파일에 설치할 패키지를 추가합니다. elixir-typescript 대신 saaksin-elixir-typescript 를 사용합니다.(대충 수정해서 Angular2 용으로 npm 패키지 등록하였습니다. ^^)

{

  "private": true,

  "scripts": {

    "prod": "gulp --production",

    "dev": "gulp watch"

  },

  "devDependencies": {

    "gulp": "^3.9.1",

    "laravel-elixir": "^5.0.0",

    "saaksin-elixir-typescript": "~2.0.2",

    "@types/core-js": "^0.9.34",

    "@types/node": "^6.0.45",

    "concurrently": "^3.0.0",

    "lite-server": "^2.2.2",

    "typescript": "^2.0.3"

  },

  "dependencies": {

    "@angular/common": "~2.1.1",

    "@angular/compiler": "~2.1.1",

    "@angular/core": "~2.1.1",

    "@angular/forms": "~2.1.1",

    "@angular/http": "~2.1.1",

    "@angular/platform-browser": "~2.1.1",

    "@angular/platform-browser-dynamic": "~2.1.1",

    "@angular/router": "~3.1.1",

    "@angular/upgrade": "~2.1.1",

    "angular-in-memory-web-api": "~0.1.13",

    "core-js": "^2.4.1",

    "reflect-metadata": "^0.1.8",

    "rxjs": "5.0.0-beta.12",

    "systemjs": "0.19.39",

    "zone.js": "^0.6.25"

  }

}

패키지를 설치합니다.(루트 권한이 아닙니다.)

npm install

assets 디렉토리에 typescript 디렉토리를 생성합니다. 여기에 Angular2 의 ts 파일들을 생성하고, 컴파일러 옵션을 지정할 파일 tsconfig.json 을 생성합니다.(target 을 es5 로 하였다면 module 을 es6 으로 지정하면 안됩니다.)

{

  "compilerOptions":

  {

    "target": "es5",

    "module": "commonjs",

    "moduleResolution": "node",

    "sourceMap": true,

    "emitDecoratorMetadata": true,

    "experimentalDecorators": true,

    "removeComments": false,

    "noImplicitAny": false,

    "typeRoots": [

      "../../../node_modules/@types"

    ],

    "types": [

      "core-js"

    ]

  },

  "exclude":

  [

    "../../../node_modules"

  ]

}

gulpfile.js 에 컴파일할 소스 및 결과물을 생성할 디렉토리를 지정합니다.(자바스크립트들은 /public/js 아래에 위치하게 됩니다.)

    mix.copy('./node_modules/core-js', 'public/js/core-js');

    mix.copy('./node_modules/zone.js/dist', 'public/js/zone.js/dist');

    mix.copy('./node_modules/reflect-metadata', 'public/js/reflect-metadata');

    mix.copy('./node_modules/systemjs', 'public/js/systemjs');

    mix.copy('./node_modules/rxjs', 'public/js/rxjs');

    mix.copy('./node_modules/angular-in-memory-web-api', 'public/js/angular-in-memory-web-api');

    mix.typescript(

        [

            'app.component.ts',

            'app.module.ts',

            'main.ts'

        ],

        'public/js/app/'

    );

이후 gulp 를 실행하면 public/js/app 디렉토리에 컴파일된 결과물이 생성됩니다.

gulp

copy 이후 typescript 만 실행할 경우는 아래와 같이 실행합니다.

gulp typescript

systemjs.config.js 파일을 다음과 같이 수정합니다.

(function (global) {

    System.config({

        paths: {

            // paths serve as alias

            'npm:': '/js/'

        },

        // map tells the System loader where to look for things

        map: {

            // our app is within the app folder

            app: '/js/app',

            // angular bundles

            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',

            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',

            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',

            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',

            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',

            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',

            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',

            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

            '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',

            // other libraries

            'rxjs':                      'npm:rxjs',

            'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'

        },

        // packages tells the System loader how to load when no filename and/or no extension

        packages: {

            app: {

                main: './main.js',

                defaultExtension: 'js'

            },

            rxjs: {

                defaultExtension: 'js'

            },

        }

    });

})(this);

---

gulp-notify 플러그인을 찾을 수 없다는 메시지가 나오면, 아래의 패키지를 설치합니다.

yum install libnotify

---

PhpStorm 의 경우 JavaScript 설정을 ECMAScript 6 으로 지정하여야합니다.

---

angular2 2.4.0 의 package.json 은 다음과 같습니다.

{

  "private": true,

  "scripts": {

    "prod": "gulp --production",

    "dev": "gulp watch"

  },

  "devDependencies": {

    "gulp": "^3.9.1",

    "laravel-elixir": "^5.0.0",

    "saaksin-elixir-typescript": "~2.0.3",

    "concurrently": "^3.1.0",

    "lite-server": "^2.2.2",

    "typescript": "^2.0.10",

    "canonical-path": "0.0.2",

    "http-server": "^0.9.0",

    "tslint": "^3.15.1",

    "lodash": "^4.16.4",

    "jasmine-core": "~2.4.1",

    "karma": "^1.3.0",

    "karma-chrome-launcher": "^2.0.0",

    "karma-cli": "^1.0.1",

    "karma-jasmine": "^1.0.2",

    "karma-jasmine-html-reporter": "^0.2.2",

    "protractor": "~4.0.14",

    "rimraf": "^2.5.4",

    "@types/node": "^6.0.46",

    "@types/jasmine": "^2.5.36"

  },

  "dependencies": {

    "@angular/common": "~2.4.0",

    "@angular/compiler": "~2.4.0",

    "@angular/core": "~2.4.0",

    "@angular/forms": "~2.4.0",

    "@angular/http": "~2.4.0",

    "@angular/platform-browser": "~2.4.0",

    "@angular/platform-browser-dynamic": "~2.4.0",

    "@angular/router": "~3.4.0",

    "@angular/material": "~2.0.0-beta.1",

    "angular-in-memory-web-api": "~0.2.4",

    "systemjs": "0.19.40",

    "core-js": "^2.4.1",

    "rxjs": "5.0.1",

    "zone.js": "^0.7.4"

  }

}

기존의 @angular/upgrade, reflect-metadata 는 제거합니다.

npm uninstall @angular/upgrade

npm uninstall reflect-metadata