fix(generate): stop default browser error from ng new --routing

[Meligy]

Fixes the following issue with ng new:

Problem

If you run:

ng new client --routing
cd client
ng serve

In the browser you see an error (Error log follows at the end). The error happens in the browser console, and it's a symptom of the route matching not finding any routes to match.

The app is initialized with an empty routes array, so when the routing module tries to use the routes array to match the URL http://localhost:4200/, it gets nothing, because the array is empty.

Makes sense, but it's still not a good 1st time experience though, to throw error by default, when all the user did was creating a new project, relying on the CLI for good defaults.

Solution

The correct way to fix this is to have another component and setup the routing to show it inside the AppComponent.

This leads to several decisions, like what to name the component, etc. which the CLI would rather not be involved in.

So, this PR puts the minimalist code that can make the browser NOT show errors, leave a good start for users to add their own routes, and doesn't make any special decisions.

Notes

Tests

Since tests seem to only check for files being present - and not check for their content, no tests were added or modified.

AoT

This PR is different from #2680. The error this PR fixes is NOT AoT specific at all. It's running plain ng serve after creating default project structure with no modifications.

Hence, it's also different from the problem described in #2680. Both are issues that happen in the browser console, but the problem this PR addresses happens with the user NOT adding any routes (or making any project modifications at all after using ng new --routing), and it happens without AoT.

The problem in #2680 happens after the user adds syntactically correct routes, and only happens when serving with --aot.

Error Details

This is the specific error that shows in the browser following the steps mentioned above:

lang.js:234Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode.
error_handler.js:47EXCEPTION: Uncaught (in promise): Error: Cannot match any routes: ''
Error: Cannot match any routes: ''
    at ApplyRedirects.noMatchError (http://localhost:4200/main.bundle.js:60150:16)
    at CatchSubscriber.selector (http://localhost:4200/main.bundle.js:60128:29)
    at CatchSubscriber.error (http://localhost:4200/main.bundle.js:66368:31)
    at MapSubscriber.Subscriber._error (http://localhost:4200/main.bundle.js:6332:26)
    at MapSubscriber.Subscriber.error (http://localhost:4200/main.bundle.js:6306:18)
    at CatchSubscriber.error (http://localhost:4200/main.bundle.js:66371:34)
    at FirstSubscriber._complete (http://localhost:4200/main.bundle.js:66530:25)
    at FirstSubscriber.Subscriber.complete (http://localhost:4200/main.bundle.js:6318:18)
    at MergeAllSubscriber._complete (http://localhost:4200/main.bundle.js:31845:30)
    at MergeAllSubscriber.Subscriber.complete (http://localhost:4200/main.bundle.js:6318:18)ErrorHandler.handleError @ error_handler.js:47next @ application_ref.js:272schedulerFn @ async.js:82SafeSubscriber.__tryOrUnsub @ Subscriber.js:223SafeSubscriber.next @ Subscriber.js:172Subscriber._next @ Subscriber.js:125Subscriber.next @ Subscriber.js:89Subject.next @ Subject.js:55EventEmitter.emit @ async.js:74onError @ ng_zone.js:119onHandleError @ ng_zone_impl.js:64ZoneDelegate.handleError @ zone.js:236Zone.runGuarded @ zone.js:131_loop_1 @ zone.js:412drainMicroTaskQueue @ zone.js:421
error_handler.js:52ORIGINAL STACKTRACE:ErrorHandler.handleError @ error_handler.js:52next @ application_ref.js:272schedulerFn @ async.js:82SafeSubscriber.__tryOrUnsub @ Subscriber.js:223SafeSubscriber.next @ Subscriber.js:172Subscriber._next @ Subscriber.js:125Subscriber.next @ Subscriber.js:89Subject.next @ Subject.js:55EventEmitter.emit @ async.js:74onError @ ng_zone.js:119onHandleError @ ng_zone_impl.js:64ZoneDelegate.handleError @ zone.js:236Zone.runGuarded @ zone.js:131_loop_1 @ zone.js:412drainMicroTaskQueue @ zone.js:421
error_handler.js:53Error: Uncaught (in promise): Error: Cannot match any routes: ''
Error: Cannot match any routes: ''
    at ApplyRedirects.noMatchError (apply_redirects.js:89)
    at CatchSubscriber.selector (apply_redirects.js:67)
    at CatchSubscriber.error (catch.js:52)
    at MapSubscriber.Subscriber._error (Subscriber.js:128)
    at MapSubscriber.Subscriber.error (Subscriber.js:102)
    at CatchSubscriber.error (catch.js:55)
    at FirstSubscriber._complete (first.js:143)
    at FirstSubscriber.Subscriber.complete (Subscriber.js:114)
    at MergeAllSubscriber._complete (mergeAll.js:94)
    at MergeAllSubscriber.Subscriber.complete (Subscriber.js:114)
    at resolvePromise (zone.js:468)
    at zone.js:445
    at ZoneDelegate.invoke (zone.js:232)
    at Object.onInvoke (ng_zone_impl.js:43)
    at ZoneDelegate.invoke (zone.js:231)
    at Zone.run (zone.js:114)
    at zone.js:502
    at ZoneDelegate.invokeTask (zone.js:265)
    at Object.onInvokeTask (ng_zone_impl.js:34)
    at ZoneDelegate.invokeTask (zone.js:264)ErrorHandler.handleError @ error_handler.js:53next @ application_ref.js:272schedulerFn @ async.js:82SafeSubscriber.__tryOrUnsub @ Subscriber.js:223SafeSubscriber.next @ Subscriber.js:172Subscriber._next @ Subscriber.js:125Subscriber.next @ Subscriber.js:89Subject.next @ Subject.js:55EventEmitter.emit @ async.js:74onError @ ng_zone.js:119onHandleError @ ng_zone_impl.js:64ZoneDelegate.handleError @ zone.js:236Zone.runGuarded @ zone.js:131_loop_1 @ zone.js:412drainMicroTaskQueue @ zone.js:421
zone.js:388Unhandled Promise rejection: Cannot match any routes: '' ; Zone: angular ; Task: Promise.then ; Value: Error: Cannot match any routes: ''(…) Error: Cannot match any routes: ''
    at ApplyRedirects.noMatchError (http://localhost:4200/main.bundle.js:60150:16)
    at CatchSubscriber.selector (http://localhost:4200/main.bundle.js:60128:29)
    at CatchSubscriber.error (http://localhost:4200/main.bundle.js:66368:31)
    at MapSubscriber.Subscriber._error (http://localhost:4200/main.bundle.js:6332:26)
    at MapSubscriber.Subscriber.error (http://localhost:4200/main.bundle.js:6306:18)
    at CatchSubscriber.error (http://localhost:4200/main.bundle.js:66371:34)
    at FirstSubscriber._complete (http://localhost:4200/main.bundle.js:66530:25)
    at FirstSubscriber.Subscriber.complete (http://localhost:4200/main.bundle.js:6318:18)
    at MergeAllSubscriber._complete (http://localhost:4200/main.bundle.js:31845:30)
    at MergeAllSubscriber.Subscriber.complete (http://localhost:4200/main.bundle.js:6318:18)consoleError @ zone.js:388_loop_1 @ zone.js:417drainMicroTaskQueue @ zone.js:421
zone.js:390Error: Uncaught (in promise): Error: Cannot match any routes: ''(…)consoleError @ zone.js:390_loop_1 @ zone.js:417drainMicroTaskQueue @ zone.js:421

[Meligy]

That failing check, looks like it's been failing for a long while regardless of this PR, looking at https://ci.appveyor.com/project/AngularCLI/angular-cli/history

[filipesilva]

The CI failure is fixed with #2832.

@Brocco can you review the PR changes?

[Meligy]

Hi again guys.

How's that looking now? Do you think it's OK to go in beta.20? Does it need more work? Or some review first? Do you think it's not worth it and prefer to close it?

Thanks a lot.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}