No NgModule metadata found for {module_name}

I’m submitting a…

[ ] Regression (a behavior that used to work and stopped working in a new release)
[X] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

I’ve got two modules: one main module which tries to set up some routing, and one mature, big module, that will be the first of many to be added to this application.

Expected behavior

The main module should lazy-load the entire secondary module with no problem. Needless to say, that module works perfectly when run standalone.

Minimal reproduction of the problem with instructions

I’ve got one main module which only has it’s default root component. Inside the src folder, I created a folder “modules” in which I relocated the old module. The main module looks like this:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { routing } from './routing';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    routing
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

That “routing” import looks like the following:

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AppComponent} from './app.component';

const routes: Routes = [
  { path: '', redirectTo: 'init', pathMatch: 'full' },
  { path: 'init', component: AppComponent },
  { path: 'achieved_combined', loadChildren: '../modules/MBO_plan_achieved/src/app/app.module#AchievedCombined_Module' }
];

export const routing: ModuleWithProviders = RouterModule.forRoot(routes);

If you wonder, I’ve got also the other module with this -apparently, needed- routing file:

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { AppComponent } from './app.component';

const routes: Routes = [
  { path: '', component: AppComponent }
];

export const routing: ModuleWithProviders = RouterModule.forChild(routes);

@NgModule({
  declarations: [
    AppComponent,
    SegmentsComponent,
    GranularityComponent,
    ChartPickerComponent,
    DatePickerWrapperComponent, 
    ChartWrapperComponent,
    DynamicTable,
    TableFormat,
    SelectedLevelsComponent
  ],
  imports: [
    BrowserModule,
    AngularFontAwesomeModule,
    FormsModule, 
    NgbModule.forRoot(),
    Ng4LoadingSpinnerModule.forRoot(),
    HttpModule,
    MyDateRangePickerModule,
    ChartModule,
    routing
  ],
  providers: [RefresherService, DataRequester],
  bootstrap: [AppComponent]
})
export class AchievedCombined_Module { }

What is the motivation / use case for changing the behavior?

We’re developing a big application in parts. The first part is ready and working! But now, I’ve got to make this main module in order to serve it, and add the future modules one by one to it.

Environment

Angular CLI: 1.5.4
Node: 8.9.1
OS: win32 x64
Angular: 5.2.0
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.5.4
@angular-devkit/build-optimizer: 0.0.38
@angular-devkit/core: 0.0.25
@angular-devkit/schematics: 0.0.48
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.4
@schematics/angular: 0.1.13
@schematics/schematics: 0.0.13
typescript: 2.4.2
webpack: 3.8.1

Any help regarding this? I really don’t know what to do to fix this weird bug:

ERROR in Error: No NgModule metadata found for 'AchievedCombined_Module'.
    at NgModuleResolver.resolve (C:\Dev\Projects\AngularFrontend\MainModule\node_modules\@angular\compiler\bundles\compiler.umd.js:20277:23)
    at CompileMetadataResolver.getNgModuleMetadata (C:\Dev\Projects\AngularFrontend\MainModule\node_modules\@angular\compiler\bundles\compiler.umd.js:15230:60)
    at visitLazyRoute (C:\Dev\Projects\AngularFrontend\MainModule\node_modules\@angular\compiler\bundles\compiler.umd.js:31167:104)
    at visitLazyRoute (C:\Dev\Projects\AngularFrontend\MainModule\node_modules\@angular\compiler\bundles\compiler.umd.js:31171:17)
    at AotCompiler.listLazyRoutes (C:\Dev\Projects\AngularFrontend\MainModule\node_modules\@angular\compiler\bundles\compiler.umd.js:31135:20)
    at AngularCompilerProgram.listLazyRoutes (C:\Dev\Projects\AngularFrontend\MainModule\node_modules\@angular\compiler-cli\src\transformers\program.js:156:30)
    at Function.NgTools_InternalApi_NG_2.listLazyRoutes (C:\Dev\Projects\AngularFrontend\MainModule\node_modules\@angular\compiler-cli\src\ngtools_api.js:44:36)
    at AngularCompilerPlugin._getLazyRoutesFromNgtools (C:\Dev\Projects\AngularFrontend\MainModule\node_modules\@ngtools\webpack\src\angular_compiler_plugin.js:247:66)
    at Promise.resolve.then.then (C:\Dev\Projects\AngularFrontend\MainModule\node_modules\@ngtools\webpack\src\angular_compiler_plugin.js:538:50)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)

webpack: Failed to compile.

[Zerokk]

@alexzuza No, sorry, but if you have any doubts on my project setup just ask me, anyways I think it’s pretty well explained.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}