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!