fix(build): put out routing in a separate module and fix build

Author: sternbach

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angularjs-typescript-webpack",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Angularjs-typescript-webpack starter project",
   "repository": "https://github.com/vsternbach/angularjs-typescript-webpack",
   "license": "MIT",
@@ -52,8 +52,10 @@
     "eventemitter3": "3.0.1"
   },
   "scripts": {
-    "start": "copyfiles -f src/assets/* dist/ & webpack-dev-server --mode=development --open",
-    "build": "rimraf dist & webpack --mode=production --optimize-minimize",
+    "prestart": "rimraf dist & copyfiles -f src/assets/* dist/",
+    "start": "webpack-dev-server --mode=development --open",
+    "prebuild": "npm run prestart",
+    "build": "webpack --mode=production --optimize-minimize",
     "test": "karma start --single-run",
     "test:dev": "karma start --browsers Chrome",
     "clean-build": "rimraf dist & copyfiles -f src/index.html dist/ & copyfiles -f src/assets/* dist/assets & npm run webpack-prod"

src/app/app-routing.module.ts

@@ -0,0 +1,38 @@
+import { StateProvider } from '@uirouter/angularjs';
+import { Ng1StateDeclaration } from '@uirouter/angularjs/lib/interface';
+import { getTypeName, NgModule } from 'angular-ts-decorators';
+import { DashboardComponent } from './dashboard/dashboard.component';
+import { HeroDetailComponent } from './hero-detail/hero-detail.component';
+import { HeroesComponent } from './heroes/heroes.component';
+
+export interface UiState extends Ng1StateDeclaration {
+  component?: any;
+}
+
+const routes: UiState[] = [
+  { name: 'index', url: '', redirectTo: 'dashboard' },
+  { name: 'dashboard', url: '/dashboard', component: DashboardComponent },
+  { name: 'detail', url: '/detail/{id}', component: HeroDetailComponent },
+  { name: 'heroes', url: '/heroes', component: HeroesComponent }
+];
+
+@NgModule({
+  id: 'AppRoutingModule',
+  imports: [
+    'ui.router'
+  ],
+})
+export class AppRoutingModule {
+  static config($stateProvider: StateProvider) {
+    'ngInject';
+    routes.forEach(route => $stateProvider.state(getNg1StateDeclaration(route)));
+  }
+}
+
+function getNg1StateDeclaration(state: UiState) {
+  if (state.component && typeof state.component !== 'string') {
+    state.component = getTypeName(state.component);
+  }
+  return state;
+}
+

src/app/app.module.ts

@@ -1,6 +1,5 @@
-import { StateProvider } from '@uirouter/angularjs';
-import { Ng1StateDeclaration } from '@uirouter/angularjs/lib/interface';
-import { getTypeName, NgModule } from 'angular-ts-decorators';
+import { NgModule } from 'angular-ts-decorators';
+import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { HeroDetailComponent } from './hero-detail/hero-detail.component';
@@ -9,23 +8,12 @@ import { HeroService } from './hero.service';
 import { HeroesComponent } from './heroes/heroes.component';
 import { MessageService } from './message.service';
 import { MessagesComponent } from './messages/messages.component';
-
 import './styles.css';
 
-export interface UiState extends Ng1StateDeclaration {
-  component?: any;
-}
-
-const routes: UiState[] = [
-  { name: 'index', url: '', redirectTo: 'dashboard' },
-  { name: 'dashboard', url: '/dashboard', component: DashboardComponent },
-  { name: 'detail', url: '/detail/{id}', component: HeroDetailComponent },
-  { name: 'heroes', url: '/heroes', component: HeroesComponent }
-];
-
 @NgModule({
+  id: 'AppModule',
   imports: [
-    'ui.router'
+    AppRoutingModule
   ],
   declarations: [
     AppComponent,
@@ -36,21 +24,9 @@ const routes: UiState[] = [
     HeroSearchComponent
   ],
   providers: [
-    { provide: 'heroService', useClass: HeroService },
-    { provide: 'messageService', useClass: MessageService }
+    HeroService,
+    MessageService,
   ],
   bootstrap: [ AppComponent ]
 })
-export class AppModule {
-  static config($stateProvider: StateProvider) {
-    'ngInject';
-    routes.forEach((route) => $stateProvider.state(getNg1StateDeclaration(route)));
-  }
-}
-
-function getNg1StateDeclaration(state: UiState) {
-  if (state.component && typeof state.component !== 'string') {
-    state.component = getTypeName(state.component);
-  }
-  return state;
-}
+export class AppModule {}