Reputation: 421
I get a 404 Not Found in the Chrome developer console for the app.module.js because the URL trying to be resolved, after first typing in the URL to index.html, is like this, notice the app.module is missing the .js extension:
http://localhost:8080/someTomcatContext/scripts/someAppName/src/app/app.module
Here is the folder structure:
node_modules
package.json
styles.css
systemjs.config.extras.js
systemjs.config.js
systemjs-angular-loader.js
tslint.json
src
|-- app
| |-- app.component.ts
| |-- app.module.ts
| |-- app.routes.ts
|-- index.html
|-- main.ts
|-- tsconfig.json
I have the following system.config.js
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': '../node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
'app': 'src/app',
// angular bundles
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
defaultExtension: 'js',
meta: {
'./*.js': {
loader: 'systemjs-angular-loader.js'
}
}
},
rxjs: {
defaultExtension: 'js'
}
}
});
})(this);
I have tried changing the wildcard with the following two variations in order to append the .js extension inside the system.config.js shown above:
'./src/app/*.js'
'./app/*.js'
Here is the contents of the index.html:
<!DOCTYPE html>
<html>
<head>
<title>Angular QuickStart</title>
<script>document.write('<base href="' + document.location + '" />');
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../styles.css">
<!-- Polyfill(s) for older browsers -->
<script src="../node_modules/core-js/client/shim.min.js"></script>
<script src="../node_modules/zone.js/dist/zone.js"></script>
<script src="../node_modules/systemjs/dist/system.src.js"></script>
<script src="../systemjs.config.js"></script>
<script>
System.import('main.js').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<my-app>Loading AppComponent content here ...</my-app>
</body>
</html>
Here is the main.ts:
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
Upvotes: 0
Views: 764
Reputation: 201
Sorry, this may be coming in too late, but I hope it helps someone else. I experienced the same issue with the angular quickstart project. Turns out you need to add a defaultJSExtensions
flag to System.config in systemjs.config.js file, and set that to true like so.
System.config(
//paths and other settings...
defaultJSExtensions : true
)(this);
See issue on github https://github.com/systemjs/systemjs/issues/812
Upvotes: 1
Reputation: 421
I upgraded my Angular 2 application to an Angular 4 application, and I used the quickstart project (https://github.com/angular/quickstart.git) as a skeleton.
I placed my application specific TS files in the src/app folder and got this working with the following structure:
node_modules
package.json
tslint.json
src
|-- app
| |-- app.component.ts
| |-- app.module.ts
| |-- app.routes.ts
|-- index.html
|-- main.ts
|-- styles.css
|-- systemjs.config.extras.js
|-- systemjs.config.js
|-- systemjs-angular-loader.js
|-- tsconfig.json
My systemjs.config.js looks like this:
/**
* System configuration for Angular samples
* Adjust as necessary for your application needs.
*/
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': '../node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
'app': 'app',
// angular bundles
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
defaultExtension: 'js',
meta: {
'./*.js': {
loader: 'systemjs-angular-loader.js'
}
}
},
rxjs: {
defaultExtension: 'js'
}
}
});
})(this);
And my index.html looks like this:
<!DOCTYPE html>
<html>
<head>
<title>Angular QuickStart</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- Polyfill(s) for older browsers -->
<script src="../node_modules/core-js/client/shim.min.js"></script>
<script src="../node_modules/zone.js/dist/zone.js"></script>
<script src="../node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('main.js').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<my-app>Loading AppComponent content here ...</my-app>
</body>
</html>
The main.ts looks like this:
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
Upvotes: 1