Я изучаю angular2, выполняя простой проект, ссылаясь на angular website. Зависимости устанавливаются с использованием npm, а для публикации используется как lite-сервер, так и в учебнике.Angular2: Перезагрузка маршрутизируемого модуля, не получающего js и css-файлы
Теперь кодирование всего в одном модуле приложения вместе с модулем маршрутизации. Маршрутизация сконфигурирован как
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>
Все работает отлично:
локальный: 3000 загружает страницу входа в
успешного входа нагрузки Transaction компонентов по умолчанию (Теперь браузер Вкладка URL показывает локальный: 3000/панель/транзакции)
Вид визуализирован со стилями внутри style.css
Можете перейти к профилю.
За исключением:
На перегрузочного локального хоста: 3000 стр/панель/транзакции, нажав кнопку браузера перезагрузки, она показывает "Загрузка ...". Браузер консоль показывает ошибку
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
Я вижу локальный: 3000/панель/.. не точное местоположение.
Почему это происходит?
Какое решение?
В ходе дальнейших исследований было выполнено множество сценариев без загрузки страницы. Я думаю, что страница загружается для меня, но не js и css-файлы. Так что нет Systemjs файл также, поэтому страница не отображается.
Также передано this.
Примечание: добавлено <base href="/"> в index.html
Поместите '