Question

我遵循本教程

https://www.codetutorial.io/laravel-5-and-angular-2-beta-setup/

和这个

https://laracasts.com/discuss/channels/laravel/angular2-laravel-hello-world-app

但我得到了这个错误：

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);

这就是我的gulp文件的样子：

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
    }
);
});

完整代码刚刚发布here。

Gulp从app.js和boot.ts创建app.component.ts文件。

有人能帮助我吗？

Answer 1

首先，您需要打开文件 node_modules \ elixir-typescript \ index.js ：

注释掉这一行“.pipe($.concat(paths.output.name))”：因此生成的文件不会合并到一个文件中。这两个js文件将作为您的配置生成“public / js”。

我检查了您的代码，您已经在 boot.ts 文件中输入了“///<reference path="../../../public/js/angular2/typings/browser.d.ts"/>”。那很好。

修改文件 index.blade.php 将System.import('js/app')更改为System.import('js/boot')

修改文件 app.component.ts ，将selector: 'my-app'更改为s elector: 'naturedev-app'。这就是您在 index.blade.php 中配置的方式，因此我们需要使用相同的名称进行配置。

最后一个，您需要更改 gulpfile.js 配置，找到这个：

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/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');

需要更改结构以匹配您的配置。这是一个快速解决方案。如果我有时间，我会为你找到另一种解决方案。

如果您需要测试Angular 2，Laravel 5.2。我认为通过这些修改，你已经准备好了。

我还对GitHub进行了更改。

希望它可以帮到你！

Answer 2

尝试以root身份手动打开firefox 转到它的目录（最终在你的个人存储库中）并运行它.firefox，这个错误会消失，而且它似乎与相对于node_modules的用户权限相关，问题不明确，但是你可能正常运行你的app

Angular 2 Laravel开始

2 个答案: