使用 Angular 5 导入 BrowserAnimationsModule 时出现意外标记“<”

Question

我正在尝试将 BrowserAnimationModule 添加到我的 Angular 5 项目中，但我似乎遇到了一个非常愚蠢的错误。

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

如果我不将 BroswerAnimationsModule 放入我的 NgModule 的导入中，该项目工作正常。

当我加载模块时，它似乎在错误的位置搜索不存在的文件。按照 The Angular 站点上的说明进行操作时，我注意到它是从 @angular/platform-browser/animations/animations 中较低的一层拉出来的。我假设我的 system.config 有问题，但对于我的生活，我就是无法弄清楚......感谢任何帮助。谢谢

system.config.js

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

app.module.ts

//Main folder where Angular Extras are added.
//Angular Libraries
    import { NgModule, enableProdMode } from '@angular/core';
    import { FormsModule } from '@angular/forms'
    import { NgbModule,NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap';
    import { BrowserModule, platformBrowser } from '@angular/platform-browser';
    import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
import { HttpModule } from '@angular/http';

import { RouterModule, Routes } from '@angular/router'


//Components
import { AppComponent } from './app.component';
import { INHome } from './Components/MainComponents/INHome/INHome';
import { LogoSection } from './Components/MainComponents/LogoSection/LogoSection';
import { NavBar } from './Components/MainComponents/NavBar/NavBar';
import { LeftNav } from './Components/MainComponents/LeftNav/LeftNav';
import { LineStatus } from './Components/MainComponents/LogoSection/LineStatus/LineStatus';
import { Favorites } from './Components/MainComponents/RightNav/Favorites/Favorites';
import { SearchableLinks } from './Components/MainComponents/RightNav/SearchableLinks/SearchableLinks';
import { DailySummary } from './Components/MainComponents/Departments/DailySummary/DailySummary';
import { NewsFeed } from './Components/MainComponents/Departments/DailySummary/NewsFeed/NewsFeed'
import { EditFavorites } from './Components/MainComponents/RightNav/Favorites/EditFavorites/EditFavorites'
import { Documents } from './Components/MainComponents/Departments/Documents/Documents'
import { TestComponent } from './Components/MainComponents/TestComponent/TestComponent';
import {Safety } from './Components/MainComponents/Departments/Safety/Safety'

//Classes
import { Branch, Leaf, UserDetails } from './Classes/FrontendClasses';

//Data Reading Services
import { StaticDRS } from './DataReadingServices/StaticDRS';
import { UserDetailsDRS } from './DataReadingServices/UserDetailsDRS';


//Pipes
import { LinkPipe } from '../app/Pipes/SearchableLinks'

//Utilities


enableProdMode();


//Routing Paths
const appRoutes: Routes = [
    { path: 'Home.aspx', redirectTo: 'INHome/DailySummary', pathMatch: 'full' },
    { path: '', redirectTo:'INHome/DailySummary', pathMatch:'full' },
    {
        path: 'INHome', component: INHome, children: [
            { path: 'DailySummary', component: DailySummary },
            { path: 'Documents', component: Documents },
            { path: 'Safety',component: Safety},
            { path:'', redirectTo:'DailySummary', pathMatch:'full'}
        ]
    }
    //{path:'**',component:TestComponent}
]


@NgModule({
    imports: [BrowserModule, HttpModule, NgbModule.forRoot(), FormsModule, RouterModule.forRoot(appRoutes), NgbAccordionModule,BrowserAnimationsModule],
    declarations: [AppComponent, TestComponent, INHome, LogoSection, NavBar, LeftNav, LineStatus, Favorites, SearchableLinks, DailySummary, NewsFeed, EditFavorites, LinkPipe, Documents, Safety],
    providers: [UserDetailsDRS, StaticDRS,UserDetails],
    bootstrap: [AppComponent],
})
export class AppModule { }

如果您需要更多文件，请告诉我。

Answer 1

对于那些和我有同样问题的可怜的人：

抛出的错误实际上是 404 错误。由于所有内容都通过我的 index.html 进行路由（这就是我构建应用程序的方式），因此当找不到文件时，它会转到以 <.为了解决这个问题，我将这三行添加到地图中的 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'

Answer 2

我遇到了同样的问题，我已经通过修改 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',

使用 Angular 5 导入 BrowserAnimationsModule 时出现意外标记“<”

Unexpected Token "<" when Importing BrowserAnimationsModule with Angular 5

javascript

animation

typescript

systemjs

angular