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

NoOpAnimationDriver error with ng-xi18n #13624

Closed
sumigoma opened this Issue Dec 22, 2016 · 26 comments

Comments

Projects
None yet
@sumigoma

sumigoma commented Dec 22, 2016

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior
ng-xi18n with angular 2.4.0 fails with exception Error: Error encountered resolving symbol values statically. Calling function 'NoOpAnimationDriver'. Builds fine with ng build --prod or ng serve.

Expected behavior
Extract xlf without errors

Please tell us about your environment:
angular-cli: 1.0.0-beta.24
node: 6.2.2
os: win32 x64

  • Angular version: 2.4.0

  • Browser: n/a

  • Language: TypeScript 2.0.3

  • Node (for AoT issues): node --version = node: 6.2.2

@matsko

This comment has been minimized.

Member

matsko commented Dec 22, 2016

@chuckjaz @tbosch wasn't this resolved last week?

cc @hansl

@intellix

This comment has been minimized.

intellix commented Dec 22, 2016

I had this and a range of errors last night. I see that you're using the cli @sumigoma
Try running the clean install instructions from angular-cli, that fixed it for me: https://github.com/angular/angular-cli#updating-angular-cli

Bizarrely there are a few node_module cache issues and nobody knows why :)

@timosalm

This comment has been minimized.

timosalm commented Dec 22, 2016

Same error here - I followed the angular-cli clean install instructions.

@Hyune-kel

This comment has been minimized.

Hyune-kel commented Dec 22, 2016

Same error for me.

  • angular-cli: 1.0.0-beta.24
  • node: 6.9.2
  • os: win32 x64
  • Angular: 2.4.1
  • TypeScript: 2.0.3

Always the same error after the angular-cli clean install instructions.

@chuckjaz

This comment has been minimized.

Member

chuckjaz commented Dec 22, 2016

Can you make sure the BrowserTestingModule is not include in the project being compiled?

BrowserTestingModule is not intended to be used by AOT and will generate this error because it includes: {provide: AnimationDriver, useValue: AnimationDriver.NOOP} for whichNOOP is a reference to new NoOpAnimationDriver(); which is the expression the error is referring to.

@tbosch

This comment has been minimized.

Member

tbosch commented Dec 22, 2016

@timosalm

This comment has been minimized.

timosalm commented Dec 22, 2016

Excluding the "test.ts" file in tsconfig.json resolved the issue for me.

... "exclude": [ "test.ts" ], "angularCompilerOptions": { "genDir": "../locale" } ...

@rexthk

This comment has been minimized.

rexthk commented Dec 23, 2016

@timosalm
It doesn't work for me. It seems like my CLI completely ignore this line during running ng-xi18n.

Here is my solution:
I copied tsconfig.json to my root. And then include the lib.es6.d.ts:

"files": [
"node_modules/typescript/lib/lib.es6.d.ts"
]

p.s. I am targeting es5.

@timosalm

This comment has been minimized.

timosalm commented Dec 23, 2016

@rexthk if the tsconfig.json TypeScript configuration file is located somewhere other than in the root folder, you must identify the path to it with the -p option:
./node_modules/.bin/ng-xi18n -p src/tsconfig.json

@rexthk

This comment has been minimized.

rexthk commented Dec 23, 2016

@timosalm You are right. By default Angular CLI puts tsconfig.ts inside src folder.

Anyway, it seems simply excluding test.ts doesnt work in my case. Including es6 just solve all my dependency problem too :)

@sumigoma

This comment has been minimized.

sumigoma commented Dec 23, 2016

@chuckjaz @tbosch excluding test.ts in tsconfig.json indeed appears to work. Will there be any repercussions, like on vscode intellisense in the spec files? (It looks like intellisense is working fine... but I thought vscode reads tsconfig.json)

@hansl will this be angular-cli's recommended approach?

@chuckjaz

This comment has been minimized.

Member

chuckjaz commented Jan 3, 2017

@sumigoma Excluding test.ts will cause it to be in a separate project from the rest of the application. To avoid this I recommend creating a tsconfig-build.json that has the AOT options (specifically excluding test.ts) and leave tsconfig.json to be the configuration you want editors to use.

@sumigoma

This comment has been minimized.

sumigoma commented Jan 4, 2017

@chuckjaz @hansl Makes sense to me, but if this is the recommended approach it seems like it should be adopted by angular-cli.

@hansl

This comment has been minimized.

Contributor

hansl commented Jan 4, 2017

Angular-CLI has its own way of dealing with tsconfig.json. We're still evaluating how we want to approach interop with other command line tools, since we don't want to have multiple tsconfig files in the same projects.

Closing this as solved for now. If you disagree let us know.

@stephanrauh

This comment has been minimized.

stephanrauh commented Jan 6, 2017

Just for the reference: The workaround solving the problem consists of two steps:

  • target ES6. ES5 won't work.
  • exclude the file "tests.ts" in your ts-config.json:
{
  "exclude": [ "test.ts" ],
  "compilerOptions": {
    "baseUrl": "",
    ...
@fx90

This comment has been minimized.

fx90 commented Jan 25, 2017

@hansl
I am still having this problem even with the suggested workaraound of excluding "tests.ts". Please advise.

Command:

"./node_modules/.bin/ng-xi18n" -p tsconfig.json

Error message:

Error: Error encountered resolving symbol values statically. Calling function 'NoOpAnimationDriver', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol AnimationDriver.NOOP in C
:/Users/Fabian/Workspace/sportify/frontend/node_modules/@angular/platform-browser/src/dom/animation_driver.d.ts, resolving symbol BrowserTestingModule in C:/Users/Fabian/Workspace/sportify/frontend/node_modules/@angular/platform-browser/testing/browser.d.ts, re
solving symbol BrowserTestingModule in C:/Users/Fabian/Workspace/sportify/frontend/node_modules/@angular/platform-browser/testing/browser.d.ts
    at simplifyInContext (C:\Users\Fabian\Workspace\sportify\frontend\node_modules\@angular\compiler\bundles\compiler.umd.js:25569:27)
...

tsconfig.json:

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [ "test.ts" ],
  "angularCompilerOptions": { "genDir": "i18n" }
}
  • Angular 2.4.4
  • angular-cli: 1.0.0-beta.26
  • Typescript 2.0.10
  • Windows 10 x64
  • Node 6.9.1

Edit:
I got it to work by starting it from <project_root>/src instead of "at the root of the application project" as the documentation says.

@dalibor983

This comment has been minimized.

dalibor983 commented Jan 28, 2017

When you exclude test.ts in tsconfig.json ng lint does not work anymore :)

#3993

@rahul-winner

This comment has been minimized.

rahul-winner commented Feb 3, 2017

I was getting following error on running ng-xi18n
Error encountered resolving symbol values statically. Calling function 'NoOpAnimationDriver', function calls are not supported.

The error has gone once I added exclude": [ "test.ts" ], however now I am getting errors related to test cases likewise "Cannot find name 'expect'.", "Cannot find name 'describe'."...

Could anyone please help me resolving this problem.

@danielritter

This comment has been minimized.

danielritter commented Feb 6, 2017

I do have the same error.

@MeMeMax

This comment has been minimized.

MeMeMax commented Feb 9, 2017

Notice that you have to be in the root of your application folder and if needed pass -p src/tsconfig.json depending on where your tsconfig file is. That worked for me.

@MJuma

This comment has been minimized.

MJuma commented Feb 9, 2017

Was getting this error as well. I'm using Angular CLI and it turned out to be a wallabyjs config file of mine that was causing this NoOpAnimationDriver error to occur. I added it to my tsconfig excludes and Angular CLI started to build prod and aot builds just fine for me afterwards.

@yanyixing

This comment has been minimized.

yanyixing commented Feb 20, 2017

when I exclude the test.ts file, it works
but don't know why.

@borislemke

This comment has been minimized.

borislemke commented Feb 20, 2017

I'm getting this error but as far as I can remember I'm not trying to use i18 in any part of my project. Is this coming from Material 2? Are there any commonly known modules that raise this issue? I can't start ngc nor ng build --prod or ng build --aot

I'm getting the infamous ERROR in Error encountered resolving symbol values statically. Calling function 'NoOpAnimationDriver'... error

UPDATE SOLUTION
@hansl @chuckjaz @tbosch @matsko

It turns out this is not an issue with i18 at all. The error message shown are simply IRRELEVANT. I found an old project that has worked with --aot and I tried all possible combinations with the tsconfig.json from that old project and got it working. WELL, it is not really working straight away, but it shows some very helpful errors that I needed to resolve until --aot compiles successfully.
In my case, the compiler was complaining about relative URLs to images in the assets folder from different component's .css files as being not found. I fixed all of them and --aot compiled correctly.

*I have WebStorm compile all scss files to css and reference the .css files from my component's styleUrls instead of using ng-cli's built in scss loader, if that's relevant.

{
    "files": [
        "app/app.module.ts", // Added to my 'broken' tsconfig, relative to `/src`
        "main.ts", // this too
        "typings.d.ts" // this too
    ],
    "angularCompilerOptions": {
        "genDir": "aot", // Forgot what my intial value was, but I THINK I changed this
        "skipMetadataEmit": true  // After adding this, the compiler showed me the helpful errors
    },
    "compilerOptions": {
        "baseUrl": "",
        "declaration": false,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "lib": [
            "es6", // I think I changed this from es2015 to es6
            "dom"
        ],
        "mapRoot": "./",
        "module": "es2015",  // Forgot what my intial value was, but I THINK I changed this
        "moduleResolution": "node",
        "outDir": "../dist/out-tsc",
        "sourceMap": true,
        "target": "es5",
        "typeRoots": [
            "../node_modules/@types"
        ]
    }
}

I also noticed that there is no difference in the output files when using --prod or --prod --aot, is --aot the default now when using --prod?

@peteralbert

This comment has been minimized.

peteralbert commented Feb 23, 2017

In case you're using wallabyJs, also exclude wallabyTest.ts in your tsconfig.json:

 "exclude": [ "test.ts", "wallabyTest.ts" ],
@mbrookson

This comment has been minimized.

mbrookson commented Feb 24, 2017

Following people's recommendation I can confirm I was able to get around this issue by

  1. Adding "exclude": [ "test.ts" ] to the tsconfig.json file

  2. Specifying the tsconfig.json path in the command: "./node_modules/.bin/ng-xi18n" -p src/tsconfig.json as this is where the angular-cli added mine by default

  3. Changing all scss imports to (for example) @import "filename.scss" WITH the filename extension

  4. Fixing any errors as they came up, tended to be with .spec.ts files where I am have accidentally missed things. Can still run ng-serve but the i18n command needed everything fixed

@artdias90

This comment has been minimized.

artdias90 commented Apr 4, 2017

I'm still having issues with "@angular/compiler-cli": "2.4.10". Tried all from above but no success.

UPDATE got it working with the following tsconfig:

{
  "compilerOptions": {
    "baseUrl": ".",
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "noEmit": true,
    "noEmitHelpers": true,
    "importHelpers": true,
    "strictNullChecks": true,

    "skipDefaultLibCheck": true,
    "skipLibCheck": true,
    "pretty": false,

    "lib": [
      "es2015",
      "es2016",
      "dom"
    ],
    "typeRoots": [
      "node_modules/@types"
    ],
    "types": [
      "node"
    ],

    "paths": {
      "shared/*": ["src/app/shared/*"]
    }
  },
  "exclude": [
    "node_modules",
    "build",
    "src/**/*.spec.ts",
    "src/**/*.e2e.ts"
  ],
  "awesomeTypescriptLoaderOptions": {
    "forkChecker": true,
    "useWebpackText": true
  },
  "angularCompilerOptions": {
    "genDir": "./compiled",
    "skipMetadataEmit": true
  },
  "compileOnSave": false,
  "buildOnSave": false,
  "atom": {
    "rewriteTsconfig": false
  }
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment