Angular2 : Reloading routed module not fetching js and css files

Question

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

Poul Kruijt · Accepted Answer · 2016-11-02 08:34:45Z

3

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.

answered Nov 2, 2016 at 8:34

Poul Kruijt

72.3k12 gold badges152 silver badges152 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ramanujan R Over a year ago

Put <base href="/"> above script tags and its simply worked. Thanks @PierreDuc

Collectives™ on Stack Overflow

Angular2 : Reloading routed module not fetching js and css files

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related