Currently in the process of developing an Angular 2 application, with the specific requirement to consolidate all resulting Javascript files into a single .js file called output.js.
Now, the challenge is to incorporate map configuration within System.config.js.
In this configuration, we typically specify the folder locations for various modules.
For example:
var map = {
'@angular': 'node_modules/@angular'
};However, with all the content now consolidated into a single Javascript file, how should these mappings be defined?
The issue I am encountering as a result of this setup is that when attempting to load the HTML, it fails to locate the @angular module internally due to differing paths.
This is what my HTML structure looks like:
<html>
<head>
<script src="output.js"></script>
</head>
<body>
<test-app>Loading...</test-app>
<script>
System.import('runtime/main').then(null, function(err) {console.log(err)});
</script>
</body>
</html>My System.config.js setup appears as follows:
(function (global) {
// The map specifies where the System loader should look for resources
var map = {
'app': 'dist',
'rxjs': 'node_modules/rxjs',
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
'@angular': 'node_modules/@angular',
'ng2-img-cropper': 'ng2-img-cropper'
};
//This section poses problems due to references pointing to node_modules which need updating
// Packages dictate how the system loads resources without specified filenames or extensions
var packages = {
'app': {main: 'newAgain.js', defaultExtension: 'js'},
'rxjs': {defaultExtension: 'js'},
'angular2-in-memory-web-api': {defaultExtension: 'js'},
};
var packageNames = [
'@angular/common',
'@angular/compiler',
'@angular/core',
'@angular/platform-browser',
'@angular/platform-browser-dynamic'
];
// Define package entries for angular packages such as '@angular/common': { main: 'index.js', defaultExtension: 'js' }
packageNames.forEach(function (pkgName) {
packages[pkgName] = {main: 'index.js', defaultExtension: 'js'};
});
var config = {
packages: packages
};
//filterSystemConfig allows index.html to modify the config before registration
if (global.filterSystemConfig) {
global.filterSystemConfig(config);
}
System.config(config);
})(this);Summary:
- A html file exists
- A singular .js file (output.js) contains scripts from all dependencies and project-specific js
Requirement:
- Properly link/map modules in the system.config.js configuration
Any assistance on this matter would be greatly appreciated!
Thank you.