Ramanujan R Ramanujan R - 1 month ago 14
TypeScript Question

Angular2 : Reloading routed module not fetching js and css files

I am learning angular2 by doing a simple project referring angular website. Dependencies are installed using npm and a lite-server is used for publishing, as in the tutorial.

Now coding everything in a single app module along with a routing module. Routing is configured as

RouterModule.forRoot([
{
path: 'dashboard',
component: DashboardComponent,
children: [
{ path: 'profile', component: ProfileComponent },
{ path: 'transaction', component: TransactionFormComponent },
{ path: '', redirectTo: 'transaction', pathMatch: 'full' }
]
},
{ path: 'login', component: LoginFormComponent },
{ path: '', redirectTo: 'login', pathMatch: 'full' }
])


main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule)
.then(success => console.log(`Bootstrap success`))
.catch(err => console.error(err));


app.module.ts

@NgModule({
imports: [ BrowserModule, FormsModule, HttpModule, AppRoutingModule ],
declarations: [ AppComponent, LoginFormComponent, DashboardComponent,
ProfileComponent, TransactionFormComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }


index.html

<html>
<head>
<title>Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 1. Load libraries -->
<!-- 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/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
<!-- include bootstrap -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<base href="/">
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>


Everything works fine:


  • localhost:3000 loads login page

  • Successful login loads Transaction Component by default (Now browser
    url tab shows localhost:3000/dashboard/transaction)

  • The view is rendered with styles inside style.css

  • Can navigate to Profile Component.



Except:

On reloading localhost:3000/dashboard/transaction page by clicking browser reload button, it shows "Loading...". Browser console shows the error

GET
http://localhost:3000/dashboard/node_modules/core-js/client/shim.min.js [HTTP/1.1 404 Not Found 1ms]
GET
http://localhost:3000/dashboard/node_modules/zone.js/dist/zone.js [HTTP/1.1 404 Not Found 17ms]
GET
http://localhost:3000/dashboard/node_modules/systemjs/dist/system.src.js [HTTP/1.1 404 Not Found 12ms]
GET
http://localhost:3000/dashboard/systemjs.config.js [HTTP/1.1 404 Not Found 12ms]
GET
http://localhost:3000/dashboard/node_modules/bootstrap/dist/css/bootstrap.min.css [HTTP/1.1 404 Not Found 13ms]
GET
http://localhost:3000/dashboard/style.css [HTTP/1.1 404 Not Found 13ms]
GET
http://localhost:3000/dashboard/node_modules/systemjs/dist/system.src.js [HTTP/1.1 404 Not Found 2ms]
GET
http://localhost:3000/dashboard/systemjs.config.js [HTTP/1.1 404 Not Found 0ms]
ReferenceError: System is not defined


I see localhost:3000/dashboard/.. is not the exact location.

Why this happens?

What's the solution?

On further research, met with many scenarios with no page loading. I think page is loading for me, but not js and css files. So no Systemjs file also, that's why page is not rendered.

Also referred this.

Note : added
<base href="/">
in index.html

Answer

You have to place your <base href="/"> above the script and link tags in the index.html, because the browser reads from top to bottom. He first approaches the script and link tags and starts processing these. After that he finds the base tag, but then it's already too late and that's when the browser realises he's been an idiot for already fetching those files, but also blaming you a little for not notifying him sooner about the base location. Only way to fix this for you, is to help him, and place the base tag above any resource fetching tags.