Skip to content

Add BrowserAnimationsModule optional support to new applications #6243

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

Closed
1 of 2 tasks
dave11mj opened this issue May 9, 2017 · 6 comments · May be fixed by feicc/angular-cli#26 or one3chens/angular-cli#28
Closed
1 of 2 tasks
Labels
effort1: easy (hours) feature Issue that requests a new feature

Comments

@dave11mj
Copy link
Contributor

dave11mj commented May 9, 2017

Bug Report or Feature Request (mark with an x)

  • bug report -> please search issues before submitting
  • feature request

Versions.

@angular/cli: local (v1.1.0-beta.0, branch: master)
node: 6.9.5
os: darwin x64

Repro steps.

  1. ng new test-animation
  2. Open the app.component.ts and replace its content with the snipped below
import { Component } from '@angular/core';
import { trigger, state, style, animate, transition } from '@angular/animations';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations: [
    trigger('testFadeIn', [
      state('void', style({ opacity: '0' })),
      state('*',   style({ opacity: '1' })),
      transition('void <=> *', animate('100ms ease-in'))
    ])
  ]
})
export class AppComponent {
  title = 'app';
}
  1. Open app.component.html and use the @testFadeIn trigger
  2. ng serve and open the developer tools.

The log given by the failure.

image

Desired functionality.

To be able to create new applications that support animations without additional configurations. This would make it easier to use transitions and Angular Material.

An option I would propose is a --animation flag to the ng new command which would allow users to opt-in on supporting animations for their applications.

Mention any other details that might be useful.

Animations is one of the features I really like about angular, and can be sometimes tricky to set up. ^^

@deebloo
Copy link
Contributor

deebloo commented May 11, 2017

@filipesilva @Brocco @dave11mj, would it be worth making this more generic? for example the cli generates a base project with only the bare minimum and then allows the user to pass in which optional modules they would like to include? something like

ng new cool-project --modules=Router,Animations,Http

@filipesilva
Copy link
Contributor

We generally try to avoid adding library conditionals in ng new but maybe a single flag for all Angular Modules would be a good middleground. @hansl @Brocco @sumitarora thoughts?

@deebloo
Copy link
Contributor

deebloo commented May 11, 2017

I think it would make sense for all optional modules maintained in the core angular repo.

@dave11mj
Copy link
Contributor Author

@deebloo I like the idea of a more generic --modules although to me that seems a bit more disrupting since it would require to remove the well known --routing and it would need to be a bit more thought out since it would only support routing (and perhaps animations) at the moment.

@filipesilva I would not consider animations just another library / small module. It's being part of the angular core for a long time and one really appealing feature. It also has other libraries that depend on it like Angular Material.

That's why I feel could be treating like --routing providing the basic set up necessary to get new comers up and running with it. (Would be nice to add an example animation used for their reference, maybe fade in the title / new logo without generating external file this time ? lol)

Another reason I feel an --animation is necessary, is because I like the idea of the cli being animations friendly, which is why I would also be excited to see more progress on areas like animation generators seen in PR #5381 .

@clydin
Copy link
Member

clydin commented Dec 6, 2018

With the advent of ng add and material's usage to automatically add animations as needed, the method described herein is not something the team is looking at supporting within the CLI itself.

@clydin clydin closed this as completed Dec 6, 2018
@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 9, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
effort1: easy (hours) feature Issue that requests a new feature
Projects
None yet
6 participants