Base solution for your next web application
Open Closed

ng build --prod failing #2848


User avatar
0
ardrian created

Hi,

I've successfully created an ASP.NET Core + Angular 2 project from the template builder at <a class="postlink" href="https://aspnetboilerplate.com/">https://aspnetboilerplate.com/</a>. I've successfully built a full project which runs fine on local host (both the Web API and the Angular front end). However I have come across deployment issues. So I've simplified my test here.

I've created a fresh project from the template generator at <a class="postlink" href="https://aspnetboilerplate.com/">https://aspnetboilerplate.com/</a>

If I unzip the given zip file, and then run the following commands in the angular directory:

npm install 
npm start

The server starts fine, and I can connect to <a class="postlink" href="http://localhost:4200">http://localhost:4200</a>

I then try a build, and it does not work

ng build

produces a valid output in the 'dist' directory however if I run

ng build --prod

. I receive the following error:

C:\dev\fac\Test2\angular>ng build --prod
Your global Angular CLI version (1.0.0) is greater than your local
version (1.0.0-rc.2). The local Angular CLI version is used.

To disable this warning use "ng set --global warnings.versionMismatch=false".
Hash: c84a5b8860d56f737e36
Time: 32247ms
chunk    {0} polyfills.0c7d2796d4a8fb89f144.bundle.js (polyfills) 157 kB {5} [initial] [rendered]
chunk    {1} scripts.a3a06162c794ae0baa0f.bundle.js (scripts) 678 kB {5} [initial] [rendered]
chunk    {2} styles.35fa8543aa31714441cb.bundle.css (styles) 440 bytes {5} [initial] [rendered]
chunk    {3} main.8bff35e768e0f94109c3.bundle.js (main) 4.68 kB {4} [initial] [rendered]
chunk    {4} vendor.736f99abce120fcce6fd.bundle.js (vendor) 1.64 MB [initial] [rendered]
chunk    {5} inline.ca4ef5f69789d84aed0a.bundle.js (inline) 0 bytes [entry] [rendered]

ERROR in Error encountered resolving symbol values statically. Reference to a non-exported function (position 21:10 in the original .ts file), resolving symbol accountModuleAnimation in C:/dev/fac/Test2/angular/src/shared/animations/routerTransition.ts, resolving symbol LoginComponent in C:/dev/fac/Test2/angular/src/account/login/login.component.ts, resolving symbol LoginComponent in C:/dev/fac/Test2/angular/src/account/login/login.component.ts

ERROR in ./src/main.ts
Module not found: Error: Can't resolve './$$_gendir/root.module.ngfactory' in 'C:\dev\fac\Test2\angular\src'
 @ ./src/main.ts 7:0-72
 @ multi ./src/main.ts

C:\dev\fac\Test2\angular>

It seems that the angular-cli build compiler isn't happy with the way the functions are exported in the src/shared/animations/routerTransition.ts file. I've tried various ways to change the function export, however with no luck so far.

I've been stuck on this problem for a while now, so any help would be really appreciated.


3 Answer(s)
  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi,

    Sorry for the late reply. Can you try it like this.

    1. Remove node_modules
    2. Install yarn from <a class="postlink" href="https://yarnpkg.com/en/">https://yarnpkg.com/en/</a>
    3. instead of npm install use "yarn install".

    Also your global angular-cli version is higher than the one project uses according to this message.

    Your global Angular CLI version (1.0.0) is greater than your local

    You might need to downgrade it as well.

  • User Avatar
    0
    scottw created

    I had this exact same issue - my project and global clis were different, so i fixed that, i tried using yarn too. None of these changes seemed to work. I ended up considering the error message some more "Reference to a non-exported function" so just moved the body of the functions - ie - function slideFromBottom() into the actual exported function ie

    // slide to bottom export function accountModuleAnimation() { return trigger('routerTransition', [ state('void', style({ 'margin-top': '-10px', opacity: '0' })), state('*', style({ 'margin-top': '0px', opacity: '1' })), transition(':enter', [ animate('0.2s ease-out', style({ opacity: '1', 'margin-top': '0px' })) ]) ]); }

    now my ng build --prod works :D

  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi @ScottW,

    Thanks for your sharing :). This was a problem while upgradint from 2.0 to 4.0 I think. We have also included it in the latest version of template <a class="postlink" href="https://github.com/aspnetboilerplate/module-zero-core-template/blob/master/angular/src/shared/animations/routerTransition.ts">https://github.com/aspnetboilerplate/mo ... nsition.ts</a>.

    Thanks again.