fix(views): Allow same views object to be reused in multiple states

Closes #3353

src/statebuilders/views.ts

@@ -48,6 +48,9 @@ export function ng1ViewsBuilder(state: StateObject) {
  // Account for views: { header: "headerComponent" }
  if (isString(config)) config = { component: <string> config };
 
+ // Make a shallow copy of the config object
+ config = extend({}, config);
+
  if (hasAnyKey(compKeys, config) && hasAnyKey(nonCompKeys, config)) {
  throw new Error(`Cannot combine: ${compKeys.join("|")} with: ${nonCompKeys.join("|")} in stateview: '${name}@${state.name}'`);
  }

test/ng1StateBuilderSpec.ts

@@ -15,17 +15,19 @@ describe('Ng1 StateBuilder', function() {
  builder.builder('views', ng1ViewsBuilder);
  });
 
- it('should return a new views object, and copy keys from state def, if no `views` is defined in the state def', function() {
+ it('should use the state object to build a default view, when no `views` property is found', function() {
  var config = { url: "/foo", templateUrl: "/foo.html", controller: "FooController", parent: parent };
  var built = builder.builder('views')(config);
 
  expect(built.$default).not.toEqualData(config);
  expect(built.$default).toEqualData({ templateUrl: "/foo.html", controller: "FooController", resolveAs: '$resolve' });
  });
 
- it("should return modified view config object if `views` is defined in the state def", function() {
+ it('It should use the views object to build views, when defined, function() {
  var config = { a: { foo: "bar", controller: "FooController" } };
- expect(builder.builder('views')({ parent: parent, views: config })).toEqual(config);
+ let builtViews = builder.builder('views')({ parent: parent, views: config });
+ expect(builtViews.a.foo).toEqualData(config.a.foo);
+ expect(builtViews.a.controller).toEqualData(config.a.controller);
  });
 
  it("should not allow a view config with both component and template keys", inject(function($injector) {

test/viewDirectiveSpec.ts

@@ -1,6 +1,6 @@
-import * as angular from "angular";
-import "./util/matchers";
-import { extend } from "ui-router-core";
+import * as angular from 'angular';
+import './util/matchers';
+import { extend } from 'ui-router-core';
 
 declare let inject, jasmine;
 
@@ -1372,6 +1372,20 @@ describe('angular 1.5+ style .component()', function() {
  expect(header.textContent).toBe('#awesome#');
  expect(content.textContent).toBe('-DATA!-');
  });
+
+ // Test for https://github.com/angular-ui/ui-router/issues/3353
+ it('should allow different states to reuse view declaration', function () {
+ let views = {
+ header: { component: 'header' },
+ content: { component: 'ngComponent' },
+ };
+
+ let stateDef1 = { name: 'def1', url: '/def1', views: views, };
+ let stateDef2 = { name: 'def2', url: '/def2', views: views, };
+
+ $stateProvider.state(stateDef1);
+ $stateProvider.state(stateDef2);
+ });
  });
  }