how do i include @uirouter in the Angular/sampleapp

I cannot get the angular/sampleapp configured to work with @uirouter.

do i have systemjs.config.js configured incorrectly to include @uirouter?

1) npm i -S @uirouter/angular 2) added the following line to systemjs.config.js, map: section

'ui-router-ng2':'node_modules/ui-router-ng2/_bundles/ui-router-ng2.js',

and this after the package section.

 meta: { "ui-router-ng2": { format: "cjs" } }

4) app.module.ts. i added this

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {trace, Category, UIRouterModule, UIView} from "@uirouter/angular";

import {MAIN_STATES} from "./app.states";

trace.enable(Category.TRANSITION, Category.VIEWCONFIG);

@NgModule({
  imports:      [ BrowserModule, UIRouterModule.forRoot({states: MAIN_STATES, otherwise: {state: 'app', params:{}}}) ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ],

})
export class AppModule { }

5) Created an app.states.ts file

import {AppComponent} from "./app.component";
import {Ng2StateDeclaration, loadNgModule} from "@uirouter/angular";

/** The top level state(s) */
export let MAIN_STATES: Ng2StateDeclaration[] = [
// The top-level app state.
// This state fills the root <ui-view></ui-view> (defined in index.html) with the AppComponent
{ name: 'app', component: AppComponent }
];

6) changed index.html, removed the contents of the body tag and replaced with this.

<ui-view>Loading...</ui-view>

lite-server compiles okay and opens my browser, but it hangs with Loading... displayed.

F12 developer tools and the following errors are displayed.

HTML1300: Navigation occurred.
localhost:3000
Error: Fetch error: 404 Not Found
Instantiating http://localhost:3000/@uirouter/angular
Loading http://localhost:3000/app/app.module.js
Loading http://localhost:3000/main.js
Loading main.js
localhost:3000 (18,53)
{
  [functions]: ,
  __proto__: { },
  __zone_symbol__currentTask: { },
  description: "Fetch error: 404 Not Found
Instantiating http://localhost:3000/@uirouter/angular
Loading http://localhost:3000/app/app.module.js
Loading http://localhost:3000/main.js
Loading main.js",
  message: "Fetch error: 404 Not Found
Instantiating http://localhost:3000/@uirouter/angular
Loading http://localhost:3000/app/app.module.js
Loading http://localhost:3000/main.js
Loading main.js",
  name: "Error",
  originalErr: { },
  originalStack: "Error: Fetch error: 404 Not Found
Instantiating http://localhost:3000/@uirouter/angular
Loading http://localhost:3000/app/app.module.js
Loading http://localhost:3000/main.js
Loading main.js
at ZoneAwareError 
(http://localhost:3000/node_modules/zone.js/dist/zone.js:915:9)
at LoaderError__Check_error_message_for_loader_stack 
(http://localhost:3000/node_modules/systemjs/dist/system.src.js:80:5)
at Anonymous function 
(http://localhost:3000/node_modules/systemjs/dist/system.src.js:284:5)
at ZoneDelegate.prototype.invoke 
(http://localhost:3000/node_modules/zone.js/dist/zone.js:363:13)
at Zone.prototype.run 
(http://localhost:3000/node_modules/zone.js/dist/zone.js:125:17)
at Anonymous function 
(http://localhost:3000/node_modules/zone.js/dist/zone.js:758:17)
at ZoneDelegate.prototype.invokeTask 
(http://localhost:3000/node_modules/zone.js/dist/zone.js:396:13)
at Zone.prototype.runTask 
(http://localhost:3000/node_modules/zone.js/dist/zone.js:165:21)
at drainMicroTaskQueue 
(http://localhost:3000/node_modules/zone.js/dist/zone.js:591:25)
at g (http://localhost:3000/node_modules/core-js/client/shim.min.js:8:10014)
at Anonymous function (http://localhost:3000/node_modules/core-
js/client/shim.min.js:8:10138)
at k (http://localhost:3000/node_modules/core-
js/client/shim.min.js:8:14293)",
  stack: "Error: Fetch error: 404 Not Found
at Anonymous function 
(http://localhost:3000/node_modules/systemjs/dist/system.src.js:1500:7) 
[<root>]
at Anonymous function 
(http://localhost:3000/node_modules/zone.js/dist/zone.js:758:17) [<root>]
at drainMicroTaskQueue 
(http://localhost:3000/node_modules/zone.js/dist/zone.js:591:25) [<root>]
at g (http://localhost:3000/node_modules/core-js/client/shim.min.js:8:10014) 
[<root>]
at Anonymous function (http://localhost:3000/node_modules/core-
js/client/shim.min.js:8:10138) [<root>]
at k (http://localhost:3000/node_modules/core-js/client/shim.min.js:8:14293) 
[<root>]",
  zoneAwareStack: "Error: Fetch error: 404 Not Found
Instantiating http://localhost:3000/@uirouter/angular
Loading http://localhost:3000/app/app.module.js
Loading http://localhost:3000/main.js
Loading main.js
at LoaderError__Check_error_message_for_loader_stack 
(http://localhost:3000/node_modules/systemjs/dist/system.src.js:80:5) 
[<root>]
at Anonymous function 
(http://localhost:3000/node_modules/systemjs/dist/system.src.js:284:5) 
[<root>]
at Anonymous function 
(http://localhost:3000/node_modules/zone.js/dist/zone.js:758:17) [<root>]
at drainMicroTaskQueue 
(http://localhost:3000/node_modules/zone.js/dist/zone.js:591:25) [<root>]
at g (http://localhost:3000/node_modules/core-js/client/shim.min.js:8:10014) 
[<root>]
at Anonymous function (http://localhost:3000/node_modules/core-
js/client/shim.min.js:8:10138) [<root>]
at k (http://localhost:3000/node_modules/core-js/client/shim.min.js:8:14293) 
[<root>]"
}

HTTP404: NOT FOUND - The server has not found anything matching the requested URI (Uniform Resource Identifier).
(Fetch)GET - http://localhost:3000/@uirouter/angular

via muscleman71