Question

我正在通过一个引用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加载登录页面
默认情况下，成功登录会加载Transaction Component（现在是浏览器 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="/">

Answer 1

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

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

1 个答案: