在绑定的Angular2应用中,SystemJS导入会静默失败
SystemJS import fails silently on bundled Angular2 app
我在使用SystemJS时遇到了麻烦。
我有一个典型的用Typescript编写的Angular2应用程序。我试图把我所有的应用程序。js打包成一个文件,以优化加载时间。
这个包是由gulp使用systemjs-builder创建的,像这样:
gulpfile.js
paths.compiledTs = "./wwwroot/app";
gulp.task('bundle:app', function (done) {
var builder = new Builder("/", './systemjs.config.js');
var builderConfig = {
normalize: true,
minify: true,
mangle: true,
runtime: false
};
builder.bundle(paths.compiledTs + '/main.js', paths.compiledTs + '/middleware-app.js', builderConfig)
.then(function () {
done();
})
.catch(function (err) {
console.log(err);
done();
});
});
bundle通过script标签加载。它可以正确地工作,因为在浏览器控制台中调用system .define会显示我的模块: System.defined
System.defined(图)
这是我的systemjs.config.js。如果我理解正确的话,导入"app"应该解析为wwwroot/app/main。,然后通过"bundles"参数转到bundle文件。systemjs.config.js
/**
* System configuration
*/
(function (global) {
// map tells the System loader where to look for things
var map = {
'app': 'wwwroot/app',
'@angular': 'wwwroot/lib/@angular'
};
// 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' },
'lodash': { defaultExtension: 'js' },
'moment': { defaultExtension: 'js' },
'pikaday': { defaultExtension: 'js' },
'ng2-translate': { defaultExtension: 'js' },
};
var ngPackageNames = [
'common',
'compiler',
'core',
'forms',
'http',
'platform-browser',
'platform-browser-dynamic',
'router'
];
// Individual files (~300 requests):
function packNgIndex(pkgName) {
packages['@angular/' + pkgName] = { main: 'index.js', defaultExtension: 'js' };
}
// Bundled (~40 requests):
function packNgUmd(pkgName) {
packages['@angular/' + pkgName] = { main: 'bundles/' + pkgName + '.umd.min.js', defaultExtension: 'js' };
}
// Most environments should use UMD; some (Karma) need the individual index files
var setNgPackageConfig = System.packageWithIndex ? packNgIndex : packNgUmd;
// Add package entries for angular packages
ngPackageNames.forEach(setNgPackageConfig);
var config = {
defaultJSExtensions: true,
baseURL: global.baseUrl,
paths: {
"lodash": "wwwroot/lib/lodash.min.js",
"moment": "wwwroot/lib/moment.min.js",
"pikaday": "wwwroot/lib/pikaday.js"
},
map: map,
packages: packages,
meta: {
pikaday: {
deps: ['moment']
},
'angular2/*': {
build: false
},
'rxjs/*': {
build: false
},
'ng2-translate/*': {
build: false
}
},
bundles: {
"wwwroot/lib/bundles/rxjs.min.js": [
"rxjs/*",
"rxjs/operator/*",
"rxjs/observable/*",
"rxjs/add/operator/*",
"rxjs/add/observable/*",
"rxjs/util/*"
],
"wwwroot/lib/bundles/ng2-translate.min.js": [
"ng2-translate/*"
],
"wwwroot/app/middleware-app.js": [
"app/*",
"app/common/busy-indicator/*",
"app/common/config/*",
"app/common/date-picker/*",
"app/common/dialog/*",
"app/common/guards/*",
"app/common/interface/*",
"app/common/login/*",
"app/common/models/*",
"app/common/pagination/*",
"app/common/services/*",
"app/common/storage/*",
"app/i18n/*",
"app/layout/*",
"app/pages/authentication/*",
"app/pages/logs/*",
"app/pages/monitoring/*",
"app/pages/not-found/*",
"app/pages/referentials/*",
"app/pages/reports/*"
]
}
};
System.config(config);
})(this);
然而,一旦我试图从index.html导入我的入口点,什么也没有发生(这意味着我没有进入我的then回调或catch块)。以下是我索引的摘录:
<script src="@Href("~/wwwroot/app/middleware-app.js")"></script>
<script type="text/javascript">
System.import('app')
.then(app => {
console.log("never entered");
var endpoint = '@endpointUrl';
var version = '@Html.Version()';
var production = @Html.IsProductionEnabled();
app.run(endpoint, version, production);
})
.catch(function (err) {
console.log("never entered as well");
console.error(err);
});
</script>
我尝试过各种各样的事情,比如使用bundleStatic代替,导入app/main.js,改变捆绑选项。谢谢你提供的任何帮助。
我认为你已经相当高级了,并且对angular有很好的理解。
我对@angular/upgrade
组件有类似的问题。在严重头痛之后,我发现一些错误信息在angular2中丢失了(即使在当前稳定的包中)。
可能的错误来源可能在@angular/compiler
内部。RuntimeCompiler.compileComponents()
正在丢失来自CompileMetadataResolver.getNgModuleMetadata()
的消息。简单但不理想的解决方案是在try-catch块中封装对getNgModuleMetadata
的调用。
当你使用捆绑编译器和angular 2.0.0时的解决方案:
compiler.umd.js: 16799行
改变:
RuntimeCompiler.prototype._compileComponents = function (mainModule, isSync) {
var _this = this;
var templates = new Set();
var loadingPromises = [];
var ngModule = this._metadataResolver.getNgModuleMetadata(mainModule);
ngModule.transitiveModule.modules.forEach(function (localModuleMeta) {
...
:
RuntimeCompiler.prototype._compileComponents = function (mainModule, isSync) {
var _this = this;
var templates = new Set();
var loadingPromises = [];
try {
var ngModule = this._metadataResolver.getNgModuleMetadata(mainModule);
} catch(e) {
console.log(e);
throw e;
}
ngModule.transitiveModule.modules.forEach(function (localModuleMeta) {
...
显然,这不是理想的解决方案,但我能够发现我的一个模块有循环依赖(这导致undefined
而不是NgModule.import
内的有效服务)。
- 如何使用url加载程序在webpack中导入多个图像
- 如何将JSON数据导入我的ejs模板
- 如何将不可变的js导入angular 2(alpha)
- 将数据从javascript文件导入VB.Net页面
- 导入jQuery脚本获胜'我不处理html文件
- javascript导入的最佳实践是什么
- 将CSV文件从URL导入Node.js
- Typescript导入导出的类会发出require(..),从而导致浏览器错误
- 如何将csv数据导入netsuite
- Django可以'不能在设置中导入ckeditor,但可以在shell中导入
- 在SystemJS中延迟导入
- SystemJS导入“;基本脚本“;来自目录,类似于Python
- Webstorm SystemJS导入解析错误
- SystemJS-ES6模块加载器-导入时层次结构过多
- 使用electron和Systemjs导入节点模块
- 如何从捆绑文件中导入命名的SystemJS模块
- systemjs的导入出错了
- 在绑定的Angular2应用中,SystemJS导入会静默失败
- 使用typescript导入/导出,不需要requireJS或systemJS
- 如何将模块添加到我的SystemJs配置文件中,以便我可以以angular方式导入它