0

I have a angular 2.45 project written in Typescript. I've added a new component to the routing module of my app and also imported the new component.

When I start the app I receive the following error:

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

This is what I did in my apps routing module:

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

and in my AppModule I've added the Component and RoutingModule to the declarations and imports array of my AppModule.

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

For all my other Components this works exactly as intended. Angular finds the components, injects everything that is needed and routes correctly.

However the NewComponent simply doesn't work. Any ideas of what might be the cause?

Leo Gerber
  • 485
  • 6
  • 15

1 Answers1

0

I've found the error. I had the import of the component newComponent wrong. I had a slash too much in the path to the component. 

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

vs

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

The typescript compiler (version 2.15 on commandline and Visual Studio Code) didn't care. Zonejs /angular however seem to care!

Leo Gerber
  • 485
  • 6
  • 15