Angular-cli: Cannot read property 'replace' of undefined when running --aot build

[cheng1994]

Please provide us with the following information:

OS?

Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)

Windows Server 2012 and Mac OSX 10.12.1

Versions.

Please run ng --version. If there's nothing outputted, please run in a Terminal: node --version and paste the result here:

angular-cli: 1.0.0-beta.20-4
node: 6.9.1
os: darwin x64

Repro steps.

Was this an app that wasn't created using the CLI? What change did you do on your code? etc.

Created using CLI

"dependencies": {
    "@angular/common": "^2.1.0",
    "@angular/compiler": "^2.1.0",
    "@angular/core": "^2.1.0",
    "@angular/forms": "^2.1.0",
    "@angular/http": "^2.1.0",
    "@angular/material": "^2.0.0-alpha.10",
    "@angular/platform-browser": "^2.1.0",
    "@angular/platform-browser-dynamic": "^2.1.0",
    "@angular/router": "^3.1.0",
    "core-js": "^2.4.1",
    "jquery": "^3.1.1",
    "ms-signalr-client": "^2.2.5",
    "primeng": "^1.0.0-rc.6",
    "primeui": "^4.1.15",
    "rxjs": "5.0.0-beta.12",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.6.23"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^2.1.0",
    "@types/jasmine": "^2.2.30",
    "@types/node": "^6.0.42",
    "angular-cli": "1.0.0-beta.20-4",
    "codelyzer": "~1.0.0-beta.3",
    "jasmine-core": "2.4.1",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "4.0.9",
    "ts-node": "1.2.1",
    "tslint": "3.13.0",
    "typescript": "~2.0.3",
    "webdriver-manager": "10.2.5"
  }

The log given by the failure.

Normally this include a stack trace and some more information.

ERROR in ./src/app/app.module.ngfactory.ts
Module build failed: TypeError: Cannot read property 'replace' of undefined
    at Object.normalizeSlashes (/Users/gordonchen/Documents/Work/Angular-2-Web/node_modules/typescript/lib/typescript.js:1771:20)
    at writeReferencePath (/Users/gordonchen/Documents/Work/Angular-2-Web/node_modules/typescript/lib/typescript.js:37236:90)
    at /Users/gordonchen/Documents/Work/Angular-2-Web/node_modules/typescript/lib/typescript.js:35750:29
    at Object.forEach (/Users/gordonchen/Documents/Work/Angular-2-Web/node_modules/typescript/lib/typescript.js:1115:30)
    at /Users/gordonchen/Documents/Work/Angular-2-Web/node_modules/typescript/lib/typescript.js:35742:20
    at Object.forEach (/Users/gordonchen/Documents/Work/Angular-2-Web/node_modules/typescript/lib/typescript.js:1115:30)
    at emitDeclarations (/Users/gordonchen/Documents/Work/Angular-2-Web/node_modules/typescript/lib/typescript.js:35735:12)
    at getDeclarationDiagnosticsFromFile (/Users/gordonchen/Documents/Work/Angular-2-Web/node_modules/typescript/lib/typescript.js:35699:13)
    at onSingleFileEmit (/Users/gordonchen/Documents/Work/Angular-2-Web/node_modules/typescript/lib/typescript.js:7569:13)
    at Object.forEachExpectedEmitFile (/Users/gordonchen/Documents/Work/Angular-2-Web/node_modules/typescript/lib/typescript.js:7542:21)
    at Object.getDeclarationDiagnostics (/Users/gordonchen/Documents/Work/Angular-2-Web/node_modules/typescript/lib/typescript.js:35695:12)
    at /Users/gordonchen/Documents/Work/Angular-2-Web/node_modules/typescript/lib/typescript.js:45673:27
    at runWithCancellationToken (/Users/gordonchen/Documents/Work/Angular-2-Web/node_modules/typescript/lib/typescript.js:45468:24)
    at getDeclarationDiagnosticsWorker (/Users/gordonchen/Documents/Work/Angular-2-Web/node_modules/typescript/lib/typescript.js:45669:20)
    at Object.getDeclarationDiagnostics (/Users/gordonchen/Documents/Work/Angular-2-Web/node_modules/typescript/lib/typescript.js:45457:24)
    at _transpile (/Users/gordonchen/Documents/Work/Angular-2-Web/node_modules/@ngtools/webpack/src/loader.js:92:29)
    at /Users/gordonchen/Documents/Work/Angular-2-Web/node_modules/@ngtools/webpack/src/loader.js:128:26
    at process._tickCallback (internal/process/next_tick.js:103:7)
 @ ./src/main.ts 4:0-64
 @ multi main

Mention any other details that might be useful.

Error occurs twice both on a module.ngfactory.ts when running with --aot only

[michael34]

I have this problem as well on Windows. Without --aot it works fine.

Error: ENOENT: no such file or directory, stat 'C:\Users\li1058\Source\Repos\OpsiSPA\Front\src\app\app.module' at Error (native) at Object.fs.statSync (fs.js:981:18) at _symbolImportLookup (C:\Users\li1058\Source\Repos\OpsiSPA\Front\node_modules\@ngtools\webpack\src\entry_resolver.js:103:28) at Object.resolveEntryModuleFromMain (C:\Users\li1058\Source\Repos\OpsiSPA\Front\node_modules\@ngtools\webpack\src\entry_resolver.js:148:18) at AotPlugin._setupOptions (C:\Users\li1058\Source\Repos\OpsiSPA\Front\node_modules\@ngtools\webpack\src\plugin.js:109:77) at new AotPlugin (C:\Users\li1058\Source\Repos\OpsiSPA\Front\node_modules\@ngtools\webpack\src\plugin.js:35:14) at Object.exports.getWebpackAotConfigPartial (C:\Users\li1058\Source\Repos\OpsiSPA\Front\node_modules\angular-cli\models\webpack-build-typescript.js:57:13) at new NgCliWebpackConfig (C:\Users\li1058\Source\Repos\OpsiSPA\Front\node_modules\angular-cli\models\webpack-config.js:18:42) at Class.exports.default.Task.extend.run (C:\Users\li1058\Source\Repos\OpsiSPA\Front\node_modules\angular-cli\tasks\build-webpack.js:17:22) at Class.Command.extend.run (C:\Users\li1058\Source\Repos\OpsiSPA\Front\node_modules\angular-cli\commands\build.js:50:26) at Class.<anonymous> (C:\Users\li1058\Source\Repos\OpsiSPA\Front\node_modules\angular-cli\angular-cli\lib\models\command.js:152:17) at process._tickCallback (internal/process/next_tick.js:103:7)

[nickmorton]

Just spent hours fixing this. It was caused by a single instance of

/// <reference path="..." />

the Object.normalizeSlashes was the clue!

[cheng1994]

@nickmorton Thanks! thats exactly the issue going on.

[MigCoder]

Hi @nickmorton , I encounter the same problem here, '--aot' build works after I remove the '/// ' statement from my ts file, but I need to use a lot of '*.d.ts' files for import some no typescript libraries, which mean I need this reference statement, any solution for this?

[MigCoder]

Just solved this issue by change an option value in tsconfig.json file:

{
"declaration": false to true
}

Here is the thread reference:
https://github.com/YousefED/typescript-json-schema/issues/23

[michael34]

@MigCoder doesn't work for me but maybe I'm using an outdated lib. Not sure.

[nickmorton]

@michael34 Looking at the exception your problem is something different. Difficult to tell from the error, but I would check you're exporting all your classes, interfaces, etc.
This isn't for the faint hearted I'm afraid. I've had to resort to debugging angular-clI a number of times to unravel some cryptic exceptions.

[nickmorton]

@MigCoder Glad you're sorted. Just in case though, I don't think you need to use ///

1. You replace typings with npm @types packages.
2. Providing you don't use files:[] in your tsconfig make sure .d.ts files are in the same or child folders.

[michael34]

@nickmorton thanks. I will write here if/when I figure it out.

[lordgreg]

Exactly the same isue here. Any updates?

[michael34]

@lordgreg unfortunately no.

[HonnKing]

Also getting this, but I don't even use any type files like this, so in my case I guess it is something else. I think the main issue here is not whatever causes it but the incredibly unhelpful error message.

In my case it appears to be replaced to using styleUrls.

[borislemke]

Similar case different source error.
In my logs, it says:

error_handler.js:53 TypeError: Cannot read property 'replace' of undefined
    at flattenStyles (dom_renderer.js:301)
    at new DomRenderer (dom_renderer.js:80)
    at DomRootRenderer_.DomRootRenderer.renderComponent (dom_renderer.js:38)
    at DebugDomRootRenderer.renderComponent (debug_renderer.js:15)
    at ViewUtils.renderComponent (view_utils.js:23)
    at View_AppComponent0.AppView (view.js:50)
    at new View_AppComponent0 (app.component.ngfactory.ts:107)
    at View_AppComponent_Host0.createInternal (app.component.ngfactory.ts:71)
    at View_AppComponent_Host0.AppView.createHostView (view.js:81)
    at ComponentFactory.create (component_factory.js:154)

I'm guessing flattenStyles is the culprit here. I'm using styleUrls in components. At first, I used scss and had ng-cli compile it for me. I tried to compile each scss file to css by using WebStorm's file watcher. Still same isuue. Anyone care to help?

[nickmorton]

I've faced the flattenStyles exception. For me, it was caused by a component with a style sheet referenced in styleUrl but also with ViewEncapsulation === None. It's going to be hoisted anyway so I moved it to a partials folder and referenced it in angular-cli.json styles:[].

[borislemke]

@nickmorton thanks!!! This solved the issue for me, I opened a new issue mentioning this error so the people at ng-cli can fix this or at least give advise on how to do this properly.

[filipesilva]

I don't think any of these issues are fixable in the CLI per se. They all seem to be AoT related errors that you'd get by compiling your code with ngc without the CLI. ngc compilation is overall more strict than tsc.

The best place for AoT/ngc related errors is https://github.com/angular/angular.

[rkusuma]

@nickmorton so you mean we can't use ViewEncapsulation.None when use aot flag?
@borislemke where is the issue you open?

[borislemke]

@rkusuma https://github.com/angular/angular-cli/issues/3399

We can use ViewEncapsulation with --aot, but not a combination of them AND styleUrls / styles. The current workaround is, if you need styles for that non-encapsulated component to include the styles in the angular-cli.json.

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