laravel中的Angular 2不起作用

时间:2016-08-26 16:57:10

标签: angular laravel laravel-elixir

所以我跟着this tutorial,最后我收到了这个错误

const elixir = require('laravel-elixir'); var elixirTypscript = require('elixir-typescript'); elixir(function(mix) { mix.sass('app.scss'); 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'); mix.copy('node_modules/zone.js', 'public/zone.js'); mix.typescript( [ 'app.component.ts', 'boot.ts' ], 'public/', { "target": "es5", "module": "system", "moduleResolution": "node", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "removeComments": false, "noImplicitAny": false } ); });

这是我的gulpfile:

import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    template: `<h1>My First Angular 2 App</h1>`
})
export class AppComponent { }

这是我的app.component.ts:

///<reference path="../../../node_modules/angular2/typings/browser.d.ts"/>

import {bootstrap}    from 'angular2/platform/browser'
import {AppComponent} from './app.component'

bootstrap(AppComponent);

这是我的启动:

 <script src="es6-shim/es6-shim.min.js"></script>
    <script src="systemjs/dist/system-polyfills.js"></script>
    <script src="angular2/es6/dev/src/testing/shims_for_IE.js"></script>
    <script src="angular2/bundles/angular2-polyfills.js"></script>
    <script src="systemjs/dist/system.src.js"></script>
    <script src="rxjs/bundles/Rx.js"></script>
    <script src="angular2/bundles/angular2.dev.js"></script>
    <script>
        System.config({
            "defaultJSExtensions": true,
            packages: {
                app: {
                    format: 'register',
                    defaultExtension: 'js'
                }
            }
        });

        System.import('boot')
                .then(nPull, console.error.bind(console));
    </script>

最后是我的刀片视图如果重要的话我将这些线放在头标签中(我真的不知道了......)

var icons = $.map($.map(document.styleSheets, function(s) { 
    if(s.href && s.href.endsWith('font-awesome.css')) 
        return s; 
    return null; 
})[0].rules, function(r) { 
    if(r.cssText.indexOf('::before { content: ') > 0) 
        return r.cssText.substring(4,r.cssText.indexOf('::')); 
    return null; });

1 个答案:

答案 0 :(得分:0)

确保您的文件.ts位于“resources / assets / typescript /”中,并且您在页面上的调用具有完整路径,例如“app / typescript /.

在致电Gulp之后,它将使用“resources / assets / typescript /”中的文件创建“app / typescript /”

System.import('app/typescript/boot').catch(console.log.bind(console))
在我调整后,

我的设置工作正常。