'Cannot find name system' in angular2

Question

I have a routes file in which system exits but in my vsc it shoews error cannot find name 'system'.Here i attached the screen shot.

Answer 1

This occurs because Typescript doesn't know the System object.

Install the SystemJS typings

npm install @types/systemjs --save-dev

Add a reference to the typings in your tsconfig.json, under types

tsconfig.json

"typeRoots": ["node_modules"]
"types": ["system"]

Of course if you intend to run this code in the browser, you must also have the SystemJS script linked in your app for System.import() to do anything:

index.html

<script src="node_modules/systemjs/dist/system.src.js"></script>

Sidenote:

To get max performance out of your app, you may eventually want to use lazy-loading (to load only those modules the user needs). The way you're loading other modules (dynamic loading with System.import()) may not be compatible with lazy loading: Here is the recommended way

Consider replacing:

path: 'inbox', loadChildren: ()=> System.import('../inbox/inbox.module')

With:

path: 'inbox', loadChildren: 'absolute/path/to/inbox/inbox.module#InboxModule'