Question

我正在尝试修改现有的角度应用以适应此Starter Project的结构。无论如何，所以我的app模块有一个子模块（教程）。看起来像这样：

登陆根域然后使用路由器链接导航到http://localhost:3000/tutorial/chapter/0时，一切正常。但是，如果我刷新页面或尝试直接转到该链接，我会收到错误：

Unhandled Promise rejection: Template parse errors:
'my-app' is not a known element:
1. If 'my-app' is an Angular component, then verify that it is part of this module.
2. If 'my-app' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. ("

<body>
    [ERROR ->]<my-app>
        <div class="valign-wrapper">
            <div class="preloader-wrapper active valign"): a@30:4 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse

所以我相信这种情况正在发生，因为而不是那个链接到app组件的url，教程子模块作为孩子，它只是链接到TutorialModule，然后是<my-app></my-app>标签来自{ {1}}无法识别。这之前有用，所以我不确定这个新配置的哪个方面打破了这个。

这是我的index.html：

app.routes.ts

和我的import { homeComponent } from './components/home/home.component'; import { pluginsComponent } from './components/plugins/plugins.component'; import { Routes, RouterModule } from '@angular/router'; const appRoutes: Routes = [ { path: '', component: homeComponent }, { path: 'tutorial', loadChildren: 'tutorial/tutorial.module', pathMatch: 'prefix'}, { path: 'plugins', component: pluginsComponent } ]; export const appRoutingProviders: any[] = []; export const routing = RouterModule.forRoot(appRoutes);：

tutorial.routes.ts

最后在我的import { Routes, RouterModule } from '@angular/router'; import { tutorialComponent } from './tutorial.component'; import { chapterComponent } from './chapter/chapter.component'; const tutorialRoutes: Routes = [ { path: 'tutorial', component: tutorialComponent, children: [ { path: 'chapter/:id', component: chapterComponent }, { path: '', redirectTo: 'chapter/0', pathMatch: 'full'}, ] } ]; export const tutorialRouting = RouterModule.forChild(tutorialRoutes);我定义了我的快速路线：

app.ts

为教程组件提供角度索引。

整个回购是here

Answer 1

问题是 index.html 文件，我有<base href=".">，应该是<base href="/">。我有一个错误报告here

Answer 2

@micronyks已在评论中说明了这一点，但您需要设置您的网络服务器以将所有请求重定向到您的index.html页面。然后，您的应用将加载并导航到您的＆＃34;深度＆＃34;链接。

Angular2.0路由器适用于组件而非模块？

2 个答案: