为什么我的组件在带有打字稿的角度为2.4的zonejs中找不到

时间:2017-02-03 10:15:05

标签: angularjs typescript zonejs

我有一个用Typescript编写的角度2.45项目。我已经在我的应用程序的路由模块中添加了一个新组件,并且还导入了新组件。

当我启动应用程序时,我收到以下错误:

Unhandled Promise rejection: Component NewComponent is not part of any NgModule or the module has not been imported into your module. ; Zone: <root> ; Task: Promise.then ; Value: ZoneAwareError Error: Component NewComponent is not part of any NgModule or the module has not been imported into your module.
    at new Error (native)
    at JitCompiler._createCompiledHostTemplate (http://localhost:3000/static/src/assets/js/lib/@angular/compiler/bundles/compiler.umd.js:27482:23) [<root>]
    at eval (http://localhost:3000/static/src/assets/js/lib/@angular/compiler/bundles/compiler.umd.js:27448:41) [<root>]
    at Array.forEach (native) [<root>]
    at eval (http://localhost:3000/static/src/assets/js/lib/@angular/compiler/bundles/compiler.umd.js:27446:49) [<root>]
    at Array.forEach (native) [<root>]
    at JitCompiler._compileComponents (http://localhost:3000/static/src/assets/js/lib/@angular/compiler/bundles/compiler.umd.js:27435:47) [<root>]
    at createResult (http://localhost:3000/static/src/assets/js/lib/@angular/compiler/bundles/compiler.umd.js:27333:23) [<root>]
    at Zone.run (http://localhost:3000/static/src/assets/js/lib/zone.js/dist/zone.js:113:43) [<root> => <root>]
    at http://localhost:3000/static/src/assets/js/lib/zone.js/dist/zone.js:535:57 [<root>]
    at Zone.runTask (http://localhost:3000/static/src/assets/js/lib/zone.js/dist/zone.js:151:47) [<root> => <root>]
    at drainMicroTaskQueue (http://localhost:3000/static/src/assets/js/lib/zone.js/dist/zone.js:433:35) [<root>]
ZoneAwareError

这就是我在应用程序路由模块中所做的:

const routes: Routes =
[
    // common routes
    {
        path: 'NewComponent',
        component: NewComponent
    },
    ....
];
@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }

在我的AppModule中,我已将Component和RoutingModule添加到我的AppModule的声明和导入数组中。

@NgModule({
  imports: [
    ...,
    AppRoutingModule,
],
declarations: [
    ....,
    NewComponent
],
bootstrap: [AppComponent]
)}
export class AppModule {}

对于我的所有其他组件,这完全符合预期。 Angular找到组件,注入所需的一切并正确路由。

然而,NewComponent根本不起作用。关于可能是什么原因的任何想法?

1 个答案:

答案 0 :(得分:0)

我发现了错误。我导致组件newComponent导入错误。我在组件的路径上有一个斜线太多了。

import { NewComponent } from './components//new.component';

VS

import { NewComponent } from './components/new.component';

typescript编译器(命令行上的2.15版和Visual Studio Code)并不关心。 Zonejs / angular似乎很在乎!