我正在尝试将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的导入中,则该项目可以正常工作。
看来,当我在模块中加载时,它会搜索错误的位置,以找到不存在的文件。按照Angular站点上的说明时,我注意到它从 @Angular/Platform-browser/Animations/Animations中的一个级别降低。我假设我的系统有问题。谢谢
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 { }
让我知道您是否需要更多文件。
我遇到了同样的问题,并且已经通过修改我的 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',
对于与我有相同问题的任何可怜的灵魂:
丢弃的错误实际上是一个404错误。由于所有内容都通过我的index.html(这就是我构建应用程序的方式(进行路由,因此当它找不到以a&lt;的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'