Skip to content

chore(generate): update routing files & add --routing to ng new #2361

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Sep 27, 2016
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 17 additions & 16 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,13 @@ Prototype of a CLI for Angular 2 applications based on the [ember-cli](http://ww

This project is very much still a work in progress.

The CLI is now in beta.
The CLI is now in beta.
If you wish to collaborate while the project is still young, check out [our issue list](https://github.com/angular/angular-cli/issues).

## Webpack update

We changed the build system between beta.10 and beta.14, from SystemJS to Webpack.
And with it comes a lot of benefits.
We changed the build system between beta.10 and beta.14, from SystemJS to Webpack.
And with it comes a lot of benefits.
To take advantage of these, your app built with the old beta will need to migrate.

You can update your `beta.10` projects to `beta.14` by following [these instructions](https://github.com/angular/angular-cli/wiki/Upgrading-from-Beta.10-to-Beta.14).
Expand Down Expand Up @@ -109,6 +109,7 @@ Service | `ng g service my-new-service`
Class | `ng g class my-new-class`
Interface | `ng g interface my-new-interface`
Enum | `ng g enum my-new-enum`
Module | `ng g module my-module`

### Generating a route

Expand All @@ -126,8 +127,8 @@ The build artifacts will be stored in the `dist/` directory.

### Build Targets and Environment Files

`ng build` can specify both a build target (`--target=production` or `--target=development`) and an
environment file to be used with that build (`--environment=dev` or `--environment=prod`).
`ng build` can specify both a build target (`--target=production` or `--target=development`) and an
environment file to be used with that build (`--environment=dev` or `--environment=prod`).
By default, the development build target and environment are used.

The mapping used to determine which environment file is used can be found in `angular-cli.json`:
Expand Down Expand Up @@ -157,7 +158,7 @@ ng build

You can also add your own env files other than `dev` and `prod` by doing the following:
- create a `src/environments/environment.NAME.ts`
- add `{ "NAME": 'src/environments/environment.NAME.ts' }` to the the `apps[0].environments` object in `angular-cli.json`
- add `{ "NAME": 'src/environments/environment.NAME.ts' }` to the the `apps[0].environments` object in `angular-cli.json`
- use them via the `--env=NAME` flag on the build/serve commands.

### Base tag handling in index.html
Expand All @@ -172,7 +173,7 @@ ng build --bh /myUrl/

### Bundling

All builds make use of bundling, and using the `--prod` flag in `ng build --prod`
All builds make use of bundling, and using the `--prod` flag in `ng build --prod`
or `ng serve --prod` will also make use of uglifying and tree-shaking functionality.

### Running unit tests
Expand Down Expand Up @@ -290,11 +291,11 @@ source ~/.bash_profile

### Global styles

The `styles.css` file allows users to add global styles and supports
[CSS imports](https://developer.mozilla.org/en/docs/Web/CSS/@import).
The `styles.css` file allows users to add global styles and supports
[CSS imports](https://developer.mozilla.org/en/docs/Web/CSS/@import).

If the project is created with the `--style=sass` option, this will be a `.sass`
file instead, and the same applies to `scss/less/styl`.
If the project is created with the `--style=sass` option, this will be a `.sass`
file instead, and the same applies to `scss/less/styl`.

You can add more global styles via the `apps[0].styles` property in `angular-cli.json`.

Expand Down Expand Up @@ -344,11 +345,11 @@ npm install @types/d3 --save-dev

### Global Library Installation

Some javascript libraries need to be added to the global scope, and loaded as if
they were in a script tag. We can do this using the `apps[0].scripts` and
Some javascript libraries need to be added to the global scope, and loaded as if
they were in a script tag. We can do this using the `apps[0].scripts` and
`apps[0].styles` properties of `angular-cli.json`.

As an example, to use [Boostrap 4](http://v4-alpha.getbootstrap.com/) this is
As an example, to use [Boostrap 4](http://v4-alpha.getbootstrap.com/) this is
what you need to do:

First install Bootstrap from `npm`:
Expand All @@ -375,7 +376,7 @@ Finally add the Bootstrap CSS to the `apps[0].styles` array:
],
```

Restart `ng serve` if you're running it, and Bootstrap 4 should be working on
Restart `ng serve` if you're running it, and Bootstrap 4 should be working on
your app.

### Updating angular-cli
Expand All @@ -400,7 +401,7 @@ Running `ng init` will check for changes in all the auto-generated files created

Carefully read the diffs for each code file, and either accept the changes or incorporate them manually after `ng init` finishes.

**The main cause of errors after an update is failing to incorporate these updates into your code**.
**The main cause of errors after an update is failing to incorporate these updates into your code**.

You can find more details about changes between versions in [CHANGELOG.md](https://github.com/angular/angular-cli/blob/master/CHANGELOG.md).

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [];

@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
providers: []
})
export class <%= classifiedModuleName %>RoutingModule { }
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';<% if (routing) { %>
import { <%= camelizedModuleName %>Routing } from './<%= dasherizedModuleName %>.routing';<% } %>
import { <%= classifiedModuleName %>RoutingModule } from './<%= dasherizedModuleName %>-routing.module';<% } %>

@NgModule({
imports: [
CommonModule<% if (routing) { %>,
<%= camelizedModuleName %>Routing<% } %>
<%= classifiedModuleName %>RoutingModule<% } %>
],
declarations: []
})
Expand Down

This file was deleted.

2 changes: 1 addition & 1 deletion packages/angular-cli/blueprints/module/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ module.exports = {
fileList = fileList.filter(p => p.indexOf('__name__.module.spec.ts') < 0);
}
if (this.options && !this.options.routing) {
fileList = fileList.filter(p => p.indexOf('__name__.routing.ts') < 0);
fileList = fileList.filter(p => p.indexOf('__name__-routing.module.ts') < 0);
}

return fileList;
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
providers: []
})
export class <%= classifiedModuleName %>RoutingModule { }
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { HttpModule } from '@angular/http';<% if (routing) { %>
import { <%= classifiedModuleName %>RoutingModule } from './<%= dasherizedModuleName %>-routing.module';<% } %>

import { AppComponent } from './app.component';

Expand All @@ -12,7 +13,8 @@ import { AppComponent } from './app.component';
imports: [
BrowserModule,
FormsModule,
HttpModule
HttpModule<% if (routing) { %>,
<%= classifiedModuleName %>RoutingModule<% } %>
],
providers: [],
bootstrap: [AppComponent]
Expand Down
9 changes: 7 additions & 2 deletions packages/angular-cli/blueprints/ng2/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@ module.exports = {
{ name: 'source-dir', type: String, default: 'src', aliases: ['sd'] },
{ name: 'prefix', type: String, default: 'app', aliases: ['p'] },
{ name: 'style', type: String, default: 'css' },
{ name: 'mobile', type: Boolean, default: false }
{ name: 'mobile', type: Boolean, default: false },
{ name: 'routing', type: Boolean, default: false }
],

afterInstall: function (options) {
Expand Down Expand Up @@ -38,7 +39,8 @@ module.exports = {
prefix: options.prefix,
styleExt: this.styleExt,
relativeRootPath: relativeRootPath,
isMobile: options.mobile
isMobile: options.mobile,
routing: options.routing
};
},

Expand All @@ -48,6 +50,9 @@ module.exports = {
fileList = fileList.filter(p => p.indexOf('__name__.component.html') < 0);
fileList = fileList.filter(p => p.indexOf('__name__.component.__styleext__') < 0);
}
if (this.options && !this.options.routing) {
fileList = fileList.filter(p => p.indexOf('__name__-routing.module.ts') < 0);
}

return fileList;
},
Expand Down
6 changes: 4 additions & 2 deletions packages/angular-cli/commands/init.ts
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,8 @@ const InitCommand: any = Command.extend({
{ name: 'source-dir', type: String, default: 'src', aliases: ['sd'] },
{ name: 'style', type: String, default: 'css' },
{ name: 'prefix', type: String, default: 'app', aliases: ['p'] },
{ name: 'mobile', type: Boolean, default: false }
{ name: 'mobile', type: Boolean, default: false },
{ name: 'routing', type: Boolean, default: false }
],

anonymousOptions: ['<glob-pattern>'],
Expand Down Expand Up @@ -104,7 +105,8 @@ const InitCommand: any = Command.extend({
sourceDir: commandOptions.sourceDir,
style: commandOptions.style,
prefix: commandOptions.prefix,
mobile: commandOptions.mobile
mobile: commandOptions.mobile,
routing: commandOptions.routing
};

if (!validProjectName(packageName)) {
Expand Down
3 changes: 2 additions & 1 deletion packages/angular-cli/commands/new.ts
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,8 @@ const NewCommand = Command.extend({
{ name: 'source-dir', type: String, default: 'src', aliases: ['sd'] },
{ name: 'style', type: String, default: 'css' },
{ name: 'prefix', type: String, default: 'app', aliases: ['p'] },
{ name: 'mobile', type: Boolean, default: false }
{ name: 'mobile', type: Boolean, default: false },
{ name: 'routing', type: Boolean, default: false }
],

run: function (commandOptions: any, rawArgs: string[]) {
Expand Down
5 changes: 2 additions & 3 deletions packages/angular-cli/utilities/find-parent-module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,9 @@ export default function findParentModule(project: any, currentDir: string): stri
let pathToCheck = path.join(sourceRoot, currentDir);

while (pathToCheck.length >= sourceRoot.length) {
// let files: string[] = fs.readdirSync(pathToCheck);

// files = files.filter(file => file.indexOf('.module.ts') > 0);
// TODO: refactor to not be based upon file name
const files = fs.readdirSync(pathToCheck)
.filter(fileName => !fileName.endsWith('routing.module.ts'))
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's a scenario where someone has a single module called routing and we'll never find it, but tbh I don't think we should special-case it this far... when we refactor we'll handle it.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is going to go away, the file name string matching is temporary.

.filter(fileName => fileName.endsWith('.module.ts'))
.filter(fileName => fs.statSync(path.join(pathToCheck, fileName)).isFile());

Expand Down
2 changes: 1 addition & 1 deletion tests/e2e/tests/generate/module/module-routing.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export default function() {
return ng('generate', 'module', 'test-module', '--routing')
.then(() => expectFileToExist(moduleDir))
.then(() => expectFileToExist(join(moduleDir, 'test-module.module.ts')))
.then(() => expectFileToExist(join(moduleDir, 'test-module.routing.ts')))
.then(() => expectFileToExist(join(moduleDir, 'test-module-routing.module.ts')))
.then(() => expectFileToExist(join(moduleDir, 'test-module.component.ts')))
.then(() => expectFileToExist(join(moduleDir, 'test-module.component.spec.ts')))
.then(() => expectFileToExist(join(moduleDir, 'test-module.component.html')))
Expand Down