我正在尝试使用gulp构建工具在Angular 2的typescript中使用nodejs构建一个完整的打字稿应用程序。
gulp汇编了从/src
到/dist
,从.ts
到.js
的所有内容(几乎没有问题)。
当我启动应用程序时,一切正常,除了:
zone.js:101 GET
http://localhost:3000/app/boot.component
404(不是 实测值)。
但是当我改变时
import { BootComponent } from './app/boot.component';
到
import { BootComponent } from './app/boot.component.js';
我只得到一个ts错误(当然,因为他会找一个.ts文件),但它确实有效。
如何在不添加.js的情况下使其工作?
这是我的sysmtemjs.config.js:
(function(global) {
// map tells the System loader where to look for things
var map = {
'@angular': 'lib/@angular',
'rxjs': 'lib/rxjs'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'main': { main: 'main.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
};
var ngPackageNames = [
'common',
'compiler',
'core',
'forms',
'http',
'platform-browser',
'platform-browser-dynamic',
'router'
];
// Individual files (~300 requests):
function packIndex(pkgName) {
packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
}
for (var x in ngPackageNames) {
packIndex(ngPackageNames[x]);
}
var config = {
map: map,
packages: packages
};
System.config(config);
})(this);
在我的index.html中,我还必须将main作为main.js导入:
System.import('main.js').catch(function(err){ console.error(err); });
答案 0 :(得分:1)
您需要告诉SystemJS您的app目录以及如何从中加载组件。通过在systemjs.config.js
文件中添加应用包来执行此操作。
var packages = {
'main': { main: 'main.js', defaultExtension: 'js' },
'app': { defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
};
答案 1 :(得分:0)
var map = {
'main': 'my_app_folder',
'@angular': 'lib/@angular',
'rxjs': 'lib/rxjs'
};
其中my_app_folder
是找到main.js
的文件夹。