意外的令牌"<"使用Angular 5导入BrowserAnimationsModule时

时间:2018-02-07 14:27:00

标签: javascript angular typescript animation systemjs

我试图将BrowserAnimationModule添加到我的Angular 5项目中,而且我似乎发生了一个非常愚蠢的错误。

vnode

如果我没有将BroswerAnimationsModule放入我的NgModule的导入中,该项目就可以正常工作。

似乎当我加载模块时,它会搜索错误的位置以查找不存在的文件。按照The Angular网站上的说明操作时,我注意到它从@ angular / platform-b​​rowser / animations / animations中的较低级别拉出。我假设在这里我的system.config有问题,但对于我的生活,我只是想弄明白......任何帮助都表示赞赏。感谢

system.config.js

Error: (SystemJS) Unexpected token <
    SyntaxError: Unexpected token <
        at eval (<anonymous>)
        at Object.eval (http://localhost:56700/app/app.module.js:15:20)
        at eval (http://localhost:56700/app/app.module.js:71:4)
        at eval (http://localhost:56700/app/app.module.js:72:3)
    Evaluating http://localhost:56700/node_modules/@angular/platform-browser/animations.js

app.module.ts

(function (global) {
var map = {
    //Comment out when publishing.
    'app': '/app',
    '@angular': '/node_modules/@angular',
    'angular2-in-memory-web-api': '/node_modules/angular2-in-memory-web-api',
    'rxjs': '/node_modules/rxjs',
    '@ng-bootstrap/ng-bootstrap': '/node_modules/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js'

    //Uncomment when publishing.
    //'app' : 'app',
    //'@angular': 'node_modules/@angular',
    //'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    //'rxjs': 'node_modules/rxjs',
    //'@ng-bootstrap/ng-bootstrap': 'node_modules/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js'
};
    packages = {
        'app': { main: './main.js', defaultExtension: 'js' },
        'angular2-in-memory-web-api': { main: './index.js', defaultExtension: 'js' },
        'rxjs': { defaultExtension: 'js' }
    },
    ngPackageNames = [
        'common',
        'compiler',
        'core',
        'http',
        'platform-browser',
        'platform-browser-dynamic',
        'router',
        'forms',
        'animations'
    ];

    function packUmd(pkgName) {packages['@angular/' + pkgName] = { main: '/bundles/' + pkgName + '.umd.min.js', defaultExtension: 'js' };}

ngPackageNames.forEach(packUmd);


var config = {
    map: map,
    packages: packages
};

System.config(config);})(this);

如果您需要更多文件,请与我们联系。

2 个答案:

答案 0 :(得分:0)

对于任何与我有同样问题的可怜的灵魂:

抛出的错误实际上是404错误。由于所有内容都通过我的index.html进行路由(这就是我构建应用程序的方式),当它无法找到文件时,它会转到index.html,它以&lt;。开头。为了解决这个问题,我在地图中的system.config.js中添加了这三行:

'@angular/animations': '/node_modules/@angular/animations',
'@angular/animations/browser': '/node_modules/@angular/animations/bundles/animations-browser.umd.js',
'@angular/platform-browser/animations':'/node_modules/@angular/platform-browser/bundles/platform-browser-animations.umd.js'

答案 1 :(得分:0)

我遇到了同样的问题,我通过修改 systemjs.config.js 解决了这个问题。如果您已设置npm路径,则应添加以下行:

'@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
'@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
'@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',