CODEWITHSUNDEEP
angularjsangular-cli
Doug
Doug

Reputation: 547

@angular/cli build issue with default class

I am playing around with the @angular/cli tool for projects and building and am having an issue with one of the classes.

I am trying to add a component that is lazyloaded on access of the route:

App route:

const routes: Routes = [
    {
        path: '',
        redirectTo: '/dashboard',
        pathMatch: 'full'
    },
    {
        path: 'dashboard',
        loadChildren: 'app/dashboard/dashboard.module'
    }
];

And a module that loads the components and routes (currently just a simple component that says "Dashboard"):

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

import {
    DashboardComponent,
    DashboardRoutingModule
} from './index';

@NgModule({
    imports: [DashboardRoutingModule],
    declarations: [DashboardComponent]
})

export default class DashboardModule  { }

When I run ng serve the web page starts as expected and I can develop / see what I am working on.

When I run ng build the project builds ok without any issues.

When I run ng build --prod --aot it returns an errors and a warnings:

WARNING in ./src/$$_gendir/app/dashboard/dashboard.module.ngfactory.ts 31:38-61 "export 'DashboardModule' (imported as 'import1') was not found in '../../../app/dashboard/dashboard.module' WARNING in ./src/$$_gendir/app/dashboard/dashboard.module.ngfactory.ts 46:23-46 "export 'DashboardModule' (imported as 'import1') was not found in '../../../app/dashboard/dashboard.module' WARNING in ./src/$$_gendir/app/dashboard/dashboard.module.ngfactory.ts 58:91-114 "export 'DashboardModule' (imported as 'import1') was not found in '../../../app/dashboard/dashboard.module' ERROR in C:/wamp/www/api/data-portal/src/$$_gendir/app/dashboard/dashboard.module.ngfactory.ts (1,1): Namespace '"C:/wamp/www/api/data-portal/src/app/dashboard/ dashboard.module"' has no exported member 'DashboardModule'.C:/wamp/www/api/data-portal/src/$$_gendir/app/dashboard/dashboard.module.ngfactory.ts (1,1): Namespace '"C:/wamp/www/api/data-portal/src/app/dashboard/dashboard.module"' has no exported member 'DashboardModule'. C:/wamp/www/api/data-portal/src/$$_gendir/app/dashboard/dashboard.module.ngfactory.ts (1,1): Namespace '"C:/wamp/www/api/data-portal/src/app/dashboard/dashboard.module"' has no exported member 'DashboardModule'.

If I remove the keyword default from the export of the Dashboard Module, it builds without any issues however then the app doesn't work as it can't find a default, however if I add in the default again it breaks the production build.

Any ideas/thoughts as to what I am doing wrong? I am really confused as ng serve works and ng build works with the default keyword, but ng build --prod --aot does not

Upvotes: 0

Views: 286

Answers (1)

Doug
Doug

Reputation: 547

I managed to fix this by changing the way I was doing the routing.

Instead of:

{
    path: 'dashboard',
    loadChildren: 'app/dashboard/dashboard.module'
}

I used:

{
    path: 'dashboard',
    loadChildren: 'app/dashboard/dashboard.module#DashboardModule'
}

Removing the need for a default in the dashboard module - works perfectly in case anyone has the same issue as me.

Upvotes: 1

Related Questions