Hi,
I’m trying to separate the Typescript (TS) and the JavaScript (JS) files in different folders. I’m able to separate the files
but when I run the application, I’m getting the message “loading AppComponent content here…”.
In lite-server the message received: 404 /main.js
According to the console display:
Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/main.js
Error: XHR error (404 Not Found) loading http://localhost:3000/main.js
I think it looks like its trying to load main.js file but I’m not sure how to resolve that.
side note, the quick start files were downloaded from angular.io
how do i go about fixing this issue?
what I did separate the files:
1. created a folder: src/dist
2. modified tsconfig.js
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [ "es2015", "dom" ],
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true,
"typeRoots": [
"../node_modules/@types/"
],
"outDir": "dist"
},
"compileOnSave": true,
"exclude": [
"node_modules/*",
"**/*-aot.ts"
]
}
3. modified systemjs.config.js
// map tells the System loader where to look for things
map: {
// our app is within the app folder
'app': 'dist',
//also tried
map: {
// our app is within the app folder
'app': 'dist/app',
4 main.ts not modified
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule);