Angular-cli: ng build --prod gives error because it doesn't exclude mock modules that includes twice the same pipes and components with angular-cli rc4

[ovione]

Bug Report or Feature Request (mark with an x)

- [x ] bug report -> please search issues before submitting
- [ ] feature request

Versions.

@angular/cli: 1.0.0-rc.4
node: 7.4.0
os: linux x64
@angular/common: 2.4.10
@angular/compiler: 2.4.10
@angular/core: 2.4.10
@angular/forms: 2.4.10
@angular/http: 2.4.10
@angular/platform-browser: 2.4.10
@angular/platform-browser-dynamic: 2.4.10
@angular/platform-server: 2.4.10
@angular/router: 3.4.10
@angular/cli: 1.0.0-rc.4
@angular/compiler-cli: 2.4.10

Repro steps.

ng build --prod

The log given by the failure.

ERROR in Type PofiNumberPipe in /home/ovidio/projects/belastingsportaal/projects/pofi-web/pofi-ui/src/app/common/util/pofi-number.pipe.ts is part of the declarations of 2 modules: SharedAppModule in /home/ovidio/projects/belastingsportaal/projects/pofi-web/pofi-ui/src/app/common/shared/shared-app.module.ts and SharedAppModuleMocked in /home/ovidio/projects/belastingsportaal/projects/pofi-web/pofi-ui/src/app/common/shared/shared-app.mock.module.ts! Please consider moving PofiNumberPipe in /home/ovidio/projects/belastingsportaal/projects/pofi-web/pofi-ui/src/app/common/util/pofi-number.pipe.ts to a higher module that imports SharedAppModule in /home/ovidio/projects/belastingsportaal/projects/pofi-web/pofi-ui/src/app/common/shared/shared-app.module.ts and SharedAppModuleMocked in /home/ovidio/projects/belastingsportaal/projects/pofi-web/pofi-ui/src/app/common/shared/shared-app.mock.module.ts. You can also create a new NgModule that exports and includes PofiNumberPipe in /home/ovidio/projects/belastingsportaal/projects/pofi-web/pofi-ui/src/app/common/util/pofi-number.pipe.ts then import that NgModule in SharedAppModule in /home/ovidio/projects/belastingsportaal/projects/pofi-web/pofi-ui/src/app/common/shared/shared-app.module.ts and SharedAppModuleMocked in /home/ovidio/projects/belastingsportaal/projects/pofi-web/pofi-ui/src/app/common/shared/shared-app.mock.module.ts.

ERROR in ./src/main.ts
Module not found: Error: Can't resolve './$$_gendir/app/bootstrap/app.module.ngfactory' in '/home/ovidio/projects/belastingsportaal/projects/pofi-web/pofi-ui/src'
@ ./src/main.ts 4:0-84
@ multi ./src/main.ts

Desired functionality.

the build with aot should succeed

Mention any other details that might be useful.

The error happens when I issue a ng 'build --prod'. That means that aot is enabled by default.

In the tsconfig.app.json I have excluded some *.ts files that are used only during testing and not needed for a build.
Those are mentioned in the exclude section of the tsconfig.app.json.
As you see the shared-app.mock.module.ts containing SharedAppModuleMocked is excluded in this way.

The error above is because the shared-app.mock.module.ts declares pipes, and components that are declared as well in the SharedAppModule.
The SharedAppModule is used in the application per se.

But the shared-app.mock.module.ts is excluded and should not be taken into account when we issue a
ng build --prod. Why is it taken into account ????

My tsconfig.app.json follows as well.

{
"compilerOptions": {
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"lib": [
"es2016",
"dom"
],
"outDir": "../out-tsc/app",
"module": "es2015",
"baseUrl": "",
"types": []
},
"exclude": [
"test.ts",
"/.spec.ts",
"/.spec.page.ts",
"/common/testing/.ts",
"app/volmacht/abstract-volmacht-testpage.ts",
"app/common/shared/shared-app.mock.module.ts",
"/.mocked.module.ts",
"*/.mock.module.ts"
]
}

[filipesilva]

Cannot reproduce in the latest version. Here is what I did:

• create src/app/my-module.mock.module.ts:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

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

@NgModule({
  imports: [
    CommonModule,
  ],
  declarations: [AppComponent]
})
export class MyModuleMockModule { }

• ng build --aot, see error similar to yours
• add "**/*.mock.module.ts" to exclude array in src/tsconfig.app.json
• ng build --aot, see no error

[ovione]

you are right, I generated a simple project and yes no error.
but in my bigger project I have the error.

There must be somwhere a reference to this mock module.
I will try to find it.

thanks

[ovione]

hello Fillipe

It worked when I build with "ng build --prod" but now I have a problem when I access the application with my browser.
The error I get is:
Uncaught (in promise): Error: Token must be defined!
Error: Token must be defined!
at new Error (native)
at Error.y (http://localhost:3000/polyfills.a3fe0eb2e478d0a38445.bundle.js:36:2553)

I'm looking into it but any help would be appreciated thanks.

But for the prior error about the build not working, here is how I solved it:

The error was that in the tsconfig.app.json I had to put in the 'exclude' section all the .ts files for testing that were including the module /shared-app.mock.module.ts.
This is a module only used for testing that was declaring some components that were also declared in the main app module called SharedAppModule.
Once I excluded them the 'ng build --prod' did work.
Here is the exclude section of the tsconfig.app.json:
"exclude": [
"test.ts",
"/.spec.ts",
"/.spec.page.ts",
"/common/testing/.ts",
"/.mocked.module.ts",
"/-mocked.module.ts",
"/.mock.module.ts",
"/-mock.module.ts",
"/.mock.component.ts",
"/-mocked.component.ts",
"/.mocked.component.ts",
"/-mocked.directive.ts",
"/-testpage.ts",
"/-test.component.ts",
"app/notification/detail/notification-organisatie-gevraagde-volmacht-geweigerd.component.ts"
]

[ovione]

Actually something I didn't mention is that my "ng build --prod" gives a warining which is:

WARNING in ./src/$$_gendir/app/bootstrap/app.module.ngfactory.ts
589:71-103 "export 'AuthenticationResolver' (imported as 'import184') was not found in '../../../app/bootstrap/app.routing'

I start the application withthe npm script
"serveprodwithdevenv": "ng serve --port 3000 --prod --env=dev",

then when I access the application I have the following error:
Uncaught (in promise): Error: Token must be defined!
Error: Token must be defined!
at new Error (native)
at Error.y (http://localhost:3000/polyfills.a3fe0eb2e478d0a38445.bundle.js:36:2553)

I'm almost sure that this is because of the warning '589:71-103' mentioned before.
But I don't know yet how to solve this.
Any help is appreciated :)

[ovione]

ok now it works.

The Error: Token must be defined! was related to the
589:71-103 "export 'AuthenticationResolver' (imported as 'import184') was not found in

The reason for this error was:
in my router I had:
resolve: {
AuthenticationResolver
}

instead of:
resolve: {
authenticationResolverValue: AuthenticationResolver
}

Now everything done with "ng build --prod" works.

cheers
O

[filipesilva]

Heya, I'm glad you got it sorted in the end!

[brada1703]

Hi @ovione ,

I'm encountering the same error as you did regarding having a component in two modules. So, I'm definitely interested in your solution to this problem. However, I don't really understand your first post on March 23.

Regarding excluding files in tsconfig.json, which ones did you actually exclude?

Did you end up excluding your pipe? "Type PofiNumberPipe in /home/ovidio/projects/belastingsportaal/projects/pofi-web/pofi-ui/src/app/common/util/pofi-number.pipe.ts"

I appreciate that you made the following text generic so that it would be applicable to others, but I think it lost some valuable information for me. Can you help me understand what these are:

Here is the exclude section of the tsconfig.app.json:
"exclude": [
"test.ts",
"/.spec.ts",
"/.spec.page.ts",
"/common/testing/.ts",
"/.mocked.module.ts",
"/-mocked.module.ts",
"/.mock.module.ts",
"/-mock.module.ts",
"/.mock.component.ts",
"/-mocked.component.ts",
"/.mocked.component.ts",
"/-mocked.directive.ts",
"/-testpage.ts",
"**/-test.component.ts",
"app/notification/detail/notification-organisatie-gevraagde-volmacht-geweigerd.component.ts"
]

I've excluded the test file, which, unfortunately, did not solve the problem.

Thanks!

[ovione]

hello

Well it was some time ago but I think I rememebr.
When you generate a project with angular-cli you have under /src two files
tsconfig.app.json and tsconfig.spec.json that are used for your build and tests respectively.
In those files you can include/exclude files.

In the case of a pipe it was defined in two modules.
shared-app.module.ts 'for the app in dev or prod' and
shared-app.mock.module.ts 'only used in tests'

If I don't exclude the shared-app.mock.module.ts in my tsconfig.app.json it will try to include that test module in my production bundle when I do 'ng build --prod' and the above mentioned error that the Pipe is declared in both modules will be put in the console.
Thats why I have to exclude the shared-app.mock.module.ts in the tsconfig.app.json so that there is no clash.

So briefly I didn't exclude the Pipe but I ended up excluding the test module that was including that pipe.
I hope the explanation could help you.

cheers
O

[brada1703]

Thanks @ovione for your help! 👍

Unfortunately, I still get the same error. :( I'll keep working on it.

[ovione]

you must have somewhere in your code a component or pipe duplicated in two modules.

[angular-automatic-lock-bot[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._}