Question

这是我的index.html文件和main.ts文件。浏览器只显示“正在加载...”并且不加载我创建的组件。请帮帮我。

<link rel="stylesheet" 
href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<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>
<script src="../node_modules/bootstrap/dist/js/bootstrap.min.js">
<script src="https://code.angularjs.org/tools/typescript.js">
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'>
</script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
  System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<blog>Loading...</blog>
</body>

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { SignInComponent } from './Login/SignIn/signin.component';
import { SignUpComponent } from './Login/SignUp/signup.component';
import { routing } from './app.routes';

@NgModule({
imports: [ BrowserModule, FormsModule, routing ],
declarations: [ AppComponent, SignUpComponent, SignInComponent],
bootstrap: [ AppComponent ]
})
class AppModule {}

platformBrowserDynamic().bootstrapModule(AppModule);`

Answer 1

尝试在index.html页面中添加<base href="/">作为head标记内的第一行

Answer 2

添加<base href="/">

您需要在构建文件中添加所有js和CSS文件。如果是angular-cli项目，则需要在.angular-cli.json文件中进行配置。

"styles": [
        "styles.css"
      ],
      "scripts": [
        "scripts.js"
],

浏览器不加载角度应用程序组件

2 个答案: