我正在测试我的Angular 2版本的QuickStart教程,我在其中使用了一个bundle js文件. index.html是这样的:
原文链接:https://www.f2er.com/angularjs/141732.html<html> <head> <title>Angular 2 QuickStart Deploy</title> <Meta charset="UTF-8"> <Meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> <link rel="stylesheet" href="css/styles.css"> <!-- 1. Load libraries --> <!-- Polyfill(s) for older browsers --> <script src="lib/shim.min.js"></script> <script src="lib/zone.js"></script> <script src="lib/Reflect.js"></script> <script src="lib/system.src.js"></script> <script> System.import('app').catch(function(err) { console.error(err); }); </script> </head> <!-- 2. Display the application --> <body> <my-app>Loading...</my-app> <!-- application bundle --> <script src="app/bundle.app.js"></script> </body> </html>
因此,当我执行此操作时,我的Hello world消息显示在屏幕上,但是控制台语法错误中出现错误:意外令牌< 经过大量测试后,我意识到如果我从index.html文件中删除以下行,一切正常,并且不会显示任何错误消息.
System.import(‘app’).catch(function(err){console.error(err);});
所以……我认为这一行是应用程序的入口点,带有引导程序的主文件,但显然它不需要.我错过了什么吗?
谢谢.
UPDATE
这是有和没有System.import的结果的2个屏幕截图
在这两种情况下,它似乎都在工作,当System.import不在index.html中时没有错误,否则会出错.此外,当System.import在索引中时,似乎它正在尝试加载应用程序模块,并且不知何故它会给出错误.我真的不明白为什么会这样.
@L_301_1@
另外,我的systemjs.config.js关于app:
(function(global) { // map tells the System loader where to look for things var map = { 'app': 'app','@angular': 'node_modules/@angular','rxjs': 'node_modules/rxjs' }; // 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' } }; ...
我使用systemjs-builder在Gulp中创建了bundle
gulp.task('bundle:app',() => { builder.buildStatic('app/*.js','web/app/bundle.app.js') .then(function() { console.log('Build complete'); }) .catch(function(err) { console.log('error ' + err); }) })