Lazy load a whole library with nrwl/NX.

[pinalpithadiya]

Hi, I have created a project using nrwl/nx extention of angular CLI (https://github.com/nrwl/nx).
I want to add a whole library as a lazy loading module following are my angular and tsconfig json files

`{
"version": 1,
"projects": {
"lazy-load-demo": {
"projectType": "application",
"schematics": {
"@nrwl/angular:component": {
"style": "scss"
}
},
"root": "apps/lazy-load-demo",
"sourceRoot": "apps/lazy-load-demo/src",
"prefix": "lazy-load-demo",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/apps/lazy-load-demo",
"index": "apps/lazy-load-demo/src/index.html",
"main": "apps/lazy-load-demo/src/main.ts",
"polyfills": "apps/lazy-load-demo/src/polyfills.ts",
"tsConfig": "apps/lazy-load-demo/tsconfig.app.json",
"aot": false,
"assets": [
"apps/lazy-load-demo/src/favicon.ico",
"apps/lazy-load-demo/src/assets"
],
"styles": ["apps/lazy-load-demo/src/styles.scss"],
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "apps/lazy-load-demo/src/environments/environment.ts",
"with": "apps/lazy-load-demo/src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "lazy-load-demo:build"
},
"configurations": {
"production": {
"browserTarget": "lazy-load-demo:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "lazy-load-demo:build"
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"apps/lazy-load-demo/tsconfig.app.json",
"apps/lazy-load-demo/tsconfig.spec.json"
],
"exclude": ["/node_modules/", "!apps/lazy-load-demo/"]
}
},
"test": {
"builder": "@nrwl/jest:jest",
"options": {
"jestConfig": "apps/lazy-load-demo/jest.config.js",
"tsConfig": "apps/lazy-load-demo/tsconfig.spec.json",
"setupFile": "apps/lazy-load-demo/src/test-setup.ts"
}
}
}
},
"lazy-load-demo-e2e": {
"root": "apps/lazy-load-demo-e2e",
"sourceRoot": "apps/lazy-load-demo-e2e/src",
"projectType": "application",
"architect": {
"e2e": {
"builder": "@nrwl/cypress:cypress",
"options": {
"cypressConfig": "apps/lazy-load-demo-e2e/cypress.json",
"tsConfig": "apps/lazy-load-demo-e2e/tsconfig.e2e.json",
"devServerTarget": "lazy-load-demo:serve"
},
"configurations": {
"production": {
"devServerTarget": "lazy-load-demo:serve:production"
}
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": ["apps/lazy-load-demo-e2e/tsconfig.e2e.json"],
"exclude": ["/node_modules/", "!apps/lazy-load-demo-e2e/"]
}
}
}
}

},
"lazy-load-coponent": {
"projectType": "library",
"root": "libs/lazy-load-coponent",
"sourceRoot": "libs/lazy-load-coponent/src",
"prefix": "lazy-load-demo",
"architect": {
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"libs/lazy-load-coponent/tsconfig.lib.json",
"libs/lazy-load-coponent/tsconfig.spec.json"
],
"exclude": ["/node_modules/", "!libs/lazy-load-coponent/**"]
}
},
"test": {
"builder": "@nrwl/jest:jest",
"options": {
"jestConfig": "libs/lazy-load-coponent/jest.config.js",
"tsConfig": "libs/lazy-load-coponent/tsconfig.spec.json",
"setupFile": "libs/lazy-load-coponent/src/test-setup.ts"
}
}
},
"schematics": {
"@nrwl/angular:component": {
"styleext": "scss"
}
}
}
},
"cli": {
"defaultCollection": "@nrwl/angular"
},
"schematics": {
"@nrwl/angular:application": {
"unitTestRunner": "jest",
"e2eTestRunner": "cypress"
},
"@nrwl/angular:library": {
"unitTestRunner": "jest"
}
},
"defaultProject": "lazy-load-demo"
}
`
and tsconfig file

{
"compileOnSave": false,
"compilerOptions": {
"rootDir": ".",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"importHelpers": true,
"target": "es2015",
"module": "esnext",
"typeRoots": ["node_modules/@types"],
"lib": ["es2017", "dom"],
"skipLibCheck": true,
"skipDefaultLibCheck": true,
"baseUrl": ".",
"paths": {
"@lazy-load-demo/lazy-load-coponent": [
"libs/lazy-load-coponent/src/index.ts"
]
}
},
"include": ["**/*.ts"],
"exclude": ["node_modules", "tmp"]
}

While building the project the individual chunk gets created successfully but afterwards, I am
getting an error

ERROR in D:/Projects/Internal/lazy-load-demo1/libs/lazy-load-coponent/src/lib/lazy-load-coponent.module.ts Module build failed (from lazy-load-demo1/node_modules/@ngtools/webpack/src/index.js): Error: lazy-load-demo1\libs\lazy-load-coponent\src\lib\lazy-load-coponent.module.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' propError: lazy-load-demo1\libs\lazy-load-coponent\src\lib\lazy-load-coponent.module.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property. at AngularCompilerPlugin.getCompiledFile (lazy-load-demo1\node_modules\@ngtools\webpack\src\angular_compiler_plugin.js:838:23) at plugin.done.then (lazy-load-demo1\node_modules\@ngtools\webpack\src\loader.js:41:31) at process._tickCallback (internal/process/next_tick.js:68:7)

Is there any way to solve this error?

[mohammedzamakhan]

You did not include lazyModules in angular.json, check the readme for instructions

[pinalpithadiya]

Hi @mohammedzamakhan

I included the lazy modules in the angular JSON file it was still not working.
I had created a demo project with angular CLI before for lazy loading. It was working fine.
So the problem here is : the ngx loadable package is working fine with angular CLI but not with nrwl/nx.

Can you please tell me which thing might cause this issue?

[mohammedzamakhan]

can you give the github link of your nrwl/nx demo app