ERROR in [at-loader] src/app/userManagement/unlockUserID/unlockUserID.component.ts:7:5 Angular 2 Webpack

Question

I am getting the following error ever since I tried to set up my routing:

ERROR in [at-loader] src/app/userManagement/unlockUserID/unlockUserID.component.ts:7:5

I am using angular-cli and here is a snippit of my package.json:

devDependencies": {
    "@angular/compiler": "^2.4.1",
    "@angularclass/hmr": "~1.2.2",
    "@angularclass/hmr-loader": "~3.0.2",
    "@types/hammerjs": "^2.0.33",
    "@types/jasmine": "^2.2.34",
    "@types/node": "^7.0.4",
    "@types/selenium-webdriver": "2.53.39",
    "@types/source-map": "^0.5.0",
    "@types/uglify-js": "^2.0.27",
    "@types/webpack": "^2.2.4",
    "angular-router-loader": "^0.5.0",
    "angular2-template-loader": "^0.6.0",

THis is a single page application so that is why I am doing the routing like this.

src--
     --app
       --userManagement
          --unlockedUserId
            --unlockUserId.component.html
            --unlockUserId.css
       --userManagement.module.ts
       --userManagement.routing.ts

userManagement.module.ts

@NgModule({
    declarations: [
        unlockUserIdcomponent
    ],
    imports: [
        SmartadminModule,
        routing
    ],
    providers: [],
})
export class UserManagementModule {

}

userManagement.routing.ts

    import {RouterModule, Routes} from "@angular/router";

    import {unlockUserIdcomponent} from "./unlockUserID/unlockUserID.component";

    export const routes: Routes = [
        {
            path: 'unlockUserId',
            component:unlockUserIdcomponent
        },

    ];

    export const routing = RouterModule.forChild(routes);

Then the main routing file under src I have:

export const routes: Routes = [
    {
        path: '',
        component: MainLayoutComponent,
        data: {pageTitle: 'Home'},
        children: [
            {
                path: '', redirectTo: 'home', pathMatch: 'full',
            },
            {
                path: 'UserManagement',
                loadChildren: 'app/userManagement/userManagement.module#UserManagementModule',
                data: {pageTitle: 'UserManagement'}
            },

            {path: 'home', loadChildren: 'app/+home/home.module#HomeModule', data: {pageTitle: 'Home'}},

        ]
    },

    {path: '**', redirectTo: 'home'}

];

export const routing: ModuleWithProviders = RouterModule.forRoot(routes, {useHash: true});

The app runs but when I click on the link noting happens and I keep getting the following errors too in the console:

ERROR in [at-loader] src/app/shared/forms/validation/index.ts:1:9

ERROR in ./~/typedoc/dist/lib/utils/plugins.js

-----------------------Update 1----------------------

unlockUserId.component.ts

@Component({
    selector: 'unlock-userId',
    templateUrl: './unlockUserId.html',

})

export class unlockUserIdcomponent {

}

I updated on all my dependencies and I am thinking this is only part of the problem. I went back to my others ones and now I am getting the following error:

ERROR in [default] web/src/app/userManagement/unlockUserID/unlockUserID.component.ts:7:4 
Argument of type '{ selector: string; template: any; }' is not assignable to parameter of type 'IComponentOptions'

. and

ERROR in ./~/typedoc/dist/lib/utils/plugins.js
Module not found: Error: Can't resolve 'fs' in 'web/node_modules/typedoc/dist/lib/utils'

and

ERROR in ./~/typedoc/dist/lib/utils/fs.js
Module not found: Error: Can't resolve 'fs' in 'web/node_modules/typedoc/dist/lib/utils'

and

Module not found: Error: Can't resolve 'fs' in web/node_modules/typedoc/dist/lib/utils'

Answer 1

You have a syntax error in:

src/app/userManagement/unlockUserID/unlockUserID.component.ts on line 7.

You didn't post the code for that component.