Solvedangular cli Cannot find name 'require'. using relative paths...

I am using a config with relative paths for style and template:

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'app works...!';
    ...

and getting an error of

Time: 3117ms
            Asset     Size  Chunks       Chunk Names
   main.bundle.js  4.62 MB    0, 3       main
scripts.bundle.js   330 kB    1, 3       scripts
 styles.bundle.js  10.2 kB    2, 3       styles
        inline.js  5.53 kB       3       inline
         main.map  5.04 MB    0, 3       main
      scripts.map   413 kB    1, 3       scripts
       styles.map    14 kB    2, 3       styles
       inline.map  5.59 kB       3       inline

ERROR in [default] C:\msweb\ng2Boilerplate\src\app\app.component.ts:45:14
Cannot find name 'require'.

ERROR in [default] C:\msweb\ng2Boilerplate\src\app\app.component.ts:46:13
Cannot find name 'require'.
Child html-webpack-plugin for "index.html":
         Asset    Size  Chunks       Chunk Names
    index.html  3.3 kB       0
webpack: bundle is now VALID.

running:

angular-cli: 1.0.0-beta.14
node: 6.5.0
os: win32 x64

regards

Sean

15 Answers

✔️Accepted Answer

Ahhh here we go,

try adding
declare var require: any;

To src/typings.d.ts

Other Answers:

When I used:

declare var require: any;

Npm functioned but in visual studio I got:

Error	TS2403	Subsequent variable declarations must have the same type.  Variable 'require' must be of type 'any', but here has type 'NodeRequire'.	TypeScript Virtual Projects	node_modules\@types\node\index.d.ts	

When I used:

declare var require: NodeRequire;

npm and visual studio failed on:

ERROR in src/typings.d.ts (18,22): Cannot find name 'NodeRequire'.

Adding to tsconfig.json didn't help:

"typeRoots": [
	"node_modules/@types"
],

I ended up dumping a bunch of stuff in src/typings.d.ts

interface NodeRequireFunction {
	(id: string): any;
}

interface NodeRequire extends NodeRequireFunction {
	resolve(id: string): string;
	cache: any;
	extensions: any;
	main: NodeModule | undefined;
}

declare var require: NodeRequire;

interface NodeModule {
	exports: any;
	require: NodeRequireFunction;
	id: string;
	filename: string;
	loaded: boolean;
	parent: NodeModule | null;
	children: NodeModule[];
}

declare var module: NodeModule;

FYI: I've fixed the original problem by adding @types/node with:

npm install @types/node

I had a similar issue and the error is gone after I removed

"types": []

from tsconfig.app.json which in /src/ folder or you can add

"types": ["node"]

Add typing.d.ts in main folder of the application and over there declare the varible which you want to use every time

As for example:

declare var System: any;
declare var require: any;

after declaring this in typing.d.ts, error for "require" and "system" will not come in the application..

More Issues: