Angular 9 project fails
Trying to compile code that works in Angular 8.
ERROR in node_modules/#angular/core/src/render3/ng_dev_mode.d.ts(9,11): error TS2451: Cannot redeclare block-scoped variable 'ngDevMode'.
../../../node_modules/#angular/core/src/application_ref.d.ts(8,28): error TS2307: Cannot find module 'rxjs'.
../../../node_modules/#angular/core/src/event_emitter.d.ts(8,39): error TS2307: Cannot find module 'rxjs'.
../../../node_modules/#angular/core/src/linker/query_list.d.ts(8,28): error TS2307: Cannot find module 'rxjs'.
../../../node_modules/#angular/core/src/render3/ng_dev_mode.d.ts(9,11): error TS2451: Cannot redeclare block-scoped variable 'ngDevMode'.
../../../node_modules/#angular/core/src/util/lang.d.ts(8,28): error TS2307: Cannot find module 'rxjs'.
../../../node_modules/#angular/http/src/backends/jsonp_backend.d.ts(8,28): error TS2307: Cannot find module 'rxjs'.
../../../node_modules/#angular/http/src/backends/xhr_backend.d.ts(8,28): error TS2307: Cannot find module 'rxjs'.
../../../node_modules/#angular/http/src/http.d.ts(8,28): error TS2307: Cannot find module 'rxjs'.
I isolate the problem to a service that I am loading.
import { Injectable } from '#angular/core';
import { Http, Response } from '#angular/http';
import { Observable, throwError } from 'rxjs';
import { map, takeUntil, tap, catchError } from 'rxjs/operators';
import * as Global from './global';
import { HttpClient } from '#angular/common/http';
import { HttpHeaders } from '#angular/common/http';
import { HttpErrorResponse } from '#angular/common/http';
my package.json
{
"name": "f202",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "~7.2.0",
"#angular/common": "~7.2.0",
"#angular/compiler": "~7.2.0",
"#angular/core": "~7.2.0",
"#angular/forms": "~7.2.0",
"#angular/platform-browser": "~7.2.0",
"#angular/platform-browser-dynamic": "~7.2.0",
"#angular/router": "~7.2.0",
"bootstrap": "^4.4.1",
"jquery": "^3.4.1",
"popper.js": "^1.16.1",
"rxjs": "^6.5.4",
"tslib": "^1.9.0",
"zone.js": "~0.8.26"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.13.0",
"#angular/cli": "~7.3.9",
"#angular/compiler-cli": "~7.2.0",
"#angular/language-service": "~7.2.0",
"#types/node": "~8.9.4",
"#types/jasmine": "~2.8.8",
"#types/jasminewd2": "~2.0.3",
"codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~3.2.2"
}
}
Also tried the usual mixture of upgrading typescript, rxjs and angular components.
Any help would be appreciated!
------------------UPDATE-------------
Yes #phix was entirely correct with this second comment, It was still version 7.
I assumed going a global update (npm install #angular/cli#9.0.0 -g ) to 9 and then creating a project will automatically create a version 9 project - wrong assumption.
I used the info to properly upgrade my project
https://levelup.gitconnected.com/upgrade-to-angular-9-within-10-minutes-671c6fd6174b
Related
I try to found solutions, on this problem...
Because, is not on my code...
Its is after update to latest npm and fs-extra...
Build at: 2022-03-16T13:33:13.718Z - Hash: aeac85e5815ce0c4 - Time: 7748ms
Error: node_modules/#angular-devkit/build-angular/node_modules/#angular-devkit/build-webpack/src/webpack-dev-server/index.d.ts:26:121 - error TS2307: Cannot find module '../../.
./core/src' or its corresponding type declarations.
26 declare const _default: import("#angular-devkit/architect/src/internal").Builder<WebpackDevServerBuilderSchema & import("../../../core/src").JsonObject>;
~~~~~~~~~~~~~~~~~~~
Error: node_modules/#angular-devkit/build-angular/node_modules/#angular-devkit/build-webpack/src/webpack/index.d.ts:30:116 - error TS2307: Cannot find module '../../../core/src'
or its corresponding type declarations.
30 declare const _default: import("#angular-devkit/architect/src/internal").Builder<RealWebpackBuilderSchema & import("../../../core/src").JsonObject>;
~~~~~~~~~~~~~~~~~~~
Error: node_modules/#angular-devkit/build-angular/node_modules/webpack-dev-middleware/types/index.d.ts:204:27 - error TS2694: Namespace '"fs"' has no exported member 'StatSyncFn
'.
204 statSync?: import("fs").StatSyncFn;
Somebody having like solutions on this ?...
I have try to re-install webpack-server, all indicated...
Nothing to do...I don't understound why that's not working...
How to proceed...?
Thanks to us for your help...
Here to package.json
"name": "bonrefil",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
"private": true,
"dependencies": {
"#angular/animations": "~13.0.0",
"#angular/cdk": "^13.2.6",
"#angular/common": "~13.0.0",
"#angular/compiler": "~13.0.0",
"#angular/core": "~13.0.0",
"#angular/forms": "~13.0.0",
"#angular/material": "^13.2.6",
"#angular/platform-browser": "~13.0.0",
"#angular/platform-browser-dynamic": "~13.0.0",
"#angular/router": "~13.0.0",
"bootstrap": "^5.1.3",
"bootstrap-icons": "^1.7.2",
"fs-extra": "^10.0.1",
"image-to-base64": "^2.2.0",
"jquery": "^3.6.0",
"popper.js": "^1.16.1",
"rxjs": "~7.4.0",
"tslib": "^2.3.0",
"uuid": "^8.3.2",
"xdata": "^2.1.17",
"zone.js": "~0.11.4"
},
"devDependencies": {
"#angular-devkit/build-angular": "^13.2.6",
"#angular-devkit/core": "^13.2.6",
"#angular/cli": "~13.0.3",
"#angular/compiler-cli": "~13.0.0",
"#nguniversal/builders": "^13.0.2",
"#types/jasmine": "~3.10.0",
"#types/jquery": "^3.5.9",
"#types/node": "^12.20.46",
"#types/uuid": "^8.3.4",
"#types/webpack-dev-server": "^4.7.2",
"bootstrapvalidator": "^0.5.4",
"jasmine-core": "~3.10.0",
"karma": "~6.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "~1.7.0",
"typescript": "~4.4.3",
"webpack": "^5.70.0",
"webpack-dev-middleware": "^5.3.1",
"webpack-dev-server": "^4.7.4"
}
}
You need to update your #types/node version. If you update to at least 15.12.2 it should now work: See https://app.renovatebot.com/package-diff?name=#types%2Fnode&from=13.13.5&to=15.12.2
I am trying to compile my angular project for several days now, without any success. The issue is related to bindings npm package not being able to find fs which I assume is a webpack issue within angular. I have found some sources on github and SO telling me to put the code block below in my package.json but that doesn't seem to do anything... when running ng serve I get the small error, and if it would be useful when I run ng build it generates this error into my console.
I have done multiple clean re-installs of my npm folder and even isolated the library for testing. The worst thing about it is that the library is able to build in an html document but not when served in angular. I again assume it has to do with webpack, the library itself is compiled using the tsc and browserify.
"browser": {
"fs": "empty"
}
ERROR in ./node_modules/bindings/bindings.js
Module not found: Error: Can't resolve 'fs' in 'C:\Users\tassc\Projects\Configurator\node_modules\bindings'
resolve 'fs' in 'C:\Users\tassc\Projects\Configurator\node_modules\bindings'
{
"name": "configurator",
"version": "0.0.0",
"scripts": {
"preinstall": "azure-devops-npm-auth",
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "~9.0.3",
"#angular/common": "~9.0.3",
"#angular/compiler": "~9.0.3",
"#angular/core": "~9.0.3",
"#angular/forms": "~9.0.3",
"#angular/platform-browser": "~9.0.3",
"#angular/platform-browser-dynamic": "~9.0.3",
"#angular/router": "~9.0.3",
"#types/three": "^0.103.2",
"#types/webgl2": "0.0.5",
"dat.gui": "^0.7.6",
"patio-covering-models": "0.0.8",
"rxjs": "~6.5.4",
"stream": "0.0.2",
"tslib": "^1.10.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.900.3",
"#angular/cli": "~9.0.3",
"#angular/compiler-cli": "~9.0.3",
"#angular/language-service": "~9.0.3",
"#types/jasmine": "~3.3.8",
"#types/jasminewd2": "~2.0.3",
"#types/node": "^12.12.28",
"azure-devops-npm-auth": "^1.0.3",
"codelyzer": "^5.1.2",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.7.5"
}
}
UPDATE: On closer inspection the actual library (patio-covering-models) I am using does also not build with webpack outside of angular. Browserify does not complain. How would I get around this? I should also mention that due to company policy I am unable to share the package that is causing this...
FS is not longer in use according to NPM https://www.npmjs.com/package/fs
I am trying to load a .gltf file that is in a local folder using three.js, however this error is being accused on console: "Not allowed to load local resource".
Already tried to run using http-server;
Tried to create a dist and run http-server from there;
Tried to give the browser permission (with google chrome, using the --allow-file-access-from-files option);
I've also rendered my .gltf file in an online renderer, just to make sure there's nothing wrong with the 3D model and everything went well.
typesccript class:
export class AppComponent {
title = 'three-app';
#ViewChild('rendererContainer') rendererContainer: ElementRef;
renderer = new THREE.WebGLRenderer();
scene = null;
camera = null;
mesh = null;
constructor() {
this.scene = new THREE.Scene();
this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
this.camera.position.z = 1000;
var loader = new GLTFLoader();
loader.load( 'C:\\Users\\x\\Desktop\\3dmodels\\box.gltf', function ( gltf ) {
this.scene.add( gltf.scene );
}, undefined, function ( error ) {
console.error( error );
} );
}
}
html:
<div #rendererContainer></div>
package.json:
{
"name": "three-app",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "~7.2.0",
"#angular/common": "~7.2.0",
"#angular/compiler": "~7.2.0",
"#angular/core": "~7.2.0",
"#angular/forms": "~7.2.0",
"#angular/platform-browser": "~7.2.0",
"#angular/platform-browser-dynamic": "~7.2.0",
"#angular/router": "~7.2.0",
"core-js": "^2.5.4",
"ecstatic": "^3.0.0",
"rxjs": "~6.3.3",
"three": "^0.107.0",
"tslib": "^1.9.0",
"zone.js": "~0.8.26"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.13.0",
"#angular/cli": "~7.3.3",
"#angular/compiler-cli": "~7.2.0",
"#angular/language-service": "~7.2.0",
"#types/node": "~8.9.4",
"#types/jasmine": "~2.8.8",
"#types/jasminewd2": "~2.0.3",
"codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~3.2.2"
}
}
Does anyone have any idea what might be going on?
I resolved using the "Web Server for Chrome" extension.
I created a local server, threw the 3D file there, then managed to load it by passing the local server URL. This extension has the option "Set CORS headers" which allows XMLHttpRequests from other origins.
you might want to try using a file URL. 'C:\Users\x\Desktop\3dmodels\box.gltf' isn't a URL, but 'file://C:\Users\x\Desktop\3dmodels\box.gltf' is.
Note, I don't have a Windows environment to try this in, so I'm not sure if that's a correct format, YMMV.
I can't run my angular app on amazon ec2. When I execute ng serve or ng serve -c stage with environment.stage.ts configuration, i'm getting errors as shown on the screenshot below. The error does not appear when run locally on my pc and project is compiled without errors.
The version of rxjs is 5.5.5.
Angular, angular-cli and node version also below.
ERROR in ./node_modules/#angular/router/esm5/router.js
Module not found: Error: Can't resolve 'rxjs/BehaviorSubject' in '/home/ubuntu/b2s_dev/b2s_v2_web/node_modules/#angular/router/esm5'
ERROR in ./node_modules/#agm/core/services/google-maps-api-wrapper.js
Module not found: Error: Can't resolve 'rxjs/Observable' in '/home/ubuntu/b2s_dev/b2s_v2_web/node_modules/#agm/core/services'
ERROR in ./node_modules/#agm/core/services/managers/data-layer-manager.js
Module not found: Error: Can't resolve 'rxjs/Observable' in '/home/ubuntu/b2s_dev/b2s_v2_web/node_modules/#agm/core/services/managers'
ERROR in ./node_modules/#agm/core/services/managers/marker-manager.js
Module not found: Error: Can't resolve 'rxjs/Observable' in '/home/ubuntu/b2s_dev/b2s_v2_web/node_modules/#agm/core/services/managers'
ERROR in ./node_modules/#agm/core/services/managers/info-window-manager.js
Module not found: Error: Can't resolve 'rxjs/Observable' in '/home/ubuntu/b2s_dev/b2s_v2_web/node_modules/#agm/core/services/managers'
ERROR in ./node_modules/#agm/core/services/managers/polyline-manager.js
Module not found: Error: Can't resolve 'rxjs/Observable' in '/home/ubuntu/b2s_dev/b2s_v2_web/node_modules/#agm/core/services/managers'
ERROR in ./node_modules/#agm/core/services/managers/circle-manager.js
Module not found: Error: Can't resolve 'rxjs/Observable' in '/home/ubuntu/b2s_dev/b2s_v2_web/node_modules/#agm/core/services/managers'
ERROR in ./node_modules/#agm/core/services/managers/kml-layer-manager.js
Module not found: Error: Can't resolve 'rxjs/Observable' in '/home/ubuntu/b2s_dev/b2s_v2_web/node_modules/#agm/core/services/managers'
ERROR in ./node_modules/#agm/core/services/managers/polygon-manager.js
Module not found: Error: Can't resolve 'rxjs/Observable' in '/home/ubuntu/b2s_dev/b2s_v2_web/node_modules/#agm/core/services/managers'
ERROR in ./node_modules/#angular/core/esm5/core.js
Module not found: Error: Can't resolve 'rxjs/Observable' in '/home/ubuntu/b2s_dev/b2s_v2_web/node_modules/#angular/core/esm5'
ERROR in ./node_modules/#angular/http/esm5/http.js
Module not found: Error: Can't resolve 'rxjs/Observable' in '/home/ubuntu/b2s_dev/b2s_v2_web/node_modules/#angular/http/esm5'
ℹ 「wdm」: Failed to compile.
BR,
try to import rxjs only without observables
{
"scripts": {
"ng": "ng",
"start": "ng serve",
"start-stage": "ng serve --env=stage",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"build:universal:prod": "ng build --prod && ng build --prod --app 1 --output-hashing=false && cpy ./server.js ./dist",
"serve:universal:prod": "npm run build:universal:prod && cd dist && node server",
"compile_#agm_core": "babel node_modules/#agm/core -d node_modules/#agm/core --presets es2015",
"postinstall": "npm run compile_#agm_core"
},
"private": true,
"dependencies": {
"#agm/core": "^1.0.0-beta.2",
"#angular/animations": "^5.0.0",
"#angular/common": "^5.0.0",
"#angular/compiler": "^5.0.0",
"#angular/core": "^5.0.0",
"#angular/forms": "^5.0.0",
"#angular/http": "^5.0.0",
"#angular/platform-browser": "^5.0.0",
"#angular/platform-browser-dynamic": "^5.0.0",
"#angular/platform-server": "^5.2.7",
"#angular/router": "^5.0.0",
"#nguniversal/express-engine": "^5.0.0-beta.6",
"babel-cli": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"core-js": "^2.4.1",
"moment": "^2.20.1",
"ng2-nouislider": "^1.7.7",
"ngx-disqus": "^2.3.7",
"nouislider": "^10.1.0",
"rxjs": "^5.5.5",
"zone.js": "^0.8.14"
},
"devDependencies": {
"#angular-devkit/build-angular": "^0.7.3",
"#angular/cli": "^6.1.3",
"#angular/compiler-cli": "^5.0.0",
"#angular/language-service": "^5.0.0",
"#types/googlemaps": "^3.30.4",
"#types/jasmine": "~2.5.53",
"#types/jasminewd2": "~2.0.2",
"#types/node": "~6.0.60",
"codelyzer": "^4.0.1",
"cpy-cli": "^1.0.1",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~3.2.0",
"tslint": "~5.7.0",
"typescript": "~2.4.2"
}
}
Use this command to install rxjs compact that will install the latest version of rxjs that is compatible with the Angular version that you are using.
npm install --save rxjs-compat
I recently inherited a Node.js with Angular 2 project and am trying to get up to speed. There are, obviously, numerous issues I am confronting so I am not sure if there is a direct version problem here, or if I set up something wrong.
I have the following import in a module from an example found here: http://candordeveloper.com/2017/04/25/how-to-create-dynamic-menu-and-page-title-with-angular-material-and-cli/
import { //only import the portions you will use to optimize build (MaterialModule to include all is deprecated)
MdCoreModule,
MdButtonModule,
MdCardModule,
MdIconModule,
MdMenuModule,
MdRippleModule,
MdSidenavModule,
MdToolbarModule,
//... add others you need
} from '#angular/material';
I used
npm install --save #angular/material #angular/cdk
to install the required packages, but am getting "'MdCoreModule' not exported error.
In package.json I have:
{
"name": "Test_Project",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "^4.2.4",
"#angular/cdk": "^2.0.0-beta.11",
"#angular/common": "^4.2.4",
"#angular/compiler": "^4.2.4",
"#angular/core": "^4.2.4",
"#angular/forms": "^4.2.4",
"#angular/http": "^4.2.4",
"#angular/material": "^2.0.0-beta.11",
"#angular/platform-browser": "^4.2.4",
"#angular/platform-browser-dynamic": "^4.2.4",
"#angular/router": "^4.2.4",
"core-js": "^2.4.1",
"rxjs": "^5.4.2",
"zone.js": "^0.8.14"
},
"devDependencies": {
"#angular/cli": "1.4.3",
"#angular/compiler-cli": "^4.2.4",
"#angular/language-service": "^4.2.4",
"#types/jasmine": "~2.5.53",
"#types/jasminewd2": "~2.0.2",
"#types/node": "~6.0.60",
"codelyzer": "~3.1.1",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~3.2.0",
"tslint": "~5.3.2",
"typescript": "~2.3.3"
}
}
I figure it might be a version issue, but I cannot find any related issues anywhere.
This is a copy of the (now deprecated) Material Module that Angular deleted from the official project. See Here.
import { NgModule } from '#angular/core';
import { OverlayModule } from '#angular/cdk/overlay';
import { A11yModule } from '#angular/cdk/a11y';
import { BidiModule } from '#angular/cdk/bidi';
import { ObserversModule } from '#angular/cdk/observers';
import { PortalModule } from '#angular/cdk/portal';
import { PlatformModule } from '#angular/cdk/platform';
import {
MdAutocompleteModule,
MdButtonModule,
MdButtonToggleModule,
MdCardModule,
MdChipsModule,
MdCheckboxModule,
MdDatepickerModule,
MdTableModule,
MdDialogModule,
MdExpansionModule,
MdFormFieldModule,
MdGridListModule,
MdIconModule,
MdInputModule,
MdListModule,
MdMenuModule,
MdPaginatorModule,
MdProgressBarModule,
MdProgressSpinnerModule,
MdRadioModule,
MdRippleModule,
MdSelectModule,
MdSidenavModule,
MdSliderModule,
MdSlideToggleModule,
MdSnackBarModule,
MdSortModule,
MdStepperModule,
MdTabsModule,
MdToolbarModule,
MdTooltipModule,
StyleModule,
MdCommonModule
} from '#angular/material';
const MATERIAL_MODULES = [
MdAutocompleteModule,
MdButtonModule,
MdButtonToggleModule,
MdCardModule,
MdChipsModule,
MdCheckboxModule,
MdDatepickerModule,
MdTableModule,
MdDialogModule,
MdExpansionModule,
MdFormFieldModule,
MdGridListModule,
MdIconModule,
MdInputModule,
MdListModule,
MdMenuModule,
MdPaginatorModule,
MdProgressBarModule,
MdProgressSpinnerModule,
MdRadioModule,
MdRippleModule,
MdSelectModule,
MdSidenavModule,
MdSliderModule,
MdSlideToggleModule,
MdSnackBarModule,
MdSortModule,
MdStepperModule,
MdTabsModule,
MdToolbarModule,
MdTooltipModule,
OverlayModule,
PortalModule,
BidiModule,
StyleModule,
A11yModule,
PlatformModule,
MdCommonModule,
ObserversModule,
];
#NgModule({
imports: MATERIAL_MODULES,
exports: MATERIAL_MODULES,
})
export class MaterialModule {}
MdCoreModule, while I'm not sure if it used to be there, isn't there for their recent versions, definitely so for you since your package.json says you're using beta.11, which is the most current version at this time. I assume yours would work if you simply got rid of MdCoreModule.
I can't tell from your code whether you've done this or not, but I would also suggest breaking out your imports for the Material Modules into its own file, like above, and import/export the separate module in your app.module.ts. For the sake of "only import the portions you will use to optimize build", you can delete whichever modules you do not use in your app from the imports and const exports.