Mai jos voi descrie pasii pentru a integra Angular5 in Laravel 5.5 folosind angular-cli.

1. Instalare angular/cli global

     npm install -g @angular/cli

2. Dupa ce se instaleaza se pune in PATH din windows calea catre ng

La mine de ex. este: C:Program Files (x86)Gitlocalnode_modules@angularclibin

3. Se genereaza o noua aplicatie folosind commanda: ng new nume_app  –styles=less

–styles=less  –> pentru ca vreau sa folosesc less

Daca se doreste css lipseste acest parametru.

4. Se copiaza dependentele din angular in package.json din Laravel si se ruleaza npm update.

{
 "private": true,
 "scripts": {
 "dev": "npm run development",
 "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
 "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
 "watch-poll": "npm run watch -- --watch-poll",
 "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
 "prod": "npm run production",
 "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
 },
 "devDependencies": {
 "@angular/cli": "1.5.5",
 "@angular/compiler-cli": "^5.0.0",
 "@angular/language-service": "^5.0.0",
 "@types/jasmine": "~2.5.53",
 "@types/jasminewd2": "~2.0.2",
 "@types/node": "~6.0.60",
 "axios": "^0.16.2",
 "bootstrap-sass": "^3.3.7",
 "codelyzer": "^4.0.1",
 "cross-env": "^5.0.1",
 "jasmine-core": "~2.6.2",
 "jasmine-spec-reporter": "~4.1.0",
 "jquery": "^3.1.1",
 "karma": "~1.7.0",
 "karma-chrome-launcher": "~2.1.1",
 "karma-cli": "~1.0.1",
 "karma-coverage-istanbul-reporter": "^1.2.1",
 "karma-jasmine": "~1.1.0",
 "karma-jasmine-html-reporter": "^0.2.2",
 "laravel-mix": "^1.7.2",
 "lodash": "^4.17.4",
 "protractor": "~5.1.2",
 "ts-node": "~3.2.0",
 "tslint": "~5.7.0",
 "typescript": "~2.4.2",
 "vue": "^2.1.10"
 },
 "dependencies": {
 "@angular/animations": "^5.0.0",
 "@angular/common": "^5.0.0",
 "@angular/compiler": "^5.0.0",
 "@angular/core": "^5.0.0",
 "@angular/forms": "^5.0.0",
 "@angular/http": "^5.0.0",
 "@angular/platform-browser": "^5.0.0",
 "@angular/platform-browser-dynamic": "^5.0.0",
 "@angular/router": "^5.0.0",
 "core-js": "^2.4.1",
 "rxjs": "^5.5.2",
 "zone.js": "^0.8.14"
 }
}

5. Se copiaza fisierele: angular-cli.json, tsconfig.json, si tslint.json din aplicatia angular nou creata la pasul 3 in in directorul radacina al proiectului Laravel.

6. Se copiaza directorul src din aplicatia angular creata la pasul3 in proiectul laravel in  resources/assets

7. Se modifica fisierul .angular-cli.json din aplicatia Laravel

{
 "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
 "project": {
 "name": "oa2angular"
 },
 "apps": [
 {
 "root": "resources/assets/src",
 "outDir": "public/dist",
 "assets": [
 "assets",
 "favicon.ico"
 ],
 "index": "index.html",
 "main": "main.ts",
 "polyfills": "polyfills.ts",
 "test": "test.ts",
 "tsconfig": "tsconfig.app.json",
 "testTsconfig": "tsconfig.spec.json",
 "prefix": "app",
 "styles": [
 "styles.less"
 ],
 "scripts": [],
 "environmentSource": "environments/environment.ts",
 "environments": {
 "dev": "environments/environment.ts",
 "prod": "environments/environment.prod.ts"
 }
 }
 ],
 "e2e": {
 "protractor": {
 "config": "./protractor.conf.js"
 }
 },
 "lint": [
 {
 "project": "resources/assets/src/tsconfig.app.json",
 "exclude": "**/node_modules/**"
 },
 {
 "project": "src/tsconfig.spec.json",
 "exclude": "**/node_modules/**"
 },
 {
 "project": "e2e/tsconfig.e2e.json",
 "exclude": "**/node_modules/**"
 }
 ],
 "test": {
 "karma": {
 "config": "./karma.conf.js"
 }
 },
 "defaults": {
 "styleExt": "less",
 "component": {}
 }
}

8. Se modifica continutul fisierului: resources/assets/src/tsconfig.app.json ca mai jos.

{
 "extends": "../../../tsconfig.json",
 "compilerOptions": {
 "outDir": "../out-tsc/app",
 "baseUrl": "./",
 "module": "es2015",
 "types": []
 },
 "exclude": [
 "test.ts",
 "**/*.spec.ts"
 ]
}
9. Se ruleaza comanda:

    ng build -w

10. Se pun fisierele de mai jos in master blade sau in orice fisier blade. Este importanta sa fie in ordinea de mai jos.

dist/inline.bundle.js
dist/polyfills.bundle.js
dist/styles.bundle.js
dist/vendor.bundle.js
dist/main.bundle.js