Angular2：重新加载路由模块不获取 js 和 css 文件答案

【问题标题】：Angular2 : Reloading routed module not fetching js and css filesAngular2：重新加载路由模块不获取 js 和 css 文件
【发布时间】：2017-03-15 10:57:55
【问题描述】：

我正在通过一个引用angular website 的简单项目来学习 angular2。使用 npm 安装依赖项，并使用 lite-server 进行发布，如教程中所述。

现在将所有内容与路由模块一起编码在单个应用模块中。路由配置为

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>

一切正常：

localhost:3000 加载登录页面
登录成功默认加载事务组件（现在浏览器 url 选项卡显示 localhost:3000/dashboard/transaction)
在 style.css 中使用样式渲染视图
可以导航到配置文件组件。

除外：

在通过单击浏览器重新加载按钮重新加载 localhost:3000/dashboard/transaction 页面时，它显示“正在加载...”。浏览器控制台显示错误

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

我看到 localhost:3000/dashboard/.. 不是确切的位置。

为什么会这样？

解决办法是什么？

在进一步研究中，遇到了许多没有页面加载的情况。我认为页面正在为我加载，但不是 js 和 css 文件。所以也没有 Systemjs 文件，这就是页面不呈现的原因。

也称为this。

注意：在index.html

中添加<base href="/">

【问题讨论】：

标签： angular typescript angular2-routing

【解决方案1】：

您必须将<base href="/"> 放在index.html 中的脚本和链接标签上方，因为浏览器从上到下读取。他首先接近script 和link 标签并开始处理它们。在那之后他找到了base标签，但是已经太晚了，那时浏览器意识到他已经获取了这些文件是个白痴，但也有点责备你没有尽快通知他base位置。为您解决此问题的唯一方法是帮助他，并将base 标签放在任何资源获取标签上方。

【讨论】：

将<base href="/"> 放在script 标签之上，它就很简单了。谢谢@PierreDuc