angular-cli: Error: moduleId should be a string
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?
About this issue
- Original URL
- State: closed
- Created 8 years ago
- Comments: 15 (2 by maintainers)
Commits related to this issue
- bug(build): Remove moduleId from components when building Fixes #3576 — committed to Brocco/angular-cli by Brocco 8 years ago
- bug(build): Remove moduleId from components when building Fixes #3576 — committed to Brocco/angular-cli by Brocco 8 years ago
- bug(build): Remove moduleId from components when building Fixes #3576 — committed to Brocco/angular-cli by Brocco 8 years ago
- bug(build): Remove moduleId from components when building Fixes #3576 — committed to Brocco/angular-cli by Brocco 8 years ago
- bug(build): Remove moduleId from components when building Fixes #3576 — committed to Brocco/angular-cli by Brocco 8 years ago
- bug(build): Remove moduleId from components when building (#3664) Fixes #3576 — committed to angular/angular-cli by Brocco 8 years ago
- This is commit that should show how to use moduleId to load external resources like css and html. It will compile using ngc, but doesn't work with angular-cli, probably due to this change https://gith... — committed to chaosmonster/angular-library-starter by nathraQ 7 years ago
- bug(build): Remove moduleId from components when building (#3664) Fixes #3576 — committed to MRHarrison/angular-cli by Brocco 8 years ago
use moduleId: module.id.toString()
Will work fine
I remove moduleId then the quetion is reslove … And you try
module.id.toString()
broke the Angular v4Component
’stemplateUrl
dynamic path thingie for WebPack. 😕 😕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?
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.