Angular2 RC1 Unexpected Token <
Question
I am trying to adapt to make the quickstart project from the angular tutorial to work with an asp.net5 site.
So far, it does look like it should work fine...I followed the tutorial and took the code from there (adjusting paths to match the ones in my asp net site). However I keep getting this "Unexpected Token <" error which is quite misleading...
I found some samples which use beta9, but I would preffer to run the latest version of angular2 (rc1), so I have been stuck with this for some hours now...
Anyways, this is how my project files look:
index.html:
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Trail Running Life</title>
<base href="/">
<link rel="stylesheet" href="/css/bootstrap.css">
<link rel="stylesheet" href="/css/site.css">
</head>
<body>
<app>
Loading...
</app>
<script src="/lib/jquery.js"></script>
<script src="/lib/bootstrap.js"></script>
<script src="/lib/es6-shim.js"></script>
<script src="/lib/zone.js"></script>
<script src="/lib/Reflect.js"></script>
<script src="/lib/system.src.js"></script>
<script src="/system.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</body>
</html>
the system.config.js:
(function (global) {
// map tells the System loader where to look for things
var map = {
'app': 'app', // 'dist',
'rxjs': 'lib',
'@angular': 'lib/angular2'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'main.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' }
};
var packageNames = [
'@angular/common',
'@angular/compiler',
'@angular/core',
'@angular/http',
'@angular/platform-browser',
'@angular/platform-browser-dynamic',
'@angular/router',
'@angular/router-deprecated',
'@angular/testing',
'@angular/upgrade'
];
// add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
packageNames.forEach(function (pkgName) {
packages[pkgName] = { defaultExtension: 'js' };
});
var config = {
map: map,
packages: packages
}
// filterSystemConfig - index.html's chance to modify config before we register it.
if (global.filterSystemConfig) { global.filterSystemConfig(config); }
System.config(config);
})(this);
main.ts
import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
bootstrap(AppComponent);
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app',
template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }
And this is my folder structure (the lib folder is generated via a gulp command):
Any help greatly appreciated!
3 answers
solution1
1 2016-05-10 23:30:06
You are missing the entire Angular 2 RC modules which are now published under @angular name. You have modules under name angular2 which is related to Angular 2 beta and has been renamed to @angular in RC1 release. Details of this change has been documented here . You can also see that you are referencing these modules via packageNames array in your system.config.js script.
Make sure you are getting the dependencies by adding them to your package.json file:
"dependencies": {
"@angular/common": "2.0.0-rc.1",
"@angular/compiler": "2.0.0-rc.1",
"@angular/core": "2.0.0-rc.1",
"@angular/http": "2.0.0-rc.1",
"@angular/platform-browser": "2.0.0-rc.1",
"@angular/platform-browser-dynamic": "2.0.0-rc.1",
"@angular/router": "2.0.0-rc.1",
"@angular/router-deprecated": "2.0.0-rc.1",
"@angular/upgrade": "2.0.0-rc.1",
"systemjs": "0.19.27",
"es6-shim": "^0.35.0",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"zone.js": "^0.6.12",
"angular2-in-memory-web-api": "0.0.7",
"bootstrap": "^3.3.6"
},
And that they are deployed in your lib folder with your gulp build.
solution2
0 2016-05-11 13:31:17
Are you getting this error when running an NPM install step? This could be an NPM Caching proxy issue. If you are using slightly older Nexus that does not support NPM package namespacing (ex: "@angular"), you will get errors that look a little similar to yours.
npm ERR! Unexpected token <
Can't install when behind an npm proxy such as Nexus or Artifactory #706
solution3
0 ACCPTED 2016-05-11 14:12:58
You are getting this error, because system.config.js has not enough (or has wrong) information to build correct paths to static .js files. It expects Javascript file but gets HTML response from your web server.
Look again at Developers tools (Chrome) Network's XHR responses for JS files and will find what mappings do you need to add to system.config.js.
Where are located your app files after build? is this 'app' folder? or 'app/dist'?...
Update
Try this:
(function (global) {
// map tells the System loader where to look for things
var map = {
'app': 'app', // 'dist',
'rxjs': 'lib',
'@angular': 'lib/@angular'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'main'},
'rxjs': { main: 'rx' }
};
var packageNames = [
'@angular/common',
'@angular/compiler',
'@angular/core',
'@angular/http',
'@angular/platform-browser',
'@angular/platform-browser-dynamic',
'@angular/router',
'@angular/router-deprecated',
'@angular/testing',
'@angular/upgrade'
];
// add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
packageNames.forEach(function (pkgName) {
packages[pkgName] = { main: 'index' };
});
var config = {
defaultJSExtensions: true,
map: map,
packages: packages
}
// filterSystemConfig - index.html's chance to modify config before we register it.
if (global.filterSystemConfig) { global.filterSystemConfig(config); }
System.config(config);
})(this);
- Optional: You can use
defaultJSExtensions: truefor entire config object; - Optional: Indicate default file
{main:'index'}for @angular packages; - Main reason: you are mapping to wrong folder for angular. Instead of '@angular': 'lib/angular2' should use '@angular': 'lib/@angular'. But if you have @angular.rc1 files in angular2 folder (just keeping old folder name) then please use your mapping but try with this Optional updates. They could help.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.