AOT Build issue. AOT option generates build, First navigationg gives "TypeError: Cannot read property 'subscribe' of undefined"

Bug Report or Feature Request (mark with an x)

- [x] bug report -> I think this is an issue with aot build
- [ ] feature request

Versions.

npm:5.5.1 Angular CLI: 1.5.0 Node: 8.7.0 OS: win32 x64 Angular: 5.0.0 … animations, common, compiler, compiler-cli, core, forms … http, language-service, platform-browser … platform-browser-dynamic, router @angular/cli: 1.5.0 @angular-devkit/build-optimizer: 0.0.32 @angular-devkit/core: 0.0.20 @angular-devkit/schematics: 0.0.35 @ngtools/json-schema: 1.1.0 @ngtools/webpack: 1.8.0 @schematics/angular: 0.1.2 typescript: 2.4.2 webpack: 3.8.1

Repro steps.

Upgrade to Angular 5.0 Angular from 4.4.6. ng serve gets my running just fine.

ng serve creates the build. but error on navigation.

The log given by the failure.

ResolveEnd(id: 2, url: ‘/admin’, urlAfterRedirects: ‘/admin/device-status’, state: Route(url:‘’, path:‘’) { Route(url:‘admin’, path:‘admin’) { Route(url:‘device-status’, path:‘device-status’) } } )

NavigationError(id: 2, url: ‘/admin’, error: TypeError: Cannot read property ‘subscribe’ of undefined)

** Call Stack** “TypeError: Cannot read property ‘subscribe’ of undefined at createDirectiveInstance (webpack-internal:///…/…/…/core/esm5/core.js:12210:96) at createViewNodes (webpack-internal:///…/…/…/core/esm5/core.js:13644:53) at callViewAction (webpack-internal:///…/…/…/core/esm5/core.js:14076:13) at execComponentViewsAction (webpack-internal:///…/…/…/core/esm5/core.js:13985:13) at createViewNodes (webpack-internal:///…/…/…/core/esm5/core.js:13672:5) at callViewAction (webpack-internal:///…/…/…/core/esm5/core.js:14076:13) at execComponentViewsAction (webpack-internal:///…/…/…/core/esm5/core.js:13985:13) at createViewNodes (webpack-internal:///…/…/…/core/esm5/core.js:13672:5) at callViewAction (webpack-internal:///…/…/…/core/esm5/core.js:14076:13) at execComponentViewsAction (webpack-internal:///…/…/…/core/esm5/core.js:13985:13)”

“Cannot read property ‘subscribe’ of undefined”

Desired functionality.

I want the right navigation. Actually I use nested routing using 2 router module. The app-routing module and an admin-routing module. Is there any major change in nested routing using multiple routing modules in angular 5

Mention any other details that might be useful.

Main App-Route

Routes= [

    {
        path: 'login',
        component: LoginComponent
    },
    {
        path: 'admin',
        loadChildren: 'app/admin/admin.module#AdminModule',
        canLoad: [AuthGuard]
    },
    {
        path: '',
        redirectTo: '/login',
        pathMatch: 'full'
    },
    {
        path: '**',
        redirectTo: '/login',
        pathMatch: 'full'
    },
   
];

** Sub- Admin Route**

Routes = [
    {
        path: 'admin',
        component: MasterComponent,
        canActivate: [AuthGuard],
        canActivateChild: [AuthGuard],
        children: [
            {
                path: 'device-status', component: DeviceStatusComponent,
            },
            {
                path: 'data-sync',
                component: DataSyncComponent,
                canActivateChild: [AuthGuard],
                children: [
                    {
                        path: 'oiam', component: OiamDataGridComponent
                    },
                    {
                        path: 'discovery', component: DiscoveryDataGridComponent
                    },
                    {
                        path: '',
                        redirectTo: '/admin/data-sync/oiam',
                        pathMatch: 'full'
                    }
                ]
            },
            { path: 'error-log', component: DataSyncComponent },
            { path: 'new-question', component: DataSyncComponent },
            { path: 'survey-results', component: DataSyncComponent },
            {
                path: '',
                redirectTo: '/admin/device-status',
                pathMatch: 'full'
            },
            {
                path: "**",
                component: PagenotfoundComponent
            },
        ]
    },
    {
        path: '',
        redirectTo: '/login',
        pathMatch: 'full'
    }

[JinsPeter]

Closing the issue as this is more of an ngx-datatable issue

[tdang2]

I had the exact same problem this morning. I am not sure the exact problem is either but the issue definitely is in --aot and --build-optimizer

My workaround to get my code push is: ng build --prod --no-aot --build-optimizer=false The production code is lot bigger since the compiler fully spells out the code but at least for now it works so I can push my changes

I have tried several other build settings:

• ng build --prod --no-aot The error I got is: “Uncaught Error: Unexpected value ‘k’ imported by the module ‘t’. Please add a @NgModule annotation”

• ng build --prod --build-optimizer=false Same error: “cannot read property ‘subscribe’ of undefined”