我正在尝试适应从角度教程中制作快速入门项目以使用 asp.net5 站点。
到目前为止,它看起来应该可以正常工作......我按照教程并从那里获取代码(调整路径以匹配我的 asp 网站中的路径)。但是我不断收到这个“Unexpected Token <”错误,这非常具有误导性......
我发现了一些使用 beta9 的示例,但我更愿意运行最新版本的 angular2 (rc1),所以我已经坚持了几个小时了......
无论如何,这就是我的项目文件的外观:
索引.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>
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 { }
这是我的文件夹结构(lib 文件夹是通过 gulp 命令生成的):
非常感谢任何帮助!