Repository navigation
Error: moduleId should be a string #3576
Description
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 serveor
ng new someApp # Test to check if related to the project
ng serveWith 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?
Activity
hansl commentedon Dec 15, 2016
module.idin Webpack is a number, while Angular expects a string. What we should do is remove themoduleIdmetadata when building with the CLI, so I'll do that in a PR. Thanks!bug(build): Remove moduleId from components when building
bug(build): Remove moduleId from components when building
bug(build): Remove moduleId from components when building
bug(build): Remove moduleId from components when building
bug(build): Remove moduleId from components when building
bug(build): Remove moduleId from components when building (#3664)
This is commit that should show how to use moduleId to load external …
bug(build): Remove moduleId from components when building (angular#3664)
1 remaining item
iamthechad commentedon Feb 15, 2017
I'm seeing the same issue as @arvsharm. Is the moduleId stripped out when running tests as well?
arvsharm commentedon Feb 16, 2017
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 commentedon Feb 23, 2017
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 commentedon Mar 8, 2017
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 commentedon Mar 8, 2017
A follow-up PR (#5193) was added recently to resolve a type issue on
module.idjackphang commentedon Mar 24, 2017
I remove moduleId then the quetion is reslove ...... And you try
mainak555 commentedon Mar 29, 2017
use
moduleId: module.id.toString()
Will work fine
fletchsod-developer commentedon May 11, 2017
module.id.toString()broke the Angular v4Component'stemplateUrldynamic path thingie for WebPack. :-/ :-/felipeperezsanchez commentedon Aug 7, 2017
use
moduleId: module.id.toString()
my project is working!!
magicianlee007 commentedon Oct 31, 2017
after change the moduleId to module.id.String(), I get strange error.
PanayotCankov commentedon Nov 7, 2017
Would it be too naïve to use __filename instead of module.id?
CWSCHREYER commentedon Jul 9, 2018
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 commentedon Sep 8, 2019
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.
bug(build): Remove moduleId from components when building (angular#3664)