@tsiro Checkout my new best answer. I made two separate repository to make easy for every new comer.

separating Angular or merging it with laravel is up to the user. if you are starting a new app you would go with the separation but in my case i want to move my already working app part by part from Normal js to Angular so i want my already working app to keep functions and make a new functions with angular until i move all of them. it's up to you to do what you like.

@eliyas5044 Well done! I also love the Angular/2 CLI, it's a great tool.

For those who prefer to have everything in the same directory structure. I modified the package.json to aleviate the modification elixir-typescript issue :

    "postinstall": "typings install && npm run elixtyperep",
...
    "elixtyperep": "sed -i \"s/\\(\\.pipe(\\$\\.concat(paths\\.output\\.name))\\)/\\/\\*\\1\\*\\//g\" ./node_modUles/elixir_typescript/index.js"
 

My snippet wasn't handling multiple runs properly (and there was a typo). Here is an update :

"elixtyperep": "sed -i \"s/\\(\\/\\*\\)\\?\\(\\.pipe(\\$\\.concat(paths\\.output\\.name))\\)\\(\\*\\/\\)\\?/\\/\\*\\2\\*\\//g\" ./node_modules/elixir_typescript/index.js"

I am comparatively new to laravel but I have worked with angular in two projects. What I believe is Angualr just need JSON data, either you can have it from Laravel API or Slim or any other way. I used slim for my project.

I liked the idea by @primordial of having a sub domain or you can use a path like this somedomain.com/api/v1.

I don't see any need of working with both in the same project. Though having knowledge of both is a plus but you should use one at a time.

Hi,

I got problem when runing ng serve. Do you have any ideas about this one?

➜  angular2-laravel ng serve
Unexpected token {
SyntaxError: Unexpected token {
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:374:25)
    at Object.Module._extensions..js (module.js:417:10)
    at Module.load (module.js:344:32)
    at Function.Module._load (module.js:301:12)
    at Module.require (module.js:354:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (/var/www/dalex.me/html/angular2/angular2-laravel/node_modules/@ngtools/webpack/src/index.js:5:10)
    at Module._compile (module.js:410:26)
    at Object.Module._extensions..js (module.js:417:10)
    at Module.load (module.js:344:32)
    at Function.Module._load (module.js:301:12)
    at Module.require (module.js:354:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (/var/www/dalex.me/html/angular2/angular2-laravel/node_modules/angular-cli/models/webpack-build-typescript.js:3:17)
    at Module._compile (module.js:410:26)
    at Object.Module._extensions..js (module.js:417:10)
    at Module.load (module.js:344:32)
    at Function.Module._load (module.js:301:12)
    at Module.require (module.js:354:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (/var/www/dalex.me/html/angular2/angular2-laravel/node_modules/angular-cli/models/webpack-config.js:2:34)
    at Module._compile (module.js:410:26)
    at Object.Module._extensions..js (module.js:417:10)
    at Module.load (module.js:344:32)
    at Function.Module._load (module.js:301:12)
    at Module.require (module.js:354:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (/var/www/dalex.me/html/angular2/angular2-laravel/node_modules/angular-cli/tasks/build-webpack.js:6:24)
    at Module._compile (module.js:410:26)
    at Object.Module._extensions..js (module.js:417:10)
    at Module.load (module.js:344:32)
    at Function.Module._load (module.js:301:12)
    at Module.require (module.js:354:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (/var/www/dalex.me/html/angular2/angular2-laravel/node_modules/angular-cli/commands/build.js:4:23)
    at Module._compile (module.js:410:26)
    at Object.Module._extensions..js (module.js:417:10)
    at Module.load (module.js:344:32)
    at Function.Module._load (module.js:301:12)
    at Module.require (module.js:354:17)
    at require (internal/module.js:12:17)
    at Class.module.exports.includedCommands (/var/www/dalex.me/html/angular2/angular2-laravel/node_modules/angular-cli/addon/index.js:21:16)
    at /var/www/dalex.me/html/angular2/angular2-laravel/node_modules/angular-cli/ember-cli/lib/models/project.js:335:61
    at Array.forEach (native)
    at Project.addonCommands (/var/www/dalex.me/html/angular2/angular2-laravel/node_modules/angular-cli/ember-cli/lib/models/project.js:334:15)
    at Project.eachAddonCommand (/var/www/dalex.me/html/angular2/angular2-laravel/node_modules/angular-cli/ember-cli/lib/models/project.js:369:30)
    at module.exports (/var/www/dalex.me/html/angular2/angular2-laravel/node_modules/angular-cli/ember-cli/lib/cli/lookup-command.js:33:13)
    at CLI.<anonymous> (/var/www/dalex.me/html/angular2/angular2-laravel/node_modules/angular-cli/ember-cli/lib/cli/cli.js:43:26)
    at tryCatch (/var/www/dalex.me/html/angular2/angular2-laravel/node_modules/rsvp/dist/rsvp.js:538:12)
    at invokeCallback (/var/www/dalex.me/html/angular2/angular2-laravel/node_modules/rsvp/dist/rsvp.js:553:13)
    at publish (/var/www/dalex.me/html/angular2/angular2-laravel/node_modules/rsvp/dist/rsvp.js:521:7)
    at flush (/var/www/dalex.me/html/angular2/angular2-laravel/node_modules/rsvp/dist/rsvp.js:2373:5)
    at nextTickCallbackWith0Args (node.js:419:9)
    at process._tickCallback (node.js:348:13)

If you have this in separate projects you can't make use of simplifying the index template using blade, which is also nice for passing in some initial config if required. Seems like using the CLI and building the application into an ng root directory or even into /resources/assets that builds to /public with absolutely no integration of the npm modules required for both and not using Laravel Elixir/Mix still allows for the front- and back-end to be decoupled with only a small amount of coupling introduced in the blade template and associated partials. Anyone agree or disagree? Opinions?

i can't find gulpfile.js

@cknarun forgot about this setup, it's hard to maintain. Try to make a RESTful api and connect to your angular app via http service. You can try my repository in github. Check the best answer in first page.

@eliyas5044 Thanks a lot for the repos. The GET method is working fine. But when I try to post a book via Postman, the JSON response is: Unexpected '<'. Any idea where the error is coming from?

OK! At least I decided to setup laravel and angular 4 separately. And I handled with the Access-Control-Allow-Origin problem. But I have some issue about authentication. When we use these two frameworks separately, laravel doesn't know the angular and angular also laravel which cause the missTokenMatch error in laravel. How should I solve this problem.

Thanks!

@blowedminds bro, please checkout these youtube videos about authentication, hope it might help you. And you have to use laravel-cors package for CORS.

@eliyas5044 thanks for advice! It was really helpfull. I watched the laravel + angular2 / vue.js play-list. But I have some questions. Should we use Laravel own Auth class and middleware or JWT-auth can satisfy our demands. To use Laravel Auth class, like JWT-auth does, can we send a GET request to the laravel from angular to get a token, like any web browser does normally. Then use token to make request from angular. Sorry, but, I want to make my Project with minimum dependencies.

@blowedminds - Laravel Auth class don't provide token based authentication, it's for session based authentication. If you want to use laravel package, you can use passport. But i don't have experience about passport. JWT package creates a unique token for your laravel app. So you have to send this token with url in each request from your angular app. btw, that video explain more than me.

Happy coding!

@eliyas5044 , yeah! I just figured out laravel passport and trying to understand it. I think I will go with the passport support. It would also support us for mobile app. If I cannot handle with passport, JWT-auth will be the best. Anyway, thanks for everythig!!!

Hey @eliyas5044 first of all very thanks for all your stuff , Now my question is if I create one more component in resource/view/typescript folder then changes are not reflected in public/app folder even after gulp command. I am getting not found error. Please say your words on this.

@Ramkishan11 If you create new file in typescript folder, you have to add that in gulpfile.js too. See the first page, where i shown the code Then run gulp command. My opinion, try to create a RESTful api by laravel and connect your angular app vai http service.

Happy coding :)

I agree with advice of completely separating Angular and Laravel but sometimes you don't have a choice.

You could be working for a client who wants Angular integrated into Laravel or you could try to extend already existing Laravel project with some new cool features using Angular.

So complete separation of the two is great idea but not always the option.

Here is how I have done it and you don't have to edit anything in the node_modules.

Also Angular is integrated in Laravel but all of the Angular code is kept completely separate.

https://github.com/toni-rmc/laravel-angular-integration

This project supports working in the watch mode.

@eliyas5044 how you implement csrf protection when laravel and angular is seperated can you please lend me a hand i having trouble on xsrf i getting tokenmismatch response