Angular-cli: Cannot find name 'require'. using relative paths...

[born2net]

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

[ghost]

Same here,

strangely enough the application still seems to work.

[ghost]

Ahhh here we go,

try adding
declare var require: any;

To src/typings.d.ts

[born2net]

ha great!!!
might be good to add to the included default d.ts file

[jesselpalmer]

@hansl I had to add declare var require: any; to the src/typings.d.ts file as well to get the errors to disappear, even though the application appeared to be working ok. Is this something that should be added permanently to the typings.d.ts file?

[blackat]

Hi,
I have the same issue but I do not use typings, I am using @type via npm. I have created the file src/typings.d.ts and added the declare var require: any;. The error disappear, but any good reason to do that? is there a better solution?

Thanks in advance 😉

[ghost]

It's just telling the typescript compiler that there is a global function
called require. And to not freak out about references to it.

On Sun, Sep 25, 2016, 1:53 PM Eugenio Lentini [email protected]
wrote:

Hi,
I have the same issue but I do not use typings, I am using @type via npm.
I have created the file src/typings.d.ts and added the declare var
require: any;. The error disappear, but any good reason to do that? is
there a better solution?

Thanks in advance 😉

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/angular/angular-cli/issues/2221#issuecomment-249435619,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABkM7BLICzfJKt4gvlHZ-lgsXLAFyyDAks5qtrUqgaJpZM4KAjRR
.

[peterblazejewicz]

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

npm install @types/node

[Kumabhiman]

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..

[wfsovereign]

I fix it, by try adding

declare var require: NodeRequire;

To src/typings.d.ts， hope it can help you

[stephengeorgewest-navitaire]

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;

[pgscada]

For me it was a typeRoots issue, need to ensure that it points correctly to node_modules if tsconfig is in the /src/ folder.

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

[odahcam]

I had a duplicated type and that was causing the same issue.

[kover]

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"]

[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._}