Angular 2 Laravel start - laravel-5

Question

I follow this tutorial
https://www.codetutorial.io/laravel-5-and-angular-2-beta-setup/
and this
https://laracasts.com/discuss/channels/laravel/angular2-laravel-hello-world-app
But I get that error:
Error: #http://localhost/naturedev/public/js/app.js:40:1
#http://localhost/naturedev/public/js/app.js:1:1
Zone</ZoneDelegate</ZoneDelegate.prototype.invoke#http://localhost/naturedev/public/js/angular2/bundles/angular2-polyfills.js:332:20
Zone</Zone</Zone.prototype.run#http://localhost/naturedev/public/js/angular2/bundles/angular2-polyfills.js:227:25
scheduleResolveOrReject/<#http://localhost/naturedev/public/js/angular2/bundles/angular2-polyfills.js:576:53
Zone</ZoneDelegate</ZoneDelegate.prototype.invokeTask#http://localhost/naturedev/public/js/angular2/bundles/angular2-polyfills.js:365:24
Zone</Zone</Zone.prototype.runTask#http://localhost/naturedev/public/js/angular2/bundles/angular2-polyfills.js:263:29
drainMicroTaskQueue#http://localhost/naturedev/public/js/angular2/bundles/angular2-polyfills.js:482:26
ZoneTask/this.invoke#http://localhost/naturedev/public/js/angular2/bundles/angular2-polyfills.js:434:22
Evaluating http://localhost/naturedev/public/js/app.js
Error loading http://localhost/naturedev/public/js/app.js
var newErr = new Error(newMsg, err.fileName, err.lineNumber);
This is how my gulp file look like:
var gulp = require("gulp");
var bower = require("gulp-bower");
var elixir = require("laravel-elixir");
var elixirTypscript = require('elixir-typescript');
elixir(function (mix) {
mix.copy('node_modules/angular2', 'public/js/angular2');
mix.copy('node_modules/rxjs', 'public/js/rxjs');
mix.copy('node_modules/systemjs', 'public/js/systemjs');
mix.copy('node_modules/es6-promise', 'public/js/es6-promise');
mix.copy('node_modules/es6-shim', 'public/js/es6-shim');
mix.copy('node_modules/zone.js/dist', 'public/js/zone.js/dist');
mix.typescript(
[
'app.component.ts',
'boot.ts'
],
'public/js',
{
"target": "es5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
}
);
});
Full code is just published here.
Gulp create app.js file from boot.ts and app.component.ts.
Can anybody help me?

Answer 1

Firstly, you need to open file node_modules\elixir-typescript\index.js:
Comment out this line ".pipe($.concat(paths.output.name))" : So the generated files won't be combine in to one single files. The two js files will be generated to "public/js" as your configuration.
I checked your code, you already had this: "///<reference path="../../../public/js/angular2/typings/browser.d.ts"/>" in boot.ts file. That's good.
Modify the file index.blade.php change System.import('js/app') to System.import('js/boot')
Modify the file app.component.ts, change selector: 'my-app' to selector: 'naturedev-app'. That is how you configured in index.blade.php, so we need to make them with the same name.
And the last one, you need to change the gulpfile.js configuration, find this:
mix.copy('node_modules/angular2', 'public/js/angular2');
mix.copy('node_modules/rxjs', 'public/js/rxjs');
mix.copy('node_modules/systemjs', 'public/js/systemjs');
mix.copy('node_modules/es6-promise', 'public/js/es6-promise');
mix.copy('node_modules/es6-shim', 'public/js/es6-shim');
And change to
mix.copy('node_modules/angular2', 'public/angular2');
mix.copy('node_modules/rxjs', 'public/rxjs');
mix.copy('node_modules/systemjs', 'public/systemjs');
mix.copy('node_modules/es6-promise', 'public/es6-promise');
mix.copy('node_modules/es6-shim', 'public/es6-shim');
The structure needs to be changed to match your configuration. This is a quick fix. If I have time I'll find another solution for you.
If you need to test Angular 2, Laravel 5.2. I think with those modifications you're ready to go.
I also committed changes to your GitHub.
Hope it helps you!

Answer 2

try to open firefox manually as root
go to its directory (eventully in your personal repository) and run it .firefox , this error will diseppear , and appearly its related to the user privileges relatively to node_modules , the problem isn't clear , but like that u may run normally your app