Angular-cli: Error: moduleId should be a string

[viki53]

OS

macOS Sierra (10.12.2)

Versions

angular-cli: 1.0.0-beta.22-1
node: 6.3.1
os: darwin x64

Repro steps

ng init # Original project where I encountered the bug
ng serve

or

ng new someApp # Test to check if related to the project
ng serve

With this modification in src/app/app.component.ts:

@Component({
+  moduleId: module.id,
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

The log given by the failure

Error: moduleId should be a string in "AppComponent". See https://goo.gl/wIDDiL for more information.
If you're using Webpack you should inline the template and the styles, see https://goo.gl/X2J8zc.
componentModuleUrl — metadata_resolver.js:847
getNonNormalizedDirectiveMetadata — metadata_resolver.js:198
_loadDirectiveMetadata — metadata_resolver.js:134
map
loadNgModuleMetadata — metadata_resolver.js:315
_loadModules — runtime_compiler.js:99
_compileModuleAndComponents — runtime_compiler.js:69
compileModuleAsync — runtime_compiler.js:59
_bootstrapModuleWithZone — application_ref.js:302
(fonction anonyme) — main.ts:12
__webpack_require__ — bootstrap e91d12277f564bbde63b:52
(fonction anonyme) — app.component.html:1
__webpack_require__ — bootstrap e91d12277f564bbde63b:52
webpackJsonpCallback — bootstrap e91d12277f564bbde63b:23
Code général — main.bundle.js:1

Useful details

I was trying to use angular-cli on an existing Angular2 project, to use the built-in server instead of lite-server (which I used before, as it's the method shown in the docs), and after some adjustments, I ended up with this error in the browser (Safari) while the Terminal said everything looked fine.

So I tried setting up a new Angular 2 project using ng new to compare my code and see what went wrong, but when I tried running the sample project I got the same result.

Here are the logs I get while running the sample project with ng serve:

Hash: e91d12277f564bbde63b          / Time: 7492ms                
chunk    {0} main.bundle.js, main.bundle.map (main) 4.75 kB {2} [initial] [rendered]
chunk    {1} styles.bundle.js, styles.bundle.map (styles) 9.99 kB {3} [initial] [rendered]
chunk    {2} vendor.bundle.js, vendor.bundle.map (vendor) 2.22 MB [initial] [rendered]
chunk    {3} inline.bundle.js, inline.bundle.map (inline) 0 bytes [entry] [rendered]
webpack: bundle is now VALID.

Any idea what could have been done wrong?

[hansl]

module.id in Webpack is a number, while Angular expects a string. What we should do is remove the moduleId metadata when building with the CLI, so I'll do that in a PR. Thanks!

[arvsharm]

I have updated env of my application to use angular cli 1.0.0-beta.30 still I am getting the same error while running tests

Chrome 56.0.2924 (Windows 7 0.0.0) AppComponent should render title in a h1 tag
FAILED
Error: moduleId should be a string in "MyComponent". See https://goo.gl/wIDDiL for more information.

[iamthechad]

I'm seeing the same issue as @arvsharm. Is the moduleId stripped out when running tests as well?

[arvsharm]

I am able to get the tests working by changing moduleId to string in each of my components
moduleId: module.id + '',

Is this solution correct?

[santonica]

I am seeing the same issue with following config.

@angular/cli: 1.0.0-beta.32.3 [1.0.0-beta.26]
node: 6.9.4
os: win32 x64
@angular/common: 2.4.8
@angular/compiler: 2.4.8
@angular/core: 2.4.8
@angular/forms: 2.4.8
@angular/http: 2.4.8
@angular/platform-browser: 2.4.8
@angular/platform-browser-dynamic: 2.4.8
@angular/router: 3.4.8
@angular/cli: 1.0.0-beta.32.3
@angular/compiler-cli: 2.4.8

[BlazerYang]

I also seeing the problew, which webpack is compile successfully, but throw error in chrome like following:
"moduleId should be a string in "AppComponent". See https://goo.gl/wIDDiL for more information.
If you're using Webpack you should inline the template and the styles, see https://goo.gl/X2J8zc."

config is as following:
"@angular/common": "^2.3.1",
"@angular/compiler": "^2.3.1",
"@angular/core": "^2.3.1",
"@angular/forms": "^2.3.1",
"@angular/http": "^2.3.1",
"@angular/platform-browser": "^2.3.1",
"@angular/platform-browser-dynamic": "^2.3.1",
"@angular/router": "3.0.1",
"@angular/upgrade": "^2.3.1",

is any solution yet?

[Brocco]

A follow-up PR (#5193) was added recently to resolve a type issue on module.id

[jackphang]

I remove moduleId then the quetion is reslove ...... And you try

[mainak555]

use
moduleId: module.id.toString()

Will work fine

[fletchsod-developer]

module.id.toString() broke the Angular v4 Component's templateUrl dynamic path thingie for WebPack. :-/ :-/

[felipeperezsanchez]

use
moduleId: module.id.toString()

my project is working!!

[alexeytkachenko]

after change the moduleId to module.id.String(), I get strange error.

[PanayotCankov]

Would it be too naïve to use __filename instead of module.id?

[CWSCHREYER]

Recently encountered this problem regarding angular 2 and a component called jw-pagination
The error stated: Error: moduleId should be a string in "Pagination Component".

To fix, I changed my module.id in both the controller, and the Pagination component to:

@Component({ moduleId: 'module.id',})

Encapsulating the module.id to a string.

That fixed it.

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